Add an app menu entry in Experience Builder

Experience Builder

Summary

In this article, you learn how to add a new app menu entry to the menu of your app with the Experience Builder. You will upload a menu icon and add a new menu entry which is leading e.g. to your website.

Preconditions

• Target URL of your app menu entry, e.g. the URL of your website
• Defined title for the new app menu
• PNG image with 120x120 pixel dimensions and with the file name: <iconname>@3x.png
• PNG image with 80x80 pixel dimensions and with the file name: <iconname>@2x.png
• PNG image with 40x40 pixel dimensions and with the file name: <iconname>.png



How-to

1. Go to Experience Builder, choose your app from the list and click on it.



2. Click on 'Pull from preview'



3. Click on 'menuicons'



4. Click on 'Actions'



5. Click on 'Upload files'



6. Choose the three menu icon PNGs from your desktop, e.g. 'website.png', 'website@2x.png' and 'website@3xpng' and upload them via the file upload menu



7. Click on 'default'



8. Click on 'app_menu.xml'



9. Mark the last paragraph, e.g.

<navigationNode targetURL="purple://app/resource/dynamic/info/index.html"> <title>Info/Contact</title> <iconURL>menuicons/legal.png</iconURL> </navigationNode>



10. Copy and paste it below the last paragraph



11. Go to 'targetURL' and overwrite the orange URL in quotation marks with your desired target URL for the app menu entry, e.g. a URL to an external website such as https://sprylab.com/en/



12. Go to 'title', mark the white text and overwrite it with the desired title of your new app menu entry, e.g. 'Website'



13. Go to 'iconURL', mark the white text and overwrite it with the name of your recently uploaded (smallest) menu icon, e.g. 'website.png'



14. Click on the burger menu



15. Click on 'Update Dynamic Resources'



16. Name your changes, e.g. 'configured-menu'



17. Click on 'Merge all files to preview'