Sliding Menu

Sliding Menu

Asset Version: 1.0.0
  • Version 1.0.0
Last Published: Apr 21, 2017 By: Kony Team
227 2 0 33
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 on to the screen
  • Provides controls to customize the UI and to set events
  • Plugs into your app without any code.

Platforms Supported

  • Android Phone Native
  • iPhone Native

Prerequisites

  • Kony account
  • Kony Visualizer Enterprise
  • A Kony Reference Architecture app created in Kony Visualizer

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 7.3
  3. A Kony Reference Architecture app in Visualizer. You can create a Kony Reference Architecture app in Visualizer using the following procedure:
    1. Open Kony Visualizer.
    2. On the File Menu, click New Project. The New Project dialog appears.
    3. In the Project Name box, type a name for your project.
    4. Select Kony Reference Architecture, and click Create.

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. In the Project Explorer, click the context menu arrow of KonyLibrary, and then click Import Library. 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. In the Collections library, you will see a new component added.

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. 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 Pass Through and Custom properties. The Pass Through properties are the default properties of individual widgets in the component. The Custom properties are user-defined properties based on the use case of the component.

Note:

Changes made to the Custom properties are reflected only during run time, but not during the design time (Visualizer Canvas).

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 Pass Through and Custom 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.

Footer Image Height
Category: Pass Through
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
Category: Pass Through
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
Category: Pass Through
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
Category: Custom
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
Category: Pass Through
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";
Footer Text Skin
Category: Custom
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";
Header Animation
Category: Custom
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;
Heading Height
Category: Pass Through
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
Category: Pass Through
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 Skin
Category: Custom
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";
Heading Text
Category: Pass Through
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
Category: Pass Through
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
Category: Pass Through
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
Category: Pass Through
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%";
Menu Item Text Skin
Category: Custom
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.

Example:
this.view.slidingMenuID.menuItemTextSkin = "menuItemSkin";
Profile Image Height
Category: Pass Through
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 isVisible
Category: Pass Through
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 Left
Category: Pass Through
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 Source
Category: Pass Through
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";
Profile Image Top
Category: Pass Through
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 Type
Category: Custom
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 Width
Category: Pass Through
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%";
Sliding Menu Direction
Category: Custom
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;
Sliding Menu isVisible
Category: Pass Through
Description: Controls whether or not the Sliding Menu is visible to the user.
Syntax: slidingMenuIsVisible
Type: Boolean
Read/Write: Read + Write
Example:
this.view.slidingMenuID.slidingMenuIsVisible = true;
Sub Heading Height
Category: Pass Through
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
Category: Pass Through
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 Skin
Category: Custom
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";
Sub Heading Text
Category: Pass Through
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
Category: Pass Through
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
Category: Pass Through
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
Category: Pass Through
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%";

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
Category Pass Through
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
Category Pass Through
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
Category Custom
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
Category Custom
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.

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

The API removes all menu and sub-menu items from the sliding menu.

Syntax
removeAllMenuItems()
Parameters

None

Return Value

None

Example
this.view.slidingID.removeAllMenuItems();