Widgets are single user-interface elements that can be configured, for example, a drop-down menu or different kind of buttons.
Widgets in the Web Modeler differ by categories and by the origin.
2 Viewing Widgets in the Web Modeler
To view widgets in the Web Modeler, do the following:
Click the Pages icon in the left menu bar.
In the displayed list of app pages, select the page you want to open and click it.
In the Toolbox tab, click Widgets.
3 Widgets by Category
Widgets of the Web Modeler are divided into categories that you can see when you open the Widgets tab.
Widget categories are described in the table below:
|Data Containers||Contains data view (the starting point for showing the contents of one object ), and list view (the starting point for showing the contents of list of objects). For more information, see Data View and List View Properties in the Web Modeler.|
|Input Elements||Contains different elements that can be used for inputting data. For more information, see Input Element Widgets in the Web Modeler.|
|Images||Contains widgets that are used to display for images. For more information, see Image Widgets in the Web Modeler.|
|Typography||Contains widgets that can used for placing a text on a page. For more information, see Typography Widgets in the Web Modeler.|
|Buttons||Contains a variety of buttons for placing on a page. For more information, see Button Widgets in the Web Modeler.|
|Layouts||Contains layouts used for placing the elements. For more information, see Layout Widgets in the Web Modeler.|
|Menus||Contains widgets used for creating a menu. These widgets can be currently configured only in the Desktop Modeler. For more information, see Menu Widgets in the Desktop Modeler category.|
|Display||Contains widgets suitable for displaying changing elements on a page, e.g. a map, or a progress bar. This category consist of the App Store widgets. For more information, see section 4 Widgets by Origin.|
|Charts||Contains different charts. This category consist of the App Store widgets. For more information, see section 4 Widgets by Origin.|
|List view Controls||Contains controls for the list view. This category consist of the App Store widgets. For more information, see section 4 Widgets by Origin.|
|Add-ons||Contains all custom widgets previously installed in the app. If widgets cannot be matched to the App Store profile they will be shown in the add-ones.|
4 Widgets by Origin
Widgets in the Web Modeler can be divided by origin described in the table below:
|Default widgets||Widgets that are included into your app by default and don’t have the info icon in the top-right corner.||Apps created in the Developer Portal. For more information on the Developer Portal, see Developer Portal.|
|App Store widgets||Widgets that are you can download to your project directly from the Web Modeler. Some App Store widgets are already in your project as a part of the app. Such widgets have the information icon in the top-right corner of widgets in the Toolbox.
For more information on the App Store, see App Store Overview.
|Local widgets||Either widgets that are a part of a starter app, or widgets created by your or your team locally via the Desktop Modeler. For more information on developing widgets, see the Custom Widget Development how-to’s. As a rule local widgets will be listed in the Add-ons category. For more information on categories, see section 3 Widgets by Category.||Apps created in the Developer Portal/Desktop Modeler|
5 Adding the App Store Widgets
You can add App Store widgets to your app by downloading them directly in the Widgets tab in the Web Modeler. These widgets are a subset of all widgets available in the app store: only the ones that are approved for use in the Web Modeler can be downloaded by the user. You can also update them once the update is available. For more information on the widgets updating, see App Settings in the Web Modeler.
To add an App Store widget, do the following:
Open the Widgets tab.
Do one of the following:
a. Find the category with the View App Store widgets option and click it.
b. Start typing the name of the category or of a specific widget in the Search field.
Click the cloud icon to download the widget and add it to your project.
The widget is now added to your project, you can simply drag and drop it to the page to use it. You can also view settings of this widget in the App Settings. For more information, see App Settings Overview in the Web Modeler.
Some App Store widgets are downloaded as a package consisting of several widgets, for example, when you download one chart widget, the whole package of charts is downloaded.