Skip to main content


         This documentation site is for previous versions. Visit our new documentation site for current releases.      
 

Adding a floating action button

Updated on April 27, 2022

Promote the most important action on a page by adding a floating action button to your mobile app. For example, you can add a floating action button that starts a case flow for creating a new expense report in your Expenses mobile app.

You configure a floating action button by adding and modifying the Button control on the main content section of your page. With the floating action button at the bottom of the page, users can trigger the primary action on a page with one convenient tap. A page can have only one floating action button, so only the last one that you add appears in the mobile app at run time.

Note: Avoid using the floating action button for non-constructive actions, such as deleting or archiving an item. Do not use the floating action button in modals that are not full-screen.
  1. In the header of App Studio, click Preview, and then enter the design mode by clicking Design.
  2. Expand the Pages pane, and then select the page that you want to open.
  3. On the page, hover over the main content section that you want to modify, and then click the Edit icon.
  4. In the live design view editor, add the Button control to your section:
    1. In the design pane on the right side of the screen, click the Add icon.
    2. In the Add pane, expand the Controls section, and then, in the Action category, click the Add to view icon next to the Button control.
    3. Close the Add pane.
  5. Set an icon for the Button control:
    1. In the design pane on the right side of the screen, click the Edit icon next to the Button control.
    2. In the Button pane, on the General tab, in the Image source list, select Icon class.
    3. Next to the Class field, click the Open the icon class picker icon.
    4. In the Icon class picker window, select the icon that you want to use for the Button.
      For example: For a floating action button that launches a case for creating a new expense report, select the pi pi-plus icon that displays a plus sign on the floating action button.
    5. Click Apply.
  6. Configure the Button control as a floating action button:
    1. In the Button pane, on the Presentation tab, select the Set as Floating Action Button (FAB) checkbox.
    2. Optional: To specify the background and font color of the floating action button, in the Control format list, select the format that you want to use.
    3. Click Apply.
      Result: The button disappears from the page preview, but appears at the bottom of the page on the mobile app at run time.
  7. Add an action that users trigger when they tap the floating action button on the mobile app page:
    Note: Set only one action for a floating action button to represent the primary constructive action for the page.
    1. In the Button pane, click Add action sets.
    2. In the action set configuration window that opens, click Create an action set.
    3. Click Add an eventClick.
      Note: The floating action button supports only the Click event.
    4. Click Add an actionAll actions, and then select an action that you want to use in your floating action button.
      For example: In your mobile app, you have a page that lists all expense reports that users submit. You want the floating action button on this page to trigger an important constructive action, for example, the Create Work action that launches a new expense report flow when users tap the floating action button. You can use the Expenses-Work-Report class that references your expense reporting case. If your case type includes the Create stage, you can omit entering the flow name that launches a new flow. You can also choose the out-of-the-box pyCreateCaseSkeleton skeleton that acts as a transition stage when a new case is created. During that transition, the mobile app displays the skeleton, while the server works on rendering and displaying the user interface of the case in the client.
      Action set in a floating action button for creating a new expense report
      An action set that launches a new expense report when users tap the floating action button.
    5. Click OK.
    6. Click Apply, and then close the Button pane.
  8. In the upper-right corner, click Exit design mode.
What to do next: Verify the changes to your mobile app with the Pega Mobile Preview app. For more information, see Previewing mobile apps.
  • Authoring mobile list pages

    Improve the responsiveness and load time of the user interface in your mobile app by displaying the content of your app as a mobile list page. This way you enhance your app with a native screen that has fluent transitions and a search bar in the header by default.

  • Authoring mobile case pages for Cosmos React apps

    Customize case pages in the low-code authoring environment to highlight the most relevant information in one, user-friendly mobile view. This way, you ensure that users can efficiently view and edit cases on their mobile devices.

  • Adding a search gadget for Theme Cosmos and Theme UI-Kit mobile apps

    Improve the usability of your mobile app by configuring and enabling the search functionality. You can guarantee more meaningful search results and increase search speed by limiting the scope of searches to specific case types.

  • Adding items to the menu bar

    Create an effective navigation experience in your mobile app by adding pages and actions to the menu bar. For example, you can add a custom profile page to the menu bar of your Expenses app so that users can conveniently access the screen with their basic contact information.

  • Previous topic Adding a search gadget for Theme Cosmos and Theme UI-Kit mobile apps
  • Next topic Adding items to the menu bar

Have a question? Get answers now.

Visit the Support Center to ask questions, engage in discussions, share ideas, and help others.

Did you find this content helpful?

Want to help us improve this content?

We'd prefer it if you saw us at our best.

Pega.com is not optimized for Internet Explorer. For the optimal experience, please use:

Close Deprecation Notice
Contact us