Handling Button Click Events
Last updated
Last updated
When customising your mobile app via the Lucy web app, you can control the actions triggered by button clicks. Here are the five types of actions available:
You will also encounter button click events when creating widgets, such as the Search widget.
Use the Action Editor window to set actions for clickable elements like buttons and icons. It supports five types of actions: open a web page, launch a pre-built widget, execute a Lucy Action, open an add-on, and open a mobile screen.
You can configure a button to open a specific web page when clicked.
For example, when you click on the Help section in your mobile app's Settings page, it opens the Help page.
To open a web page
On the Lucy web app homepage, go to the Mobile App tab. Mobile app designer page displays.
On the mobile screen, click the Settings page icon in the bottom tab bar navigation. The Settings page will open on the mobile screen.
On the Settings page, click the required section (e.g., Help) to open the properties panel.
In the Properties panel, go to respective section and click Edit Action. The Action Editor window opens.
Navigate to the Open URL tab.
Enter the URL of the required web page.
Choose how you want to open the web page: New Tab or Current Tab.
Click Done.
Click Save.
Open the Settings page in your mobile app and click the specific section to launch the web page.
For example, when you click on the Personal Details section in your mobile app's Settings page, it opens the corresponding user-created widget, a form to edit personal details.
Click here to learn how to create a simple widget.
To launch a pre-built widget
On the Lucy web app homepage, go to the Mobile App tab. Mobile app designer page displays.
On the mobile screen, click the Settings page icon in the bottom tab bar navigation. The Settings page will open on the mobile screen.
On the Settings page, click the required section to open the properties panel.
In the Properties panel, go to respective section and click Edit Action. The Action Editor window opens.
Navigate to the Open Widget tab.
Select the required widget.
Enter Parameter names and values if necessary.
Click Done.
Click Save.
Open the Settings page in your mobile app and click the specific section to launch the respective widget.
Set up a Lucy Action to trigger when a specific button is clicked, such as sending a notification after creating a work request.
You can select an add-on to be opened when certain button is clicked in your mobile app.
For example, you can add an icon to your app home page to open the Weather add-on when clicked.
To open an add-on
On the Lucy web app homepage, go to the Mobile App tab. Mobile app designer page displays.
Under Sections, drag and drop the Icon Section Widget to the mobile screen.
An icon section widget will be added and displayed on the mobile screen.
An icon will be added and displayed on the mobile screen. Click the newly added icon to launch its properties panel.
Pick an icon image, Background Colour, Icon Colour and a Label.
Click the Edit Action button to open the Action Editor window.
Go to Open Add-on tab.
Once the action is configured, click Done.
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.
Choose a Background Colour.
Choose a Icon Colour.
In the Label box, type a unique name for the icon.
Click the Edit Action button to launch the Action Editor window.
Navigate to the Open Add-on tab.
Select the required add-on, e.g, Weather.
Click Done.
Click Save to save and apply the changes in the mobile app.
Open the home page in your mobile app and click the icon to launch the respective add-on.
You can set a button to open a predefined mobile screen. These screens are specific to the mobile app.
For example, choose a predefined mobile screen, like the Currency page, to display when you click on the Currency section in your mobile app's Settings page.
To open a mobile screen
On the Lucy web app homepage, go to the Mobile App tab. Mobile app designer page displays.
On the mobile screen, click the Settings page icon in the bottom tab bar navigation. The Settings page will open on the mobile screen.
On the Settings page, click the required section to open the properties panel.
In the Properties panel, go to respective section and click Edit Action. The Action Editor window opens.
Navigate to the Open Mobile Screen tab.
Select the required mobile screen (e.g., Currency).
Click Done.
Click Save to save and apply the changes in the mobile app.
Open the Settings page in your mobile app and click the specific section to launch the respective mobile screen.
Click the Add icon.
