Sliding Menu

Sliding Menu

Asset Version: 1.0.0
  • Version 1.0.0
Last Published: Jul 6, 2017 By: Kony Team
738 4 0 160
Screen space is a precious commodity on mobile and the slide menu is one of the most popular mobile navigation patterns that helps you save it. The drawer panel allows you to hide the navigation beyond the edge of the screen and reveal it only after a user’s action. This pattern can be particularly useful if you want your user to focus on the main content. This component provides a ready to use Sliding menu for Kony Apps.

Requirements

  • Visualizer Enterprise
 

Devices

 

Platforms

 

Features

  • Enriches your app with popular navigation pattern, Hamburger Menu
  • Flexible to display and hide the menu
  • Saves the screen space
  • Menu slides with animation onto the screen
  • Provides controls to customize the UI and to set events
  • Plugs into your app without any code.

Prerequisites

  • Kony Visualizer v8

Using the Sliding Menu component, you can achieve a menu icon and a sliding menu in your app. When a user clicks the menu icon, the sliding menu slides on to the screen either from the right side or from the left side of the screen.

The Sliding Menu component is a combination of the following items:

  • Sliding Menu icon: A menu icon is displayed at the upper right corner or at the upper left corner of the screen. When a user clicks the menu icon, a menu slides on to the screen. If the menu icon is placed at the upper right corner of the screen, the menu slides from the right side of the screen. If the menu icon is placed at the upper left corner, the menu slides from the left side of the screen.
  • Sliding Menu: The menu contains the following items:
    • Header: Top section of the menu. You can define the Profile Image UI element that displays the image of the user who logged on to the app.
    • Menu Items: Navigation links to the major modules of the app. A menu can also contain sub-menu items.
    • Footer: Bottom section of the menu. You can define the Logout option in the Footer.

You can import the Sliding Menu component into your app (created in Kony Visualizer) and achieve the features of sliding menu. The Sliding Menu component also facilitates a set of properties, events, and APIs that helps you customize the UI elements and the functionality of the component.

The following sections help you use the Sliding Menu component in your app:

Prerequisites

Before you start using the Sliding Menu component, ensure you have the following:

  1. Kony account
  2. Kony Visualizer Enterprise 8.0

Importing the Sliding Menu Component

Before you start importing the component to Kony Visualizer, you must download the component from the Kony Marketplace website. You can import the Marketplace components only into the apps that are of the Kony Reference Architecture type.

To import a Sliding Menu component, do the following:

  1. Open your app project in Kony Visualizer.
  2. On the File menu, point to Import, and click Component. The Open dialog appears.
  3. Navigate to the location where you downloaded the component (zip file) on your computer, select the component, and click Open. The Import Marketplace Item dialog appears.
    slidingmenu_import.png
  4. In the Library Name box, type a name if you want to create a new library. Otherwise, you can select the existing library name.
  5. In the Collection Name box, type a name if you want to create a new collection. Otherwise, you can select the existing collection name.
  6. In the Component Name box, the com.konymp.slidingmenu name is displayed by default. If you want, you can rename it.

When you import a component, the component is imported to Visualizer's workspace, but not directly into your app. Thus, after you import a component, you must add the component to your app.

Adding a Sliding Menu Component to your App

You can add a Sliding Menu component only to FlexForms.

To add a Sliding Menu component, do the following:

  1. Open your app, and then open the form to which you want to add the component.
  2. On the My Libraries tab, select the defined Marketplace library from the drop-down list in which the component exists.
    library.png
  3. From the Collections tab, drag the component onto the form on the Visualizer canvas. The component will be added to the form. You will also see a new element, com.konymp.slidingmenu, under the Components section on the Templates tab.

After adding a component to a form, you can configure the component the way you want it using the Look, Skin, and Action tabs on the Properties pane. Configuring the properties on the Properties pane is similar to configuring the properties of any widget in Kony Visualizer. For more information, refer Button Widget.

You can also see that a new tab, Component, is added on the Properties pane. The Component tab contains assorted properties relevant to the component that allow you to customize the component as required. The properties on the Component tab are categorized as General, Transitions, Headings, Profile Options, and Footer Options properties.

