Skip to main content
ExLibris
  • Subscribe by RSS
  • Ex Libris Knowledge Center

    Menu Options Section - Configuring Tiles

    New and existing tiles are configured individually in this section. Menu Options configuration is broken down into two sections: Menu Option Config for basic configuration options and Tile Config for more advanced configuration options. This section also covers re-ordering and deleting tiles.

    Menu Option Config

    The Menu Option Config options offer some basic configuration options for the menu tile and is the same for every Menu Option:
    Menu Options configuration
    Menu Options configuration
    • Description - is the name given to the menu tile when it was created and is used as the label for the menu tile in the app. It cannot be amended once the tile has been created.
    • Recents Icon - appears on both iOS and Android apps. The icon is the image that displays in the Recents menu for menu tiles that have been used most recently by the end user.
      The Recents Icon is selected from Asset Manager by clicking the Browse button.
    • Roles - enables the administrator to assign the menu tile to the appropriate App Roles for the App Profile selected. It should currently be set to a beta tester roles, as discussed above. The App Roles must be updated and the menu tile saved and published before it is visible to the end user on the app.
    • Disabled - if the tickbox is checked, the menu tile is not visible to the end user, regardless of the App Roles selected.
      This can be used to hide a tile while it is still under development (although it is preferable to use Beta Tester App Roles)or if the component has temporarily stopped working and it is withdrawn from production use while the cause is being investigated.
    • Mandatory (Personalization) - if the tickbox is checked, then the menu tile is considered as mandatory and will always be shown to the end user, regardless of how they have arranged their homescreen.

      This option is only visible if Personalization has been enabled for the profile. To find out more about Personalization then view the Personalization Key Concepts page on this topic.

    Tile Config

    The Tile Config option offers advanced configuration options for the menu tile and is the same for every menu tile configuration. Properties will have been inherited from the default App Config Tile Style configuration and also in the Profile Config Tile Style set up, which may also override the default configuration set up in the App Config.
    The default view for the Menu Option Tile Config is that none of the properties have been activated. Click the Add Property drop-down list to see the full list of available options. Once a property has been added to the menu tile configuration, it no longer appears in the list of available properties to prevent conflicts in configuration.
    As many properties can be added as required although it is recommended that the configuration is not too complex as this would complicate ongoing administration.
    Tile Config Properties list
    Tile Config Properties list

    Action (URL)

    The Action (URL) is similar to the advert URL used under Home Page Banners in App Manager to direct the end user to another page, such as external content pages. The property uses the campusM URL Scheme to link to locations within the campusM app.
    To search for an internal URL, start typing a description and matching entries are displayed:
    Searching for an internal URL
    Searching for an internal URL
    Select an item from the list to add it to the Action (URL) property. The details of the location and the campusM URL Scheme URL are added to the property.
    Configured Action (URL)
    Configured Action URL
    When the end user clicks on this image, they are taken to the URL location.
    If the Action (URL) is no longer required in the menu tile configuration, it can be deleted by clicking the blue cross to the right of the property:
    Deleting an Action (URL)
    Deleting an Action (URL)
    The property entry is deleted with no further confirmation. The changes must be saved and published for the change to cascade into the live app for the end user. The property value is removed although the property itself remains in the view until the view is refreshed.
    If the action was completed in error, the App Builder screen should be refreshed without saving and publishing to restore the property.

    Background Color

    The Background Color allows for this specific menu tile to be modified, if it is different from either the default App Config or Profile Config selection. The color does not need to be added here if the default for the App or the Profile configuration are to be accepted.
    Clicking the square color icon brings up a color palette where the required shade can be selected.
    Background Color color palette
    Background Color color palette
    Click the small bar on the right hand side of the color palette to select the approximate shading. If the full palette is not visible and cannot be accessed by using the scroll bar, click into the small bar on the right and press the Down Arrow key on the keyboard to display the full palette box.
    Drag the small circle icon across the palette to select a color. The color icon and associated HTML hex color code change as the circle is dragged. The preview of the device view is also updated so the administrator can see the effect:
    Effect of changing the Background Color
    Effect of changing the Background Color
    If the exact HTML hex color code is known, from corporate branding guidelines for example, the code can be entered directly into the field. Click the existing hex code to activate the field for editing. It must be prefixed with a #, for example, #FF33E3.
    Inputting the hex code directly for Background Color
    Inputting the hex code directly

    Full Width Icon

    One of the properties lower in this list is to add an Icon. This Full Width Icon option allows for the icon to be fitted across the full span of the menu tile. This option is likely to be deployed in conjunction with another property lower down this list, No Label.
    With label
    A Full Width Icon with the label on display
    A Full Width Icon with no label would work particularly well where the label was a part of the customized icon:
    Full Width Icon with no label
    A Full Width Icon with no label

    Hide

    The hide/don’t hide options allow the tile to be hidden from the view. If a tile is hidden, it is downloaded as part of the app when the end user logs on but is not visible in the app. This is different to the Disabled check box in the Menu Option Config section. If a tile is disabled, it is not downloaded as part of the app and does not provide any active functionality.
    Example of hide/don't hide

    Hover Background Color

    The Hover Background Color changes the color of the tile when the end user hovers over it in the web app. It is not possible to hover over a tile in the mobile app. It is possible to view the hover color in the App Builder preview.
    Clicking the square color icon brings up a color palette where the required shade can be selected.
    Hover Background Color color palette
    Hover Background Color color palette
    Click the small bar on the right hand side of the color palette to select the approximate shading. If the full palette is not visible and cannot be accessed by using the scroll bar, click into the small bar on the right and press the Down Arrow key on the keyboard to display the full palette box.
    Drag the small circle icon across the palette to select a color. The color icon and associated HTML hex color code change as the circle is dragged. The preview of the device view is also updated so the administrator can see the effect when the cursor is hovered over a tile:
    Hover Background Color
    Example of Hover Background Color
    If the exact HTML hex color code is known, from corporate branding guidelines for example, the code can be entered directly into the field. Click the existing hex code to activate the field for editing. It must be prefixed with a #, for example, #FF33E3.
    Inputting the hex code directly for Hover Background Color
    Inputting the hex code directly

    Hover Text Color

    The Hover Text Color property changes the color of the text on the tile when the end user hovers over it in the web app. It is not possible to hover over a tile in the mobile app. It is possible to view the hover color in the App Builder preview.
    Clicking the square color icon brings up a color palette where the required shade can be selected.
    Hover Text Color color palette
    Hover Text Color color palette
    Click the small bar on the right hand side of the color palette to select the approximate shading. If the full palette is not visible and cannot be accessed by using the scroll bar, click into the small bar on the right and press the Down Arrow key on the keyboard to display the full palette box.
    Drag the small circle icon across the palette to select a color. The color icon and associated HTML hex color code change as the circle is dragged. The preview of the device view is also updated so the administrator can see the effect when the cursor is hovered over a tile:
    Hover Text Color
    Hover Text Color
    If the exact HTML hex color code is known, from corporate branding guidelines for example, the code can be entered directly into the field. Click the existing hex code to activate the field for editing. It must be prefixed with a #, for example, #FF33E3.
    Inputting the hex code directly for Hover Text Color
    Inputting the hex code directly for the Hover Text Color

    Image

    An image can be added to the menu tile. This property is likely to be deployed for a Home Page Banners tile, or a tile that has sufficient capacity on the screen to display an image. For example:
    Tile image
    Tile Image
    The recommended pixel size in detailed in the branding specifications, which are available in the Branding section.
    The image is selected from Asset Manager by clicking the Browse button.
    A larger version of the image is available by hovering over the image icon:
    Larger version of the Image
    Larger version of the tile Image

    Icon

    The majority of tiles display an icon to indicate the nature of the menu option, as in the example below:
    Tiles with Icons
    Tiles with Icons
    The icon is selected from Asset Manager by clicking the Browse button.
    Icons are not supplied in the standard installation of the app but an icon set is developed by campusM for an implementation based on customer requirements. Guidelines for producing icons are covered in the Branding Guidelines documentation and are covered in the administrator training sessions.
    The icon image is added to the tile in the preview window for assessment:
    Icon image in preview
    Icon image in preview
    A larger version of the icon is available by hovering over the icon image:
    Larger version of the Icon image
    Larger version of the Icon image

    Icon Align

    The Icon Align property sets the default alignment of the icon on the tile for the app: left, right or center. If the property is left blank, the default action is to center the icon. Once a value is selected, the app preview screen updates to illustrate the effect:
    Icon Align in preview
    Icon Align

    Image Fit

    The Image Fit property allows an image or set of images to be optimally displayed within the menu tile. This is usually most appropriate in a Banners tile, where images are used in the display.
    There are three options for the display, fit, stretch and crop, and the result is displayed in the preview app:
    Fit
    Fit
    Stretch
    Stretch
    Crop
    Crop
    The most appropriate choice depends on the images that have been used and the size of the menu tile.

    No Label

    No Label defines whether the tile displays a label or not. If the icon or image used on the tile is immediately recognizable to the end user, or incorporates a custom label as part of the icon, then tile label may be omitted by selecting the hide label property. The label is displayed if the show label option is selected. If the property is not added, the default value is for the label to be displayed.
    This is an example of a menu tile showing the label and with tile labels not on display, where the icon expands to fit the available space:
    With label        Without label
    Example of a menu tile showing tile label and with the tile label not on display

    Shadow

    The Shadow property is best used on a white tile against a white background. If the property is set to On, it adds a shadow outline to the tile. Once the effect is set, the app preview screen updates to illustrate the effect:
    Shadow effect in preview
    Shadow effect in preview
    If the Shadow property is set at the App Config and Profile Config levels then it will not be overwritten by settings the property in the Menu Options. The Shadow property must be set at all three levels for the effect to take place.

    Text Align

    The Text Align property sets the default alignment of the text on the tile: left, right or center. The default action is to center the text. Once a value is selected, the app preview screen updates to illustrate the effect:
    Text Align in preview
    Text Align

    Text Box

    The Text Box property defines whether the scrolling text on a Feeds tile is highlighted with a text box or not. These options do not apply to other types of tile. The options are Auto, which displays the text in a text box, or Off which displays the text directly over the image.
    With a text box            Without a text box
    With a text box and without a text box

    Text Box Background/Foreground

    The Text Box Background and Text Box Foreground properties enable the administrator to configure the color of the text box, if it has been set as a property, and the color of the superimposed text respectively.
    Clicking the square color icon for either property brings up a color palette where the required shade can be selected.
    Text Box Background color palette
    Text Box Background color palette
    Click the small bar on the right hand side of the color palette to select the approximate shading. If the full palette is not visible and cannot be accessed by using the scroll bar, click into the small bar on the right and press the Down Arrow key on the keyboard to display the full palette box.
    Drag the small circle icon across the palette to select a color. The color icon and associated HTML hex color code change as the circle is dragged. The preview of the device view is also updated so the administrator can see the effect when the cursor is hovered over a tile:
    Text Box Background and Text Box Foreground
    Text Box Background and Foreground
    If the exact HTML hex color code is known, from corporate branding guidelines for example, the code can be entered directly into the field. Click the existing hex code to activate the field for editing. It must be prefixed with a #, for example, #FF33E3.
    Inputting the hex code for Text Box Background
    Inputting the hex code directly for the Text Box Background color

    Text Color

    The Text Color defines the color of the text on the tile. It does not include the text on the Feeds tiles, which were covered in the Text Box discussion above.
    Clicking the square color icon for either property brings up a color palette where the required shade can be selected.
    Text colour color palette
    Text Color color palette
    Click the small bar on the right hand side of the color palette to select the approximate shading. If the full palette is not visible and cannot be accessed by using the scroll bar, click into the small bar on the right and press the Down Arrow key on the keyboard to display the full palette box.
    Drag the small circle icon across the palette to select a color. The color icon and associated HTML hex color code change as the circle is dragged. The preview of the device view is also updated so the administrator can see the color change for the text:
    Text colour color palette
    Text Color
    If the exact HTML hex color code is known, from corporate branding guidelines for example, the code can be entered directly into the field. Click the existing hex code to activate the field for editing. It must be prefixed with a #, for example, #FF33E3.
    Inputting the hex code directly for Text Color
    Inputting the hex code directly for the Text Color

    Tile Height/Width

    A new tile is added with a default height of one row and width of one column.
    Default Tile Height and Width
    Default tile height and width
    The height or width of the tile can be adjusted with the Tile Height and Tile Width properties. A mobile device can only support a display up to three columns wide. Use the drop-down list to select the appropriate tile size:
    Tile Height selection
    Selecting tile height
    One row high and two columns wide            Two rows high and three columns wide
    Example of one tile one row high and two columns wide and another two rows high and three columns wide
    The sizing of the tile is dependent on the nature of the service and its importance within the organization to the end user. The following example illustrates how the sizing and orientation can be managed to present the end user with a simple clean interface that is easy to navigate:
    campusM demo app
    campusM demo app

    Overrides

    An Override condition allows the administrator to add one or more specific conditions for this tile. This is particularly useful when configuring for the amount of screen space available on the web app as opposed to the mobile devices where the real-estate is more limited. A tile may be one column wide and one row high on the mobile devices but be three wide on the web app.
    To create a new Override condition, click the Add Override button or the drop-down arrow Add Override drop-down arrowin the display to open a new Override record:
    Add Overrides property
    Add Overrides record
    Click the small black cross Close Override record to remove the Overrides set up box.
    • Add Condition - click the Add Condition drop-down list and select the appropriate condition.
      Add Condition drop-down list
      Add Condition drop-down list
      Once one condition has been added to the configuration window, further options can be added by selecting another condition from the list.
      The details of each option are as follows:
      • Platforms - the device platform the Override condition applies to. Select one or more options.
        Platforms selection
        Platforms selection
      • Device Types - which of the devices - Phone, Tablet or Desktop - the condition applies to. Select one or more options.
        Device Types
        Device Types
      • Max/Min Device Area/Height/Width - allows the administrator to stipulate the maximum or minimum size of the screen in pixels. The Up/Down arrows can be used to add a positive or negative integer, or it can be typed directly into the field.
        Device Area
        Device Area
    • Add Property - click the Add Property drop-down list and select the appropriate property.
      Overrides Add Property drop-down list
      Add Property drop-down list
      The properties for the override mirror the main tile style configuration properties and set up in the same way. See above for specific details.

    Reordering Tiles

    Tiles can be re-arranged on the screen using drag and drop to gain the optimum presentation of menu options. As a tile is moved, the other tiles are automatically reordered around it. Tiles can be moved to any space on the screen.
    Tile organization            Moving tiles            Re-ordered tiles
    Re-ordering tiles
    The tiles follow the same basic order for each different device, although the presentation also depends on the dimensions of the display screen. The screenshots above are for an iPhone 6 or above. This is the same arrangement for an Android device:
    Tiles on an Android device
    Tiles on an Android device
    This is the same arrangement on a iPad:
    Tiles on an iPad
    Tiles on an iPad
    And finally, the web app:
    Tiles on the web app
    Tiles on the web app

    Delete a Menu Option

    If a menu tile option is no longer required for any App Profile, it can be deleted from the list of the menu options by selecting the menu item from the list to open the record and clicking the Delete button:
    Deleting a menu option
    Deleting a menu option
    Confirmation of the deletion is required:
    Confirm delete
    Confirm delete
    The action can be cancelled by clicking the Cancel button. Click the Delete button to proceed with the deletion.