Adding Basic Controls

Adding Basic Controls to an app

IBM Digital App Builder has the following basic UI controls: Button, Heading, Image and Label.

Adding Basic Controls in Design mode

To add one of these controls to your app, simply drag-and-drop to the canvas and configure its properties and actions.

• Heading - Use this control to add a heading to a page. The Heading control has the following properties:
  • Text Value
  • Style (Alignment, Text Color). No actions are available for this control.
• Button - Use this control to add a button and associate an action to it. The Button control has the folllowing properties:
  • Text Value
  • Style (Alignment, Text Color, Background color, Font weight) You can assign an action to this button from the Actions tab. Select On click Navigate to button to navigate to another page by selecting the page name or click + to add a new page.
• Image - Use this control to add an image. Specify the image source as Local image or Provide URL. You can also upload an image and add it to the app source. You can assign an action to this image from the Actions tab. Select On click Navigate to button to navigate to another page by selecting the page name or click + to add a new page.
• Label - Use this control to add a label. You can change the Text Value, Style (Alignment, Text Color, Font weight). No actions available for this control.

To add the basic controls to your project in design mode:

1. Navigate to the page you want to design.
2. Click Controls to display the controls panel.
3. Drag-and-drop the required controls and design your pages.