ION-specific configuration properties | NAGRAVISION Documentation Portal

Overview

There are a number of properties that can be set at the layout level (either in the top-level page (template) or in individual pages) to control various aspects of ION’s functionality and appearance.

There are also ION-specific properties that can be set at the rail level.

Top-level page properties

The following properties should be set in the layout of the top-level page (template).

All colours are hex values and must start with a hash. For example, #505050.

Key	Mandatory	Type/value	Description
`menuPosition`	Yes	`vertical` or `horizontal`	Specifies the menu orientation: `vertical` `horizontal`
`activeOptionBgColor`	No	Hex colour	The background color of the active option
`activeOptionBorderColor`	No	Hex colour	The border color of the active option
`focusedOptionIconBgColor`	No	Hex colour	The background color of the focused icon option
`activeOptionTextColor`	No	Hex colour	The text color of the active option
`activeOptionIconColor`	No	Hex colour	The icon color of the active option
`optionTextColor`	No	Hex colour	The option text color
`showMenuItemGradient`	No	Boolean	If set to `true`, enables the gradient effect in the menu.
`endSectionBgColor`	No	Hex colour	The background colour for the end (icon) menu section (horizontal menu only)
`middleSectionBgColor`	No	Hex colour	The background colour for the middle menu section (horizontal menu only)
`roundedBorders`	No	Boolean	If the set to `true`, all images shown in the application, such as those in the common screen menu, media cards, and bottom header menu, will be displayed using rounded, poster-style borders.
`activeOptionBorderRadius`	No	Integer (20 to 200)	The border radius for the main menu (integer value from 20 to 200) This only has an effect if `showMenuItemGradient` is `false`.
`enableBorderGlowEffect`	No	Boolean	If set to `true`, enables glow effect for rails and common screen layout.

Individual page properties

The following properties should be set in the layout of the individual pages (e.g., home screen, guide screen, etc.):

Key	Mandatory	Type/value	Description
`screenId`	Yes	Integer	Core ION screens require a `screenId` between 1 and 31. Custom screens must have an ID greater than 1000.
`alignment`	No	`middle` or `end`	This determines where page is added in the menu: `middle` (default) – the page is added to the middle section. This is typically used for content pages such as the home page and the EPG. `end` – the page is added to the end section (right for left-to-right languages and left for right-to-left languages). This is typically used for things like the settings page and the user profile/account page. If `alignment` is `end`, ION displays only an icon, so you should specify an `icon` (see below). If `alignment` is `middle`, ION displays only the specified title (localised if you provide locale-specific titles). Any icon that you specify will be ignored.
`routeName`	For ION Desktop only	String	For ION Desktop only, you must specify a `routeName` to map the page to the screen in ION. ION uses the following route names. However, for other pages that you add, you can specify any route name: `discover` `epg` `explore` `live` `mylist` `profile` `saved` `settings` `signon`
`local_template`	No	Boolean	If set to `true`, it means that ION is responsible for populating the page. Any rails added to the page will be ignored.
`icon`	No	String	The icon to be displayed. Note that ION only uses icons for pages for which `alignment` is set to `end`. Available icons are as follows: `favourite_icon` `icon_main_menu_live_tv` `icon_menu_exit` `icon_menu_explore` `icon_menu_home_focused` `icon_menu_live_tv` `icon_menu_saved` `icon_menu_settings` `icon_remote` `signout_web`
`fullScreen`	No	Boolean	If set to `true`, the page is displayed in full-screen mode (i.e., so that the content takes up the entire width of the screen). This should be used for the EPG and Explore pages.
`layout`	No	`tab`	This can only take a value of `tab`. This causes ION to display the page in tabbed format.
`enableCinematicForAllItems`	No	Boolean	If set to `true`, enables cinematic mode for all items on the page. In cinematic view, the image for the selected item is displayed as the page background.
`enableCinematicForFirstRow`	No	Boolean	If set to true, enables cinematic mode for only the items in the first rail.

Rail-level properties

Key	Mandatory	Type/value	Description
`height`	No	Integer	The height of the rail in pixels at a reference screen size of 1920 x 1080. At other screen sizes, the rail height is scaled proportionately. If not specified, the rail’s height is 270 px.

Key

Mandatory

Type/value

Description

height

Integer

The height of the rail in pixels at a reference screen size of 1920 x 1080. At other screen sizes, the rail height is scaled proportionately.

If not specified, the rail’s height is 270 px.