- Create a mobile channel for your mobile app. For more information, see Setting up mobile apps.
- Ensure that you have a case type that you can use to populate the page content. For example, create a case type for expense reporting. For more information, see Case types.
- If you want to add a custom view to the case page, create a view for your case type. For more information, see Building forms for case types.
- Open your mobile channel:
- In the navigation pane of App Studio, click Channels.
- In the Current channel interfaces section, click the tile that represents a mobile channel for your app.
- On the mobile channel page, on the Content tab, click the Case pages category.
- Optional: To change the default case page header and subheader, in the Edit page section, select the corresponding values.
- In the Tabs section, configure the case page:
Choices Actions Configure an existing tab
- In the row that corresponds to the tab, click the Edit configuration icon.
- In the Edit tab dialog box, configure
the tab by changing the tab name or by adding or removing
For example: Add an expense summary to the Details tab by selecting .
- Click Submit.
Add a new tab
- Click Add.
- In the Add tab dialog box, enter a name for the tab.
- In the Content section, click
Add, and then select the view or
widget that you want to add to the tab.
For example: Add the Pulse widget to an Activity tab by selecting .
- Click Submit.
Remove a tab In the row that corresponds to the tab, click the Remove icon. Change the order of tabs Drag the row that corresponds to the tab up or down the tab list. Note: By placing the row as the first one on the tab list, you set that row as the default tab. You cannot remove default tabs.
- Optional: To display the Edit floating action button in the case page view, select the
Show the Edit button check box.If you select the check box, at run time, users can edit case details from the case page view by selecting the Edit floating action button.
- In the upper-right corner of the page, confirm your settings by clicking Save.
- 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.
- Adding a search gadget for Theme Cosmos and 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 a floating action button
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.
- 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.