You can also add a Sliding Menu component dynamically. To do so,

  1. In the Project Explorer, on the Projects tab, click the context menu arrow of Modules, and then click New JS module. A new JavaScript file opens in the Code Editor.
  2. Copy and paste the following code snippet in the JavaScript file.
    /* creating a component's Object */
    var slider = new com.konymp.slidingmenu({
                    "clipBounds": true,
                    "height": "100%",
                    "id": "slider",
                    "isVisible": true,
                    "left": "0dp",
                    "skin": " sknFlxSlidingMenu",
                    "top": "0dp",
                    "width": "100%",
                    "zIndex": 1
                }, {}, {});
    /* Setting the component's properties */
               slider.profileImageIsVisible = true;
               slider.profileImageSource = "kony.png";
               slider.profileImageLeft = "5%";
               slider.profileImageTop = "10%";
               slider.profileImageHeight = "48px";
               slider.profileImageWidth = "48px";
               slider.headingText= "Kony Labs Pvt. Ltd";
               slider.subHeadingText = "2/9/2017";
               slider.headingTextIsVisible = true;
               slider.subHeadingTextIsVisible= true;
               slider.headingLeft = "30%";
               slider.subHeadLeft = "30%";
               slider.headingTop = "10%";
               slider.subHeadingTop = "20%";
               slider.footerText = "Copyright Info";
               slider.footerImageSource = "konyfooter.png";
               slider.footerImageHeight = "10px";
               slider.footerImageWidth = "10px";
               slider.slidingMenuIsVisible = false;
               slider.slidingMenuDirection = "Left";
               slider.headerAnimation = "No Animation";
               slider.profileImageType = "Regular";
               slider.footerStyle= "Image & Text";
    /*Adding the Sliding Menu component to a Form*/ 
                this.view.add(slider);

    In the code snippet, you can edit the properties of the component as you require. For more information, see Setting Properties.

  3. Save the file.

Setting Properties

The properties provided on the Component tab allow you to customize the UI elements and set constraints to fields in the Sliding Menu component. You can set the properties directly on the Component tab or by writing a JavaScript. This section provides information on how to set properties by writing a JavaScript.

General

Menu Item Text Skin
Description: Specifies a skin to be applied to the text of the menu items in the sliding menu.
Syntax: menuItemTextSkin
Type: String
Read/Write: Read + Write
Remarks:

Before setting the property, ensure that the skin ID that you specify already exists in the app project. To create the skin refer to the Kony documentation.

This property will not reflect on the preview canvas of Kony Visualizer.

Example:
this.view.slidingMenuID.menuItemTextSkin = "menuItemSkin";
Sliding Menu isVisible
Description: Controls whether or not the Sliding Menu is visible to the user.
Syntax: slidingMenuIsVisible
Type: Boolean
Read/Write: Read + Write
Remarks:

This property will not reflect on the preview canvas of Kony Visualizer.

Example:
this.view.slidingMenuID.slidingMenuIsVisible = true;
Sliding Menu Icon
Description: Specifies the source for the sliding menu Icon.
Syntax: slidingMenuIcon
Type: List View (Explorer pops up showing app assets from which you can chose your profile image.)
Read/Write: Read + Write
Remarks:

This property will not reflect on the preview canvas of Kony Visualizer.

Example:
this.view.slidingMenuID.slidingMenuIcon = ;
Sliding Menu Close Icon
Description: Specifies the source of Close image for the sliding menu Icon.
Syntax: closeIcon
Type: List View (Explorer pops up showing app assets from which you can chose your profile image.)
Read/Write: Read + Write
Remarks:

This property will not reflect on the preview canvas of Kony Visualizer.

Example:
this.view.slidingMenuID.closeIcon = ;

Transitions

Sliding Menu Direction
Description: Specifies the direction from which the menu should slide on to the screen.
Syntax: slidingMenuDirection
Type: Constant
Read/Write: Write
Remarks:

The default value of the property is "Right".

You can specify any one of the following:

  • LEFT: The menu slides from the left side of the screen.
  • RIGHT: The menu slides from the right side of the screen.
Example:
this.view.slidingMenuID.slidingMenuDirection= constants.LEFT;
Header Animation
Description:

Specifies how the sliding menu should appear on the screen.

Syntax: headerAnimation
Type: Constant
Read/Write: Read + Write
Remarks:

The default value of the property is "No Animation".

You can specify any one of the following:

  • NO ANIMATION: The sliding menu slides from the left side of the screen.
  • ZOOM OUT: The sliding menu zooms in to the visible region.
  • SLIDE IN: The sliding menu slides on the screen based on the value specified for the slidingMenuDirection property.
Example:
this.view.placeLocator.headerAnimation= constants.SLIDE_IN;

Headings

Heading Height
Description: Specifies the height of the heading label. You can specify the height in Dp, Px, or percentage.
Syntax: headingHeight
Type: String
Read/Write: Read + Write
Example:
this.view.slidingMenuID.headingHeight= "5%";
Heading Left
Description: Determines the left edge of the heading label. You can specify the value in Dp, Px, or percentage.
Syntax: headingLeft
Type: String
Read/Write: Read + Write
Example:
this.view.slidingMenuID.headingLeft = "15Dp";
Heading Text
Description: Specifies a text to be displayed as heading.
Syntax: headingText
Type: String
Read/Write: Read + Write
Example:
this.view.slidingMenuID.headingText= "Home";
Heading Text isVisible
Description: Controls whether or not the heading text is visible to the user.
Syntax: headingTextIsVisible
Type: Boolean
Read/Write: Read + Write
Example:
this.view.slidingMenuID.headingTextIsVisible= true;
Heading Top
Description: Determines the top edge of the heading label. You can specify the value in Dp, Px, or percentage.
Syntax: headingTop
Type: String
Read/Write: Read + Write
Example:
this.view.slidingMenuID.headingTop= "20Px";
Heading Width
Description: Specifies the width of the heading label. You can specify the value in Dp, Px, or percentage.
Syntax: headingWidth
Type: String
Read/Write: Read + Write
Example:
this.view.slidingMenuID.headingWidth = "5%";
Sub Heading Height
Description: Specifies the height of the sub-heading label. You can specify the height in Dp, Px, or percentage.
Syntax: subHeadingHeight
Type: String
Read/Write: Read + Write
Example:
this.view.slidingMenuID.subHeadingHeight = "5%";
Sub Heading Left
Description: Determines the left edge of the sub-heading label. You can specify the value in Dp, Px, or percentage.
Syntax: subHeadingLeft
Type: String
Read/Write: Read + Write
Example:
this.view.slidingMenuID.subHeadingLeft = "5%";
Sub Heading Text
Description: Specifies a text to be displayed as sub-heading.
Syntax: subHeadingText
Type: String
Read/Write: Read + Write
Example:
this.view.slidingMenuID.subHeadingText = "Locations";
Sub Heading Text isVisible
Description: Controls whether or not the sub-heading label is visible to the user.
Syntax: subHeadingTextIsVisible
Type: Boolean
Read/Write: Read + Write
Example:
this.view.slidingMenuID.subHeadingText = true;
Sub Heading Top
Description: Determines the top edge of the sub-heading label. You can specify the value in Dp, Px, or percentage.
Syntax: subHeadingTop
Type: String
Read/Write: Read + Write
Example:
this.view.slidingMenuID.subHeadingTop = "5Dp";
Sub Heading Width
Description: Specifies the width of the sub-heading label. You can specify the value in Dp, Px, or percentage.
Syntax: subHeadingWidth
Type: String
Read/Write: Read + Write
Example:
this.view.slidingMenuID.subHeadingWidth = "10%";

Profile Options

Profile Image Type
Description: Specifies how the profile image to be displayed on the sliding menu.
Syntax: profileImageType
Type: Constant
Read/Write: Write
Remarks:

The default value of the property is "Regular".

You can specify any one of the following:

  • REGULAR: Displays the profile image as provided.
  • ROUNDED CORNER: Displays the profile image with rounded corners.
  • CIRCLE: Displays the profile image in a circle.
Example:
this.view.slidingMenuID.profileImageType= constants.CIRCLE;
Profile Image Left
Description: Determines the left edge of the profile image. You can specify the height in Dp, Px, or percentage.
Syntax: profileImageLeft
Type: String
Read/Write: Read + Write
Example:
this.view.slidingMenuID.profileImageLeft = "20Dp";
Profile Image Top
Description: Determines the top edge of the profile image. You can specify the height in Dp, Px, or percentage.
Syntax: profileImageTop
Type: String
Read/Write: Read + Write
Example:
this.view.slidingMenuID.profileImageTop = "5%";
Profile Image isVisible
Description: Controls whether or not the profile image is visible to the user.
Syntax: profileImageIsVisible
Type: Boolean
Read/Write: Read + Write
Example:
this.view.slidingMenuID.profileImageIsVisible = true;
Profile Image Height
Description: Specifies the height of the profile image. You can specify the height in Dp, Px, or percentage.
Syntax: profileImageHeight
Type: String
Read/Write: Read + Write
Example:
this.view.slidingMenuID.profileImageHeight = "5%";
Profile Image Width
Description: Specifies the width of the profile image. You can specify the height in Dp, Px, or percentage.
Syntax: profileImageWidth
Type: String
Read/Write: Read + Write
Example:
this.view.slidingMenuID.profileImageWidth = "5%";
Profile Image Source
Description: Specifies a file name of the image to be set as the profile image.
Syntax: profileImageSource
Type: String
Read/Write: Read + Write
Remarks:

Before setting the property:

  • Ensure that the image file exists in the workspace\resources\common directory.
  • The file name of the image should not contain any upper case characters.
  • Specify the image’s file name along with extension.
  • Only PNG format images are supported.
Example:
this.view.slidingMenuID.profileImageSource = "profileImg.png";

Footer options

Footer Image Height
Description: Specifies the height of the footer image. You can specify the height in Dp, Px, or percentage.
Syntax: footerImageHeight
Type: String
Read/Write: Read + Write
Example:
this.view.slidingMenuID.footerImageHeight = "10%";

Replace the "slidingMenuID" with the ID of the component in all examples in this document.
You can find the ID of the component on the Look tab.

Footer Image Source
Description: Specifies a file name of the image to be set as footer.
Syntax: footerImageSource
Type: String
Read/Write: Read + Write
Remarks:

The property takes effect only when the value of the footerStyle property is IMAGE&TEXT or FOOTER IMAGE.

Before setting the property:

  • Ensure that the image file exists in the workspace\resources\common directory.
  • The file name of the image should not contain any upper case characters.
  • Specify the image’s file name along with the extension.
  • Only PNG format images are supported.
Example:
this.view.slidingMenuID.footerImageSource = "footer.png";
Footer Image Width
Description: Specifies the width of the footer image. You can specify the width in Dp, Px, or percentage.
Syntax: footerImageWidth
Type: String
Read/Write: Read + Write
Example:
this.view.slidingMenuID.footerImageWidth = "20%";
Footer Style
Description: Specifies whether the footer to be displayed as text, image, both text and image, or no footer at all.
Syntax: footerStyle
Type: Constant
Read/Write: Read + Write
Remarks:

The default value of the property is "No Footer".

You can specify any one of the following:

  • NO FOOTER: The footer is not displayed in the sliding menu.
  • ONLY TEXT: Displays only text. Using the footerText property, you can specify the text to be displayed.
  • ONLY IMAGE: Displays only image. Using the footerImageSource property, you can specify the image file to be displayed.
  • IMAGE&TEXT: Displays both image and text.
Example:
this.view.slidingMenuID.footerStyle= constants.ONLY TEXT;
Footer text
Description:

Specifies a text to be displayed in the footer.

Syntax: footerText
Type: String
Read/Write: Read + Write
Remarks: The property takes effect only when the value of the footerStyle property is IMAGE&TEXT or ONLY TEXT.
Example:
this.view.placeLocator.footerText = "Logout";

Exposed Skins

Sliding Menu Skin

Footer Text Skin
Description: Specifies a skin to be applied to the footer text in the sliding menu.
Syntax: footerTextSkin
Type: String
Read/Write: Read + Write
Remarks:

Before setting the property, ensure that the skin ID that you specify already exists in the app project.

Example:
this.view.slidingMenuID.footerTextSkin = "footerSkin";

Footer Text Skin

Footer Text Skin
Description: Specifies a skin to be applied to the footer text in the sliding menu.
Syntax: footerTextSkin
Type: String
Read/Write: Read + Write
Remarks:

Before setting the property, ensure that the skin ID that you specify already exists in the app project.

Example:
this.view.slidingMenuID.footerTextSkin = "footerSkin";

Heading Skin

Heading Skin
Description: Specifies a skin to be applied to the heading label.
Syntax: headingSkin
Type: String
Read/Write: Read + Write
Remarks:

Before setting the property, ensure that the skin ID that you specify already exists in the app project.

Example:
this.view.slidingMenuID.headingSkin = "headSkin";

Sub-Heading Skin

Sub Heading Skin
Description: Specifies a skin to be applied to the sub-heading label.
Syntax: subHeadingSkin
Type: String
Read/Write: Read + Write
Remarks:

Before setting the property, ensure that the skin ID that you specify already exists in the app project.

Example:
this.view.slidingMenuID.subHeadingSkin = "subHeadSkin";

Defining Events

You can define events to be executed when an action is performed. You can configure the events directly on the Actions tab or by writing a JavaScript. To configure the events on the Actions tab, click Edit against each event. For more information, refer Add Actions.

This section provides information on each event that helps you define the actions by writing a JavaScript.

onFooterClick Event
Description: The event is invoked when the footer is clicked/tapped. In the event, you can define actions that execute when the footer is clicked.
Syntax: onFooterClick()
onProfileClick Event
Description: The event is invoked when the profile image is clicked/tapped. In the event, you can define actions that execute when the profile image is clicked.
Syntax: onProfileClick()
onSlidingMenuHide Event
Description: The event is invoked when the sliding menu icon is clicked/tapped to hide the sliding menu. In the event, you can define actions to be executed when sliding menu disappears from the screen.
Syntax: onSlidingMenuShow()
onSlidingMenuShow Event
Description: The event is invoked when the sliding menu icon is clicked/tapped to display the sliding menu. In the event, you can define actions to be executed when sliding menu appears on the screen.
Syntax: onSlidingMenuShow()

APIs

The following APIs pertain to the Sliding Menu component.

addMenuItems

The API adds menu and sub-menu items to the sliding menu. It adds all the options mentioned directly, if no options are specified. If the menu options are previously mentioned, then the new options that are passed as parameters are appended at the bottom of the list.

Syntax
addMenuItems(menuItems)
Parameters
menuItems:

Specifies an array of JSON objects. The JSON objects contain details of the menu items to be displayed on the sliding menu.
Return Value

None

Example
//Array of JSON Objects with menu items
var data= [
    {
      text: "Menu Option 1",
      src:"imgsrc1.png",
      callback:function(){
             alert(“Navigating to First Form”);
            }
    },    {
      text:"Menu Option 2",
      src:"imgsrc2.png",
      callback:function(){
             alert(“Navigating to Second Form”);
            }
     },     {
       text:"Menu Option 3",
       src:"imgsrc3.png",
       callback: function(){
             alert(“Navigating to Third Form”);
            }
      }
] //Array of JSON objects with menu and sub-menu items var data= [
["Menu Option 1","MenuOption1.png", [{
         text:"Sub-Menu Option 2",
         src:"NestedMenuOption1.png",
         callback: function () {alert (“Navigating to First Form”);}},     {
         text:"Sub-Menu Option 3",
         src:"NestedMenuOption2.png",
         callback: function () {alert (“Navigating to Third Form”);}}
    ]
]
removeAllMenuItems

This method is used to remove all the items/options in the sliding menu. It purges the data of the segment.

Syntax
removeAllMenuItems()
Parameters

None

Return Value

None

Example
this.view.slidingID.removeAllMenuItems();

Limitations

Initial version doesn’t support landscape mode.

Initial version doesn’t provide an option to control the speed of animation.