View the examples in the QuickApp Editor

This topic shows you how to take the sample Macro Language code that is provided in the QuickApp Editor examples and bring up the Widget Builder to see the corresponding settings.

A number of QuickApp examples are provided for each of the various classes of widgets. These examples demonstrate how settings in the Widget Builder affect the behavior or appearance of the widgets. They also give you the ability to play with different settings in the Widget Builder and then see the effects on the widget.

To run an example provided for a particular widget class:

  1. In the 1010data User's Guide, navigate to and open the topic under Class properties for the widget you are interested in.

    Let's say we wanted to show the settings in the Widget Builder for one of the examples of the input field widget. You could navigate to and open that topic from the table of contents in the 1010data User's Guide.

  2. In the topic for the widget you're interested in, scroll down to the sections that are labeled Example and decide on which one you'd like to explore.

    Let's say we've opened the Input field topic and scrolled down to the first Example section:

  3. In an active 1010data session, open the table pub.demo.retail.item.
    Note: The same base table is used for each of the examples.

  4. Click Actions > Edit Actions (XML)... to open the Edit Actions (XML) dialog.

  5. From the Example section in the documentation, copy all of the example code.

  6. Paste the code into the Edit Actions (XML) dialog.

  7. Click Apply in the Edit Actions (XML) dialog.

    You will see a table that contains all the metadata for the QuickApp.

  8. Click View > Show QuickApp... to display the QuickApp.

    The QuickApp containing your widget will be displayed.

  9. To open the QuickApp Editor, click View > QuickApp Editor...

    The background will turn into a grid with the widgets appearing on top of it.

  10. To open the Widget Builder for a particular widget, right-click on the desired widget and click Widget properties from the context menu.

    For example, to see the widget properties associated with the First numeric input field widget, right-click anywhere on it and click Widget properties from the menu.

    The Widget Builder will open, showing the Class properties tab for this widget.

  11. Make any desired changes to any of the properties for the widget.

    Let's say we want the input field to be blue and the text color to be white:

    1. Click the Field color field and select a blue-colored square.

    2. Click the Text color field and select a white-colored square.

  12. Click Save to save your changes.

    You will see your changes to the widget.

  13. To commit your changes to the QuickApp, right-click anywhere on the grid (in a space not occupied by a widget) and click Commit changes to this QuickApp.

    Your QuickApp will be displayed with the changes you have made.

Feel free to explore each of the examples for the different widgets and play with the various settings to get a feel for how they work.