Widgets
Big Picture Goal:
The new board along with the new widgets aims to create a more flexible platform for users to create their ideal dashboard with their own design language.
Detail Description:
Sample Project
For Grid Studio, there are prebuilt widgets that you are use directly and use them as starting templates to customize your own.
Adding a Widget
Don´t see any widgets?
Check the Library and download a widget package.
Open the Library via View > Library
Navigate to Extensions > Online
Select “Grid Original” and/or “Grid Progressive”
Right-click the package and select “Install globally”
To access these widgets, click on the widget button at the menu bar which is at the top of the board window. A pop up window will show up and you can choose the widget you want. Also, you can start typing and search for a specific widget.
Another option to adding widgets into your board can be done through the Library window
If it is the first time you are creating a widget in your project, there will be a Style object that gets created into your project tree at the same time.
The Style object holds the parameters for the font, and color scheme of the widget.
Customizing a Widget
It is possible to change the theme of these widgets through changing the values of the style object.
You can make duplicate the default style object and start making your own.
By simply changing the color theme of the standard widgets, it is possible to create some vastly different and maybe even more colorful designs if that is preferred.
Using a Widget
Most of the widgets that can be interact with has the option to pick up on those events and attach actions to it.
Under the workflow of the widget, there is the option to add events.
In the above example, for a Push Button, you have the option for the Button Press Triggered.
Different types of events are available for different widgets. In this instance, this event is when someone has pressed or triggered the push button.
Just like the rest of the event and action system, you can add any necessary actions to this event within the workflow of the object. For more details, please refer to Workflow.
Data Source
Often widgets have some data source associated with them. Data Source enables the passing of information between the widget and the rest of the system.
One way to interact with the widget and edit some of the settings available for the widget is via the data sources.
Quick Access to Data Source
Double clicking directly on the widget brings out a quick access panel to the data source associated with the widget.
Auto Layout
Grid has the option to automatically layout widgets for you when they are placed inside a frame. For more details, please refer to here.
Quick Adding of Action to Widget
To help users to quickly add actions to a widget, you can drag an object directly onto a widget.
This will bring up the list of events available for the widget.
After selecting the desired event you are interested in, you get to choose the action from the object that you want to create.
Choose the action that you would like to create, and Grid will automatically link the selected action node to the chosen event of the widget.
Last updated