Set up mobile pages in Freedom UI Mobile Designer

Level: beginner

note

This functionality is available for Creatio 8.3.2 and later.

Mobile list and form pages are pages in the Creatio Mobile app that let users work with data. You can customize these pages easily using Freedom UI Mobile Designer. The Freedom UI Mobile Designer enables you to customize mobile pages using no-code tools. If you need additional flexibility, you can enhance the page using low-code tools in the source code of the Freedom UI mobile page. Learn more: Customize Freedom UI page (developer documentation).

We recommend using Freedom UI Mobile Designer only for newly created apps. Avoid adding mobile pages to apps that were created earlier.

Apps can contain pages that have different data sources. For example, a data source for a form page is a specific object. Creatio adds a data source automatically when you create an app. When you create a new app in the Application Hub, Creatio generates a mobile list page and a mobile form page for this app section. Since version 8.3.2, Creatio also generates a mobile list page and a mobile form page, regardless of whether you create a new app or add a new section to an existing app. Learn more: Create an app manually.

Before you customize the Freedom UI mobile page, set up the mobile app emulator using Android Studio. Learn more: Set up the mobile app emulator (developer documentation).

Set up the mobile form page

For this example, set up a request form page for mobile users.

Example

Set up the "Requests mobile form page" that displays request information in the Requests app. Add fields to the page to display the type, description, creation date, and author of the request.

Before you customize a mobile form page, set up a Request form page and configure its form page.

Create the Requests app. Instructions: Create an app manually.
Configure the Requests form page. Instructions: Set up the app form pages.

Out of the box, the Requests form page includes the following elements:
- Name field on the canvas
- Created on attribute available in the element library under the Data model attributes group
- Created by attribute available in the element library under the Data model attributes group
For this example, add the following fields:
- Type field of "Dropdown" type connected to the custom Request types lookup
- Description field of "Rich text" type
Save the page.
Open the Requests mobile form page.

Out of the box, the mobile form page includes the topmost Area component which, in turn, includes the following tabs:
- Details that includes the Name field. This tab displays the record information.
- Attachments that includes the Attachments component that lets users upload and view files attached to the record. Mobile page templates include a pre-configured Attachments tab where the Attachments component displays across the entire tab area. If you add the Attachments component manually from the element library, it is added as an Expansion panel layout element that includes the Attachments component along with buttons and flex containers (similar to Freedom UI pages). The manually added component has different display properties and behavior compared to the pre-configured tab template.
We recommend placing all page components inside the topmost Area component or its children, such as Flex row layout element, to ensure Creatio Mobile displays the page correctly.
Drag the Type, Description, Created on, and Created by attributes from the Data model attributes group in the element library to the Details tab. These attributes and fields are configured for the Requests form page. Do not recreate attributes and fields that already exist on the page.
Save the page.

As a result, the Requests mobile form page will be created. After synchronization, mobile users can view and manage requests in Creatio Mobile or in an emulator.

Set up the mobile form page​

See also​

Set up the mobile form page

See also