App_menu.xml

starting with pxp 5 0 and apps template 10 10 this menu is not enabled by default anymore general setup for apps , the native app menu has to be enabled in the purple manager in app design > general > advanced settings > app menu this is a build time configuration, so after changing this value, the app has to be rebuilt for this change to take effect for the web , the enablelegacysidemenu flag has to be set in experience config json inside the assets folder in the dynamic resources experience config json { "purple" { "legacy" { "enablelegacysidemenu" true } } } each purple app comes with an app menu (accessible by clicking on the menu icon in the top left corner or with a screen swipe from left to right in the app) the app menu is a global app ui component that is used for navigation it consists of a header area, dynamic entries, and a footer area the configuration of this menu happens in the app menu xml file that is located in the dynamic resources default/app menu xml app menu xml in experience builder preconfigured app menu purple provides a "neutral" preconfigured app menu in the standard dynamic resources you can use this or overwrite or extend it to customize it to your needs if no navigationnode with the action url purple //app/settings/open is declared in the app menu xml but there are settings available in the app, then a default settings entry is automatically added at the end of the app menu menu icons the menu icons are located in default/menuicons structure of the app menu xml the xml file is usually structured as follows structure of app menu xml in experiece builder the file consists of the following elements frame this is the container in which the components of the app menu are stored, and it looks like this \<app menu> \</app menu> header image you have the option to place a logo above the entries of the app menu, which will be stored in the app menu xml as follows \<navigationheader> \<image url="menulogo png" paddingtop="10 0" height="100 0" /> \</navigationheader> you can specify the exact path to the logo file here, as well as the desired height and padding menu item a single entry in the menu (using the "bookmarks" entry as an example) looks like this \<navigationnode targeturl="purple //app/bookmarks/open"> \<title>bookmarks\</title> \<iconurl>menuicons/bookmarks png\</iconurl> \</navigationnode> the " navigationnode " contains a url the url can be a purple deep link that triggers a certain event (like 'open bookmarks view'), an external url to a web page or a link to an html page in the dynamic content the " title " tag contains the text for the displayed entry in the example above, this is " bookmarks " this text will be displayed in your app menu to the users the " iconurl " refers to the icon for this entry in the dynamic content this entry can also remain empty, in which case no icon is displayed icons must be referenced by their file name menu icons purple apps offer the option of using custom icons for the menu used in the app if you want to use custom icons, you will need them in 3 different versions so they can be displayed properly on all devices usually the format png is used because the icons contain transparent areas the required formats for the icons are requirements 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 example you want to create your own icon for the menu item imprint to ensure that the menu entry looks good on all device types, you need to have the following 3 image files in place imprint\@3x png, with the dimensions 120x120 pixels imprint\@2x png, with the dimensions 80x80 pixels imprint png, with the dimensions 40x40 pixels purple will choose one of the three image versions, depending on the device sample photoshop icons you can download sample photoshop documents here urls each menu entry leads to another url, either inside your app or to an external source examples are, among others link to an html page in the app (in the dynamic content), such as an imprint or the faq link to an external website, which will be opened in a browser overlay link to a specific issue in the newsstand a purple deep link that triggers a certain event (like 'open bookmarks view') an overview of possible deep links can be found in the section docid 4cqfqcai7gu13bn rilws multilanguage for app menu for purple apps, it is possible to display the app's main menu in the users' device language to enable this function, you have to add the title in the app menu xml in each language that you desire to have a translation for and add a country code example let's take a look at one of the menu entries of the app menu in the app menu xml for the bookmark add entry, we want to integrate an english and french version (the standard is german) \<navigationnode targeturl="purple //app/bookmarks/open"> \<title>lesezeichen\</title> \<iconurl>menuicons/bookmarks png\</iconurl> \</navigationnode> the only thing that is important for a multilingual menu here, is the tag "title" in this segment, another title entry can be added using the country code and the value "locale" if you would like to offer, e g , an english and french version now, the following entries are required the two letter language codes, in our case "en" and "fr" the translated words for the titles (bookmarks and signets ) your result should look like this \<navigationnode targeturl="purple //app/bookmarks/open"> \<title>lesezeichen\</title> \<title locale="en">bookmarks\</title> \<title locale="fr">signets\</title> \<iconurl>menuicons/bookmarks png\</iconurl> \</navigationnode> by applying the same principle, you can set up all menu items in multiple languages