Dynamic Runtime Widget Management in Perspective Dashboard Component

Ignition
1

Hi everyone,

I am working on a Perspective-based dashboard in Ignition 8.1.48 and trying to implement a custom widget management system using the Dashboard Component. I want to know if this is achievable within the Dashboard component itself.

In my idea my layout has a fixed 2-column Dashboard as the main area. Each widget inside the dashboard has three control buttons which are a minimize button, an expand button, and a restore button.(is this possible to do because I tried using the props.widget but nothing worked)

When the minimize button is pressed on any widget, that widget should move to a separate vertical tray panel placed beside the main dashboard. The remaining widget in that same row should automatically expand to fill the full row width. When the minimized widget in the tray is clicked, it should return to its original default position in the main dashboard and the expanded widget should shrink back to its original size.

When the expand button is pressed on any widget, that widget should overlap and cover the entire dashboard area hiding all other widgets. When the restore button is pressed it should go back to its default size and position.

My core questions are, first, is it possible to programmatically change a widget's column span at runtime within the Dashboard component using scripts. Second, can we dynamically add or remove widgets from the Dashboard component's widget array through scripting. Third, are there any script hooks or events exposed by the Dashboard component that can be used for this behavior. Fourth, if the Dashboard component cannot support this natively, what would be the recommended Perspective approach to achieve the same layout behavior.

I have already checked self.props.widgets which appears to be read only at runtime and I could not find any onWidgetChange or similar events in the Dashboard component.

Any guidance would be really helpful. Thank you.

2

Dashboard Component Docs

  1. Changing widget position at runtime
    You can read and write props.widgets directly via script. (ex: a button script using self.getSibling("Dashboard").props.widgets). Each widget object in the array has position properties including row/col start and end that you can modify directly, so repositioning or resizing a widget is just a matter of pulling the array, updating those values on the target widget, and writing it back.
  2. Dynamically adding/removing widgets
    Same approach, just modify the array. Filter a widget out to remove it, append a new object to add one, then write the updated array back to props.widgets. The IA docs also show a full save/load pattern using system.util.jsonEncode/jsonDecode and a DB table if you want persistence across sessions, which is what I do in my implementation.
  3. Script hooks / events
    There's no built-in onWidgetChange event, but the docs recommend adding a property change script on the widgets prop to listen for changes, which is your hook. You can also wire onStartup to load a saved layout from the DB and populate both widgets and availableWidgets.
  4. The configurable view pattern
    For your minimize/expand buttons specifically, the recommended approach is to build those controls inside the widget views themselves and use the configuring param pattern the IA docs describe. The Dashboard passes a configuring parameter to each widget view, which you can use to toggle between a display container and a configure container. That is where you would wire up your minimize/expand/restore button logic to manipulate the parent props.widgets array.
3

Thanks Noah