Inpatient Bed Board

Inpatient — Bed Board

The Bed Board is a graphical, map-like view of your hospital. Instead of a table of rooms, it shows a drawing of the site that you can click into — site → building → floor → unit — drilling down through the real layout of your hospital. Beds are colour-coded by their live status (Available, Occupied, Housekeeping, and so on).

Page: Inpatient → Room → Bed Board XHTML: /inward/inward_bed_board.xhtml Controller: AdmissionController.navigateToBedBoard() / BedBoardController Privilege: InwardRoomRoomOccupency

How the picture is built

The map you see is assembled at runtime from small drawings (SVGs) stored on each entity. Every level of the hierarchy — the Site (an Institution), each Building / Floor / Unit (a Department), and each Bed (a Room) — can store two drawings:

Field	What it is	When it shows
Parent View (`svgParentView`)	The entity's own floor-plan canvas — an empty map of just this place (e.g. the outline of the site, or the rectangle of a building). It contains no child information.	When you are looking at this entity (it fills the page).
Child View (`svgChildView`)	A small shape showing how this entity looks as a tile inside its parent's canvas, already positioned in the right place.	When you are looking at the parent (it is overlaid on the parent's canvas).

When you open a level, the system draws that entity's Parent View as the background and then lays every child's Child View on top of it, on the same coordinate grid, so together they form one complete picture. Click a child and its Parent View becomes the new background, with its children filling in — and so on, all the way down to the beds.

No drawing stored? The Bed Board still works — it falls back to an automatically generated grid of coloured cards. The SVGs are optional; they just make it look like a real map.

The golden rule: a shared coordinate grid

For the overlay to line up, every SVG at every level uses the same viewBox. Throughout this guide we use:

viewBox="0 0 1000 600"

That gives you a drawing area 1000 units wide and 600 units tall. A child's shape is placed using coordinates inside that same 1000×600 grid, so when it is overlaid on the parent it lands exactly where you drew it.

Where the drawings are stored in the database

Hospital level	Entity	Table	Parent View column	Child View column
Site	`Institution` (type Site)	`institution`	`SVGPARENTVIEW`	`SVGCHILDVIEW`
Building / Floor / Unit	`Department`	`department`	`SVGPARENTVIEW`	`SVGCHILDVIEW`
Bed	`Room`	`category` (Room is stored in the `category` table)	(not used)	`SVGCHILDVIEW`

The hierarchy is built from existing relationships:

A Building is a Department whose Site is set and which has no parent department.
A Floor / Unit is a Department whose parent department (superDepartment) is the level above it.

So before you draw anything, make sure your departments are linked: buildings point at the site, floors point at their building, units point at their floor.

A complete worked example

Below is a full, copy-paste example that builds this map:

Site (oval)
 ├─ Building One   (large, left)
 │   ├─ Floor One
 │   │   ├─ ETU
 │   │   └─ HDU
 │   └─ Floor Two
 └─ Building Two   (small, right)

Replace the IDs and names with your own. Every <svg> uses viewBox="0 0 1000 600".

Step 1 — The Site (oval canvas)

This is the empty site map — just the outline. Paste it into the site institution's SVGPARENTVIEW.

UPDATE institution
SET SVGPARENTVIEW =
'<svg viewBox="0 0 1000 600" xmlns="http://www.w3.org/2000/svg">
  <ellipse cx="500" cy="300" rx="470" ry="270" fill="#eef5ff" stroke="#1565c0" stroke-width="4"/>
  <text x="500" y="55" text-anchor="middle" font-size="30" font-weight="bold" fill="#0d47a1">My Hospital Site</text>
</svg>'
WHERE ID = <your_site_institution_id>;

Step 2 — Buildings (their Child Views sit inside the site oval)

Each building stores two drawings:

a Child View — the rectangle as it appears inside the site oval, and
a Parent View — the empty building canvas you'll see after clicking into it.

Building One — large, on the left:

UPDATE department
SET
  SVGCHILDVIEW =
  '<svg viewBox="0 0 1000 600" xmlns="http://www.w3.org/2000/svg">
    <rect x="120" y="150" width="360" height="320" rx="10" fill="#90caf9" stroke="#0d47a1" stroke-width="4"/>
    <text x="300" y="320" text-anchor="middle" font-size="26" font-weight="bold" fill="#0d47a1">Building One</text>
  </svg>',
  SVGPARENTVIEW =
  '<svg viewBox="0 0 1000 600" xmlns="http://www.w3.org/2000/svg">
    <rect x="60" y="60" width="880" height="480" rx="14" fill="#f1f8e9" stroke="#2e7d32" stroke-width="4"/>
    <text x="500" y="45" text-anchor="middle" font-size="28" font-weight="bold" fill="#1b5e20">Building One</text>
  </svg>'
WHERE ID = <building_one_department_id>;

Building Two — smaller, on the right:

UPDATE department
SET
  SVGCHILDVIEW =
  '<svg viewBox="0 0 1000 600" xmlns="http://www.w3.org/2000/svg">
    <rect x="600" y="220" width="240" height="200" rx="10" fill="#ffcc80" stroke="#e65100" stroke-width="4"/>
    <text x="720" y="325" text-anchor="middle" font-size="22" font-weight="bold" fill="#e65100">Building Two</text>
  </svg>',
  SVGPARENTVIEW =
  '<svg viewBox="0 0 1000 600" xmlns="http://www.w3.org/2000/svg">
    <rect x="120" y="120" width="760" height="360" rx="14" fill="#fff3e0" stroke="#e65100" stroke-width="4"/>
    <text x="500" y="90" text-anchor="middle" font-size="28" font-weight="bold" fill="#e65100">Building Two</text>
  </svg>'
WHERE ID = <building_two_department_id>;

Notice how Building One's rectangle (x="120") sits to the left and is bigger (width="360"), while Building Two's (x="600") is to the right and smaller (width="240"). Because both use the same 1000×600 grid as the site oval, they land neatly inside it.

Step 3 — Floors (their Child Views sit inside Building One)

Floor One — the top half of the building:

UPDATE department
SET
  SVGCHILDVIEW =
  '<svg viewBox="0 0 1000 600" xmlns="http://www.w3.org/2000/svg">
    <rect x="100" y="100" width="800" height="180" rx="8" fill="#a5d6a7" stroke="#1b5e20" stroke-width="3"/>
    <text x="500" y="200" text-anchor="middle" font-size="24" font-weight="bold" fill="#1b5e20">Floor One</text>
  </svg>',
  SVGPARENTVIEW =
  '<svg viewBox="0 0 1000 600" xmlns="http://www.w3.org/2000/svg">
    <rect x="60" y="80" width="880" height="440" rx="14" fill="#e3f2fd" stroke="#1565c0" stroke-width="4"/>
    <text x="500" y="55" text-anchor="middle" font-size="28" font-weight="bold" fill="#0d47a1">Floor One</text>
  </svg>'
WHERE ID = <floor_one_department_id>;

Floor Two — the bottom half:

UPDATE department
SET
  SVGCHILDVIEW =
  '<svg viewBox="0 0 1000 600" xmlns="http://www.w3.org/2000/svg">
    <rect x="100" y="320" width="800" height="180" rx="8" fill="#c5e1a5" stroke="#1b5e20" stroke-width="3"/>
    <text x="500" y="420" text-anchor="middle" font-size="24" font-weight="bold" fill="#1b5e20">Floor Two</text>
  </svg>',
  SVGPARENTVIEW =
  '<svg viewBox="0 0 1000 600" xmlns="http://www.w3.org/2000/svg">
    <rect x="60" y="80" width="880" height="440" rx="14" fill="#e8f5e9" stroke="#1b5e20" stroke-width="4"/>
    <text x="500" y="55" text-anchor="middle" font-size="28" font-weight="bold" fill="#1b5e20">Floor Two</text>
  </svg>'
WHERE ID = <floor_two_department_id>;

Step 4 — Units (their Child Views sit inside Floor One)

ETU — left half of the floor:

UPDATE department
SET
  SVGCHILDVIEW =
  '<svg viewBox="0 0 1000 600" xmlns="http://www.w3.org/2000/svg">
    <rect x="120" y="160" width="360" height="280" rx="8" fill="#80deea" stroke="#006064" stroke-width="3"/>
    <text x="300" y="305" text-anchor="middle" font-size="26" font-weight="bold" fill="#006064">ETU</text>
  </svg>',
  SVGPARENTVIEW =
  '<svg viewBox="0 0 1000 600" xmlns="http://www.w3.org/2000/svg">
    <rect x="80" y="80" width="840" height="440" rx="14" fill="#e0f7fa" stroke="#006064" stroke-width="4"/>
    <text x="500" y="55" text-anchor="middle" font-size="28" font-weight="bold" fill="#006064">ETU</text>
  </svg>'
WHERE ID = <etu_department_id>;

HDU — right half:

UPDATE department
SET
  SVGCHILDVIEW =
  '<svg viewBox="0 0 1000 600" xmlns="http://www.w3.org/2000/svg">
    <rect x="520" y="160" width="360" height="280" rx="8" fill="#ce93d8" stroke="#4a148c" stroke-width="3"/>
    <text x="700" y="305" text-anchor="middle" font-size="26" font-weight="bold" fill="#4a148c">HDU</text>
  </svg>',
  SVGPARENTVIEW =
  '<svg viewBox="0 0 1000 600" xmlns="http://www.w3.org/2000/svg">
    <rect x="80" y="80" width="840" height="440" rx="14" fill="#f3e5f5" stroke="#4a148c" stroke-width="4"/>
    <text x="500" y="55" text-anchor="middle" font-size="28" font-weight="bold" fill="#4a148c">HDU</text>
  </svg>'
WHERE ID = <hdu_department_id>;

That's it. Open the Bed Board and you'll see the oval site with the two buildings; click Building One to see its two floors; click Floor One to see ETU and HDU.

Drawing your own shapes

You don't need to be a designer. A few <svg> shapes cover almost everything:

A rectangle (a building, a room):

<rect x="120" y="150" width="360" height="320" rx="10"
      fill="#90caf9" stroke="#0d47a1" stroke-width="4"/>

x / y — the top-left corner, on the 0–1000 (across) / 0–600 (down) grid
width / height — the size
rx — rounded corners (optional)
fill — inside colour; stroke — border colour; stroke-width — border thickness

An oval / circle (a site, a round ward):

<ellipse cx="500" cy="300" rx="470" ry="270"
         fill="#eef5ff" stroke="#1565c0" stroke-width="4"/>

cx / cy — the centre point
rx / ry — half-width and half-height (use the same value for a perfect circle)

A label:

<text x="300" y="320" text-anchor="middle"
      font-size="26" font-weight="bold" fill="#0d47a1">Building One</text>

x / y — where the text sits (text-anchor="middle" centres it on that point)

Free-form outlines (an L-shaped ward, an irregular building) use <polygon>:

<polygon points="100,100 400,100 400,300 250,300 250,450 100,450"
         fill="#cfd8dc" stroke="#37474f" stroke-width="3"/>

Each pair is an x,y point on the grid; the shape connects them in order.

Tips for a clean map

Keep the same viewBox everywhere (0 0 1000 600). This is what makes the pieces line up.
In a Child View, draw only this place's own shape, positioned where it belongs inside the parent. Don't draw the parent or the siblings.
In a Parent View, draw only the empty container (the outline and a title). The children are added automatically.
Use distinct fill colours per area so the map is easy to read.
You can design visually in any free tool (e.g. a browser-based SVG editor) and paste the resulting <svg> code into the database column — just set the viewBox to 0 0 1000 600 and remove width/height attributes from the root <svg> tag.

Bed status colours

Beds (the leaf level) are coloured by their live status. The legend at the bottom of the Bed Board shows the colour key:

Status	Meaning
Available (green)	No active patient; the bed is free.
Occupied (red)	A patient is currently admitted to this bed.
Housekeeping (orange)	Being cleaned / turned over.
Contaminated (purple)	Requires deep cleaning / decontamination.
Isolated (yellow)	In use for isolation.
Out of Order (grey)	Not usable (maintenance, etc.).

Available and Occupied are worked out automatically from whether the bed has an undischarged patient. The other statuses are set explicitly on the room. When a status is set explicitly, it takes priority over the automatic Available/Occupied calculation.

Troubleshooting

Symptom	Likely cause
The Bed Board shows coloured cards instead of a map	No `svgParentView` is stored on the site/department you're viewing. Add one (Step 1).
A child shape doesn't appear on the parent's map	That child has no `svgChildView`, or it isn't linked to the right parent (`site` for buildings, `superDepartment` for floors/units).
A child appears in the wrong place or off-canvas	Its `svgChildView` uses coordinates outside `0 0 1000 600`, or a different `viewBox`. Make every SVG use the same `viewBox`.
Shapes overlap and you can't click the one underneath	Two child shapes are drawn on top of each other. Move them apart on the grid.
The board opens on the wrong site	The Bed Board opens the first Site that has a `svgParentView` stored. Configure the site you want, or clear `svgParentView` on sites you don't.

Inpatient Bed Board

Inpatient — Bed Board

How the picture is built

The golden rule: a shared coordinate grid

Where the drawings are stored in the database

A complete worked example

Step 1 — The Site (oval canvas)

Step 2 — Buildings (their Child Views sit inside the site oval)

Step 3 — Floors (their Child Views sit inside Building One)

Step 4 — Units (their Child Views sit inside Floor One)

Drawing your own shapes

Tips for a clean map

Bed status colours

Troubleshooting

Related Articles

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!