At the top of the screen you can find several icons that correspond to virtual canvases of a specific width. Luzmo items (text, charts, sums, etc) can be placed, sized and configured upon these canvases to support responsiveness when the dashboard is embedded in your product. For example, items might be placed side-by-side for desktop viewing, but vertically for mobile.
When embedding a dashboard using one of our frontend libraries, the appropriate screen mode will be detected based on the parent component’s width and the dashboard is then scaled to fit. If you prefer to set the screen mode manually, it can be set using the screenMode property in the frontend component: more information about this property can be found in our developer documentation.
Hovering over the screen mode area reveals a gear icon labeled “configure”, which brings up the screen mode options. In the responsive portion of the modal, screen modes are shown in color when enabled, and will appear as options in the dashboard editor. Click a screen mode to enable or disable it. Each of the screen modes in this modal contain a threshold reference (e.g. for Desktop, it mentions “>= 1200px”). This threshold will be used by the frontend component to automatically switch between different screen modes based on the parent component’s width, and scale appropriately.
By keeping the “keep items and item options in screen modes in sync” toggle on, items are synchronized across screen modes. This means that items created in one screen mode are automatically appended at the bottom of every other screen mode, and adjusting the settings of an item (such as title, subtitle, theme, etc) automatically updates that item in all screen modes. This is very helpful to keep your dashboard working consistently over multiple devices, but can be turned off if more customization is needed.
We strongly suggest keeping this option enabled as disabling it will bring along additional maintenance to future dashboard improvements.
If you need to customize items by screen mode, we recommend making sure that all to-be-synchronized changes have been finalized before disabling this toggle and making the screen mode specific changes wherever required.
Sometimes a fixed width for the dashboard is desired. It can be set in the fixed width tab of the modal. Do note that at this point the embedded dashboard will not be responsive to the parent container.
Even with sync mode on, it’s easy for dashboards in different screen modes to diverge, as the location and sizing of different items are not synchronized to avoid breaking existing layout setups in other screen modes (i.e new items added in one screen mode are appended in other screen modes at the bottom). If you have a dashboard looking amazing in one screen mode, the easiest way to replicate it to others is to follow these steps:
Each screen mode will be automatically initiated based on the screen mode you started from and the new screen mode’s width threshold. You can now customize each screen mode as desired.
If you want to add, change or reconfigure items separately between screen modes, you should disable the sync toggle before making these changes.