Dynamic Text

Description

You can update the data in a ControlBar dynamically and animated the ControlBar when it is refreshed.

images/aatext.png
Text entered into a textbox control updating a ControlBar html item .

To see an example on how to add dynamic text to a ControlBar watch this video.

Create a Button that Updates ControlBar Text Using an Action 

  1. In the UX Builder open the Controls page check the Mobile checkbox.

    images/ctcon.png
  2. Open the Panel menu on the left and select the [Panel Card] option to add a Panel Card to the component.

    images/ctcon2.png
  3. Highlight the Panel Card. Open the Containers menu and select the [Container] option.

    images/ctcon3.png
  4. Select 'PanelHeader' from the Container Type list and click 'Insert After'.

    images/ctcon4.png
  5. Highlight the Panel Header. Open the Other Controls menu and click [ControlBar] to add a ControlBar inside the Panel Header.

    images/ctcon5.png
  6. Highlight the ControlBar. In the properties list on the right click on the 'ControlBar properties' property to open the ControlBar Builder.

    images/ctcon6.png
  7. On the ControlBar Builder's 'Data' pane click the Add Data Item button.

    images/ctcon7.png
  8. Give the data item a Setting name of 'appName' and a value of 'My First Application'. Click OK

    images/ctcon8.png
  9. Open the 'Items' pane and click the Add ControlBar Item button.

    images/ctcon9.png
  10. Select 'html' from the Item Type radio buttons and click OK.

    images/ctcon10.png
  11. Click the button next to the HTML text item property. This is in the ControlBar Item Properties list under HTML Settings.

    images/ctcon11.png
  12. Double click on {appName} to add it to the editor and click OK. The HTML text property should now read {appName}.

    images/ctcon12.png
  13. Open the ControlBar Layout pane. Click the Add Layout button. Give the layout the name 'Layout1' and click OK.

    images/ctcon13.png
  14. Click the 'Add Line' button

    images/ctcon14.png
  15. Hit the 'Add' button under the 'Middle' section in the Edit Layout Line dialog. Select the HTml1 item that you defined on the Items pane. Click OK and OK again to close the ControlBar Builder.

    images/ctcon15.png
  16. On the Controls page highlight the [PanelHeader End:PANELHEADER_1] tag. Open the 'Other Controls' menu and select [Button] to add a button underneath the Panel Header.

    images/ctcon16.png
  17. Double click on the button control to open the Edit Click Event dialog.

    images/ctcon17.png
  18. Choose the 'Action Javascript' setting and click the 'Add New Action' button.

    images/ctcon18.png
  19. Type 'bar' into the Filter list and then in the 'Actions' list select the 'ControlBar Actions' option and click OK.

    images/ctcon19.png
  20. In the List Control Actions dialog click the button next to the 'Action name' property and select Update ControlBar Data from the list.

    images/ctcon20.png
  21. Set the 'ControlBar Id' property to be 'CONTROLBAR_1'.

    images/ctcon21.png
  22. Click the button next to the Data variables to update property. Select 'appName' from the list and click OK.

    images/ctcon22.png
  23. Click the button next to the 'Data variable values' property. Assign appName a new value and click OK. The value should look something like this:

    appName = 'My Second App'
    images/ctcon23.png
  24. Save the new action.

    images/ctcon24.png
  25. Highlight the button control. In the Button Properties section of the properties list change the 'Button text' property to read 'Change text'

    images/ctcon25.png
  26. Run the Component in Live Preview.

    images/ctcon26.png
  27. When you click the Change Text button you should see the ControlBar change as well.

    images/ctcon27.png

Add Dynamic Text to the ControlBar 

This guide continues to modify the component built in the section above.

  1. Highlight the button control. Open the 'Data Controls' menu and click on [TextBox] option to add a textbox control to the component. Give the textbox control the name 'txt1'.

    images/dt.png
  2. Double click on the button control to open the 'Edit Click Event' dialog.

    images/dt2.png
  3. Highlight the ControlBar Actions action that you defined in section 1 and click the 'Edit Action' button.

    images/dt3.png
  4. Click the button next to the Data variable values property. Change the value of the appName variable to be the following and click OK, OK, and Save:

    appName = {dialog.object}.getValue('txt1')
    images/dt4.png
    DON'T add a ';' at the end of this statement.
  5. Run the component in Live Preview. Type something into the textbox control.

    images/dt5.png
  6. Hit the 'Change text' button. The ControlBar should update to reflect the textbox control's text.

    images/dt6.png