Designing the Homepage
Last updated
Last updated
The mobile app's homepage is fully customisable. You can configure the app bar by changing its colour, and height, and adding and configuring header icon buttons. If you prefer not to have header icon buttons and want larger icons, you can modify your homepage accordingly. Additionally, you can determine and configure the content displayed on the homepage.
The default home tab in the mobile app can be customised by changing its icon, name, and type.
To configure the home tab
On the Lucy web app homepage, go to the Mobile App tab. Mobile app designer page displays. displays.
Click the bottom navigation bar to open its properties panel.
Go to the Home tab properties section.
Edit the Name and Icon.
: Choose the required page type to open when the respective tab is clicked, e.g., Section.
Click Save.
In your mobile app, tabs are the icons located at the bottom of the page that allow you to quickly switch between different pages.
A page type determines the content displayed when a tab is clicked.
Available Page Types
Sections
Widget
Custom Mobile Page
Simply put, a tab can be configured to display a list of sections, a widget or a custom mobile page built using Flutter based on the selected type.
For detailed instructions on configuring the page type, read this article.
Personalise your app bar's appearance by choosing a different color or uploading a background image, adding a company logo, including a title etc.
To configure the app bar settings:
On the Lucy web app homepage, go to the Mobile App tab. Mobile app designer page displays.
Under the General tab on the right, go to the Home Page tab.
Customise the settings as necessary.
Click Save to apply the changes in the mobile app.
Open the mobile app to view changes.
These are the settings related to the app bar of your mobile app.
In your mobile app homepage, you can add header icon buttons to appear under app bar title. Header Icon Buttons are located at the top of a mobile app's homepage, within the app's header.
To add a header icon button:
On the Lucy web app home page, go to the Mobile App tab. Mobile app designer page displays.
Under the General tab on the right, go to the Home Page tab.
Go to the Header Icon Buttons section and click Add Button.
In the Name box, provide a suitable name for the button.
Click the Icon field to pick a icon from the gallery.
Configure the button to open the required page when clicked. For example, set it to open a pre-built widget.
Open URL: You can configure a URL to be opened when the button is clicked.
Open Widget: Used to select a specific widget to be opened when the button is clicked.
Execute Action: Used to run a specific Lucy action when the button is clicked. 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 the button is clicked.
Open Mobile Screen: Used to select a predefined mobile screen to be opened when the the button is clicked.
After the configuration, Click Done.
Click Save to apply the changes in the mobile app.
Open the mobile app to view changes.
When designing your mobile app homepage, you have the flexibility to add icons directly to the content section of the page without placing them in the app bar. This will allow you to create a visually appealing and interactive homepage with icons that link to specific content or features.
Use an Icon Section Widget to add a collection of icons to your page. Customise each icon's background color, icon color, name, and the page that opens when clicked.
To add an Icon Section Widget to a page:
On the Lucy web app homepage, go to the Mobile App tab. Mobile app designer page displays.
Click the bottom navigation bar.
In the bottom tab bar navigation, click the required tab to access your home page.
Under Configure Tabs section, pick the Type as 'Section'.
Go to the Sections tab on the left. Pick the Icon Section Widget.
Drag and drop it onto the mobile screen.
An icon section widget will be added and displayed on the mobile screen.
Add a new icon
An icon will be added and displayed on the mobile screen.
Click the newly added icon to launch its properties panel.
Click the Icon field to pick a suitable icon from the Search Icons window.
Select a Background Colour.
Choose an Icon Colour.
In the Label box, type a unique name for the icon.
Once the action is configured, click Done.
Click Save. Open the home page in the mobile app to view your updates.
Customise the bottom navigation bar of your mobile app by selecting a background colour, button colour and active button colours to match your design preferences.
Steps to Customise the Navigation Bar
On the Lucy web app homepage, go to the Mobile App tab. Mobile app designer page displays.
Under the General tab on the right, click the Home Page tab.
Select a Navigation Bar Background Colour, Navigation Bar Button Colour, and Navigation Bar Active Button Colour as necessary.
Click Save. Open your mobile app to view the updates.
Click the Edit Action button to open the 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 button is clicked.
Click the Add icon.
Click this button to open the 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 the icon is clicked.
