Looking for examples? See this article

The Advanced Customisation field allows for advanced customisation of the Event App. By using JSON you can customise labels (e.g.  Agenda can become Schedule) and the presentation of the menu items. There is default settings for everything customisable in Advanced Customisation - so if you don't add any advanced customisation the app will still work as expected. 

You need to be familiar with structuring JSON data. We also suggest you use a JSON linter to validate your customisation before placing it in the field. Please note that this will only validate that the structure is correct and won't check if you have the correct values for customisation of the Event App. 

Customisation Overview

Customisation of the Event App Menu items is achieved via a JSON object, which can be found in the App Specific section of the Jomablue Portal, on the Settings page, in the Customisation text box. The JSON object can contain two keys: language, and nav. The language key must reference an Object, and the nav key must reference a List of Objects. A JSON object for this purpose looks like this:

{
  "language": {
     "page_name_1":"new_page_name_1",
     "page_name_2":"new_page_name_2",

     ...

     "page_name_n":"new_page_name_n"
  },
  "nav": [
    {
      "name":"page_name_1",
      "order":1,
      "enabled":true
    },
    {
      "name":"page_name_2",
      "order":2,
      "enabled":true
    },

    ...

    {
      "name":"page_name_n",
      "order":n,
      "enabled":true
    }
  ]
}

Menu Language

You can change the labels of the following words. 

  • Vendor / Vendors
  • Agenda

For example, you might wish to change Vendors to Exhibitors and Agenda to Program. To do so, inside the language object, add the page name as the key and the desired new wording as the value. Here is the JSON example of that customisation renaming "Vendor" to "Exhibitor", "Vendors" to "Exhibitors", and "Agenda" to "Program":

{
  "language": {
    "vendor": "exhibitor",
    "vendors": "exhibitors",
    "agenda": "program"
  }
}


You can choose to include or omit any value within the JSON, e.g. only include 'Vendors' if you're not waiting to change the 'Agenda' language.

If you don't see the change applied, it's likely the JSON entered is incorrect. Changes will apply immediately and pressing refresh on the Event App will display the change.

__________________________________________________________________

Menu Order

Using this customisation, you can change the order and disable menu items. If you disable a menu item that is usually displayed in the 'quick links' on the home page, they will also not appear.


Ordering menu items

Place a single menu item in the first position in the menu: 

{
"nav": [{
"name": "agenda",
"order": 1
}]
}

Important: Custom pages are considered as one menu element. So you can order all the custom pages as a "block" inside the menu, but you can't order them individually in amongst other menu items.


Here is ordering Agenda in position 2, speakers in position 3 and then all the custom pages in position 4:

{
"nav": [{
"name": "agenda",
"order": 2
},
{
"name": "speakers",
"order": 3
},
{
"name": "custom_pages",
"order": 4
}
]
}


Disabling/Hiding Menu Items

Items can be removed from the menu. For example you might not want to offer Networking or Vendor listings to Event App users (a more visual example can be viewed here).

Note: the Home and Switch Event menu items cannot be hidden.

Here is an example of disabling the Networking, Event Feed and Vendors functionality:

{
"nav": [{
"path": "/:eventid/vendors",
"enabled": false
},
{
"path": "/:eventid/feed",
"enabled": false
},
{
"path": "/:eventid/networking",
"enabled": false
}
]
}

Combining Language and Menu customisation

JSON structure allows you to include multiple customisations within the same customisation field. Here is an example of changing the language as well as disabling some pages.

{
"language": {
"vendor": "exhibitor",
"vendors": "exhibitors",
"agenda": "program"
},
"nav": [{
"name": "speakers",
"order": 2
},
{
"path": "/:eventid/vendors",
"enabled": false
}
]
}


Important: the name or path inside of nav must be the original name. It can't be the updated language name. For example, above you see we renamed Agenda to 'Schedule' but within the nav object for changing the order it's still named 'Agenda' 


Important: Some menu items only appear depending on the state of the user. For example, you won't see 'Login' if you have already logged in. Although you can see the order they are presented in, users might not be able to see them.

Menu Icons


The Event App uses Material Design Icons. You can see all the icon options in the library here. Here is an example of changing two of the icons.

Please note: If you have created Custom Pages for your event, icons are configured within Custom Page settings and can't be customised via Advanced Customisation.

{
"language": {
"vendor": "exhibitor",
"vendors": "exhibitors",
"agenda": "program"
},
"nav": [{
"name": "speakers",
"order": 2,
"icon": "assignment_ind"
},
{
"name": "networking",
"icon": "whatshot"
}
]
}

__________________________________________________________________

All page names and available attributes


Page Names:

"name": "login",
"name": "feed",
"name": "networking",
"name": "speakers",
"name": "agenda",
"name": "vendors",
"name": "switch event",
"name": "custom_pages",
"name": "logout",



Attributes: 

"order": (1,2,3,4 etc)
"enabled": (true, false)
"icon": ("icon_name" from material design library)

Did this answer your question?