Designing the Settings Page
This tutorial explains how to design the Settings page in your mobile app. By default, you will have a Settings page and you can customise it as necessary.
Your mobile app comes with a default homepage and a settings page that you can customise to suit your preferences.
Let's customise the Settings page of your mobile app using the Lucy web app.
On the Lucy web app homepage, go to the Mobile App tab. Mobile app designer page displays.
On the mobile app designer page, click the bottom navigation bar to open the properties panel on the right.
In the Configure Tabs section of the properties panel, locate the Settings tab.
Enter an appropriate Name for the new tab (e.g., Profile).
Icon: To change the tab icon, click the icon and select an appropriate one from the Search Icons window.
Type: Choose the required page type to open when the respective tab is clicked, e.g., Custom Mobile Page.
On the mobile screen, select the Settings Page from the list. A new section labeled 'Click here to configure sections in settings page' will appear on the mobile screen. Click the section.
Setting Group: A setting group helps to group related sections. Add a setting group.
In the properties panel, Click the Add Setting Group button.
Enter a suitable name for the setting group, e.g., Account.
Add multiple setting groups as necessary.
Section: A section is a smaller grouping of settings within a setting group. It focuses on a specific aspect of the setting group.
Example: In the Account setting group, you can have sections like:
Personal Details
Currency
Language
Notifications
Add a new section.
In the properties panel, Click the Add Tab button.
Enter a suitable name for the section, e.g., Personal Details.
In the Icon field, pick a icon for the section.
Pick the required Setting Group, e.g., Account.
Set the page to open when the section is clicked.
Click the Edit Action button to open the Action Editor window. This window has five tabs: Open URL, Open Widget, Execute Action, Open Add-on, and Open Mobile Screen. Use these tabs to set what happens when a specific section is clicked.
Open URL: You can configure a URL to be opened when specific section is clicked.
Open Widget: Used to select a specific widget to be opened when specific section is clicked.
Execute Action: Used to run a specific Lucy action. You can select a model, choose an appropriate action, and provide parameters. Additionally, configure the post-action behavior.
Open Add-on: Used to configure a specific add-on to be opened when specific section is clicked.
Open Mobile Screen: Used to select a predefined mobile screen to be opened when the specific section is clicked.
After configuring the action, click Done.
Add more setting groups and sections.
Click Save to apply the changes in the mobile app.
Open the mobile app to view the changes.
Linking a Page to a Section
After designing the structure of the Settings page, link each section to its relevant page. You can set a section to open a webpage, open an existing add-on, open a widget, execute a Lucy action, or open a certain mobile screen.
For example, let's set the Personal Details section of the Settings page to launch a widget for displaying and editing users' personal details.
Linking the Personal Details Section to Launch a Prebuilt Widget
Creating the Widget
We'll use the 'Object View' widget template to create the widget.
Follow these steps to create the widget.
On the app homepage, go to the My Work tab.
Search and click the required folder and open it.
Go to the User Interfaces tab.
Click the + button.
Choose the Start from Scratch option.
Pick the desired type of Widget Template, e.g., Object View.
Click Edit this Template to open it on its widget designer page.
Give a name for the widget.
Go to the General tab on the right.
In the Name box, type in a suitable name.
Customise the properties of the widget.
Customise the header section.
Click the header section of the widget to open its properties panel on the right.
In the properties panel, go to the Title section.
Text field: Enter a suitable title for the widget. Pick a colour and adjust its size as necessary.
Set to add a profile picture.
Under the Fields tab on the left, drag and drop the Profile Picture field on to the blue highlighted area.
Provide a name for the field and Click Done.
Customise the profile picture field as necessary from the properties panel.
Add a field to add the name.
Under the Fields tab on the left, drag and drop the Name Input field on to the blue highlighted area.
Name the field and Click Done.
Use the Properties panel to customise the field as necessary.
Add a field to add the Email address.
Under the Fields tab on the left, drag and drop the Email Input field on to the blue highlighted area.
Name the field and Click Done.
Use the Properties panel to customise the field as necessary.
Add a field to set Gender.
Under the Fields tab on the left, drag and drop the Toggle Input field on to the blue highlighted area.
Name the field and Click Done.
Click on the respective field to open its properties panel.
Under the Options section, click the Add New Option button.
A text field will be displayed. Type the gender in the provided text field e.g., Male.
Click on the icon image to pick a appropriate icon.
Repeat the steps 5-4 to 5-6 to add more options.
Set a field to pick the nationality.
Under the Fields tab on the left, drag and drop the Toggle Input field on to the blue highlighted area.
Name the field and Click Done.
Click the field to open its properties panel on the right.
Bind a data source to the widget to fetch data.
Under the Options section, select the Get Options from a Data source option. Bind a Source button will be displayed.
Click Bind a Source. You can pick a lucy action or a database as the data source.
Bind a database.
Go to the Databases tab.
Search and select the required database.
Click Select this Source button. A preview of your data will be displayed in a table.
Format the data if necessary. If you are satisfied with the data preview, click Looks Good. The selected database will be displayed.
Label Field: Select name as the label.
Under the Dropdown section, in the Value field, type in the nationality to be displayed to user. Remove the text in the Placeholder and Default Text fields.
Set a field to enter age.
Under the Fields tab on the left, drag and drop the Number Input field on to the blue highlighted area.
Name the field and Click Done.
In the properties panel, go to the Number Input section.
Value: Type in the age to be displayed to user.
Type in the Min Value and the Max Value for the age input.
Set a field to enter mobile number.
Under the Fields tab on the left, drag and drop the Phone No Input field on to the blue highlighted area.
Name the field and Click Done.
In the properties panel, go to the Text Input section.
Default Country: Type in the country name to set as the default country. Once set, it will display the country code along with the flag.
Click the Preview button to preview the design.
Once you are happy with the design, click Save Widget.
Adding Horizontal Containers
Use horizontal containers to store fields horizontally when designing your widget.
Steps to Add a Horizontal Container
On the app homepage, go to the My Work tab.
Search and click the required folder and open it.
Go to the User Interfaces tab.
Click the + button.
Choose the Start from Scratch option.
Pick the desired type of Widget Template, e.g., Object View.
Click Edit this Template to open it on its widget designer page.
Give a name for the widget.
Go to the General tab on the right.
In the Name box, type in a suitable name.
Add a horizontal container.
Under the Fields tab on the left, drag and drop the Horizontal Container field on to the blue highlighted area.
Pick a field and drag and drop it to the right or left column of the horizontal container.
Continue adding more fields to each column.
Click the Preview button to preview the design.
Once you are happy with the design, click Save Widget.
Linking the Widget
After building the widget, link it to the required section (e.g., Personal Details) on the settings page.
Steps to Link the Widget
On the Lucy web app homepage, go to the Mobile App tab. Mobile app designer page displays.
On the mobile app designer page, click the Settings tab to open the settings page.
Click the required section, e.g, Personal Details.
In the properties panel, go to the Personal Details section.
Click Edit Action.
Go to the Open Widget tab.
Pick the designed widget and click Done.
Click Save to apply the changes.
Open the mobile app's settings page and click the required section to open the selected widget.
Linking the Currency Section to Launch a Mobile Screen
We can link a section to display unique prebuilt mobile screens that exclusively function within the mobile app.
Steps to Link a Mobile Screen
On the Lucy web app homepage, go to the Mobile App tab. Mobile app designer page displays.
On the mobile app designer page, click the Settings tab to open the settings page.
Click the required section, e.g., Currency.
In the properties panel, go to the Currency section.
Click Edit Action.
Go to the Open Mobile Screen tab.
Pick the designed mobile screen e.g., Currency and click Done.
Click Save to apply the changes in your mobile app.
Open the mobile app's settings page and click the required section to open the selected mobile screen.
Similarly, you can link the necessary mobile screens for the Language and Notifications sections.
For more information on connecting a section to a page, find the article here:
Last updated
