website logo
➡️ purplepublish.com
Overview
Support
Setup
Editorial
Experience
Growth
Developers
Navigate through spaces
⌘K
Purple Experience
Views
Widget Component
Generic Widget
Structure of Dynamic resources
experience.config
Configure recurring texts in the messages.json
Purple Experience Builder
Using the Purple Experience Builder
Update your Purple Experience Version
Edit 'dynamic resources' from Purple Manager
Edit 'dynamic resources' in Experience Builder
Deploy Resources to Multiple Brands
Experience Builder Pipelines
Basic Experience Set-up
App onboarding configuration
Configure SEO attributes
Configure Error Pages
Configure the Side Menu in the Purple Experience
Configure a login page in Experience Builder
App menu configuration in Dynamic Resources
Configure the feedback email in the app with Experience Builder
Configure a coupon code page in Experience Builder
Configure a custom domain
Branding of your Experience
Experience Styling
Change the brand logo in the HTML Experience with Experience Builder
Configure brand colours in the HTML Experience with Experience Builder
Deposit a font in the HTML Experience with Experience Builder
Configure legal information pages in Experience Builder
Builder Pipelines Architecture Info
Simple static ads in Experience
Traffective ads in Experience
Action URLs and Deep linking
List of Action URLs
Deep linking
Migration
Docs powered by
Archbee
Basic Experience Set-up
App menu configuration in Dyna...

Add an app menu entry in Experience Builder

13min

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.

Document image


2. Click on 'Pull from preview'

Document image


3. Click on 'menuicons'

Document image


4. Click on 'Actions'

Document image


5. Click on 'Upload files'

Document image


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

Document image


7. Click on 'default'

Document image


8. Click on 'app_menu.xml'

Document image


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>
Document image


10. Copy and paste it below the last paragraph

Document image


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/

Document image


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

Document image


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'

Document image


14. Click on the burger menu

Document image


15. Click on 'Update Dynamic Resources'

Document image


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

Document image


17. Click on 'Merge all files to preview'

Document image


You have successfully added a new menu entry to your app menu, merged the changes and updated the dynamic resources. You can test the result in the preview and push them live if they look fine, to make them visible in your live app.



Updated 30 Aug 2023
Did this page help you?
PREVIOUS
App menu configuration in Dynamic Resources
NEXT
Add a translation to the app menu entries in Experience Builder
Docs powered by
Archbee
TABLE OF CONTENTS
Summary
Preconditions
How-to
Docs powered by
Archbee
ImprintPrivacy Policy
© Sprylab Technologies GmbH 2023