Signal Small Frames

A plugin can add a small box to the dashboard, or to each subscriber’s page. sg-widget and sg-panel are made for these boxes. They work the same way: the names only say where the box goes.

sg-widget and sg-panel

<sg-widget title="Polls">
  <sg-stat label="Answers this week" value="318"></sg-stat>
</sg-widget>

The box fills the frame, with a white background and small padding.

The manifest picks the place:

Broadcast draws a title bar above each frame from the manifest’s title, so you often do not need the title attribute.

The limits of a small frame

A small frame is 16rem high (256 pixels). Anything taller scrolls inside the frame.

• Show one number, or one short form.
• Do not use sg-page. It adds large padding and a big title.
• Do not use sg-menu or sg-tooltip near an edge: they can be cut off at the frame.
• A sg-dialog and sg.confirm stay inside the frame, so keep them short.

Which subscriber?

A panel gets the subscriber from its address. Use sg.subscriberId():

const id = sg.subscriberId();   // "12", as a string

A dashboard widget has no subscriber, and the call gives null.

Common mistake. Trusting this ID in pageData. It comes from the browser. A person who may view the page can change it, so it can only reach subscribers of this channel, but check it if your plugin has extra rules.

Fill a frame from data

A component draws once, so replace the content of the inner box when the data arrives. The inner box has the class .sg-widget, for both tags. See the widget recipe and the panel recipe.