Sliding Menu

Sliding Menu

Asset Version: 2.0.0
  • Version 2.0.0
  • Version 1.0.0
Last Published: May 14, 2018 By: Kony Team
2756 6 1 375
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.

App Preview Code

  • C31G6
 

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.
  • Added Target Container Support

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.

Component Functionality

The following screen shot describes on how the component looks.

slidingmenu_look.png

Target containers are those where user can drag any widget / components. For more details on Target Container click here.

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 V8 SP1 and above.

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.

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 Controllers section to access the respective formController. Create a method and implement the code snippet similar to the sample code mentioned below.

/* Creating the component's object */
var SlidingMenu = new com.konymp.slidingmenu(
{
	"clipBounds": true,
	"height": "100%",
	"id": "SlidingMenu",
	"isVisible": true,
	"layoutType": kony.flex.FREE_FORM,
	"left": "0dp",
	"masterType": constants.MASTER_TYPE_USERWIDGET,
	"skin": "slFbox",
	"top": "0dp",
	"width": "100%",
	"zIndex": 12
}, {}, {});

/* Setting the component's properties */
SlidingMenu.footerImageHeight = "28dp";
SlidingMenu.footerImageSrc = "konymp_sm_logout_icon.png";
SlidingMenu.footerImageWidth = "28dp";
SlidingMenu.headingText = "Jon Dave";
SlidingMenu.profileImageSrc = "user_profile.png";
SlidingMenu.profileImageTop = "15%";
SlidingMenu.slidingMenuIcon = "hamburger.png";
SlidingMenu.slidingMenuisVisible = true;
SlidingMenu.subHeadingText = "Texas";
SlidingMenu.slidingMenuDirection = "Left";
SlidingMenu.headerAnimation = "Slide In";
SlidingMenu.slidingMenuAnimation = "Squeeze";
SlidingMenu.animationSpeed = "0.25";
SlidingMenu.footerStyle = "Image & Text";
SlidingMenu.profileImageType = "Rounded Corner";

/*Adding the component to a Form*/ 
this.view.add(SlidingMenu);

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

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

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 reflect on the preview canvas of Kony Visualizer.

Example:
this.view.componentID.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 reflect on the preview canvas of Kony Visualizer.

Example:
this.view.componentID.slidingMenuIcon = "image.png";
Menu Options
Description: Specifies the list of menu items.
Syntax: menuItems
Type: Array of JSON
Read/Write: Read + Write
Remarks:

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

Example:
this.view.componentID.menuItems =
[
{
	"menuItemIcon": "visualizerimage_icon.png",
	"menuItemName": "Label 1"
},
{
	"menuItemIcon": "visualizerimage_icon.png",
	"menuItemName": "Label 2"
}
];
								
SubMenu Options
Description: Specifies the list of Sub Menu items.
Syntax: subMenuItems
Type: Array of JSON
Read/Write: Read + Write
Remarks:

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

Example:
this.view.componentID.subMenuItems =
[                            
{
	"submenuItemIcon": "visualizerimage_icon.png",
	"submenuItemName": "subItem 1",
	"menuItemName": "Label 2"
},
{
	"submenuItemIcon ": "visualizerimage_icon.png",
	"submenuItemName": "subItem 2",
	"menuItemName": "Label 2"
}
];
Enable Separator
Description: Enables the separator between the menu items.
Syntax: enableSeparator
Type: Boolean
Read/Write: Read + Write
Remarks:

This property does not reflect on the preview canvas of Kony Visualizer. Default value is "False"

Example:
this.view.componentID.enableSeparator = false;		
Enable Header
Description:

User can toggle the visibility of the header of the sliding menu, so that he can see the changes made to the properties on the preview canvas of the Kony Visualizer.

Syntax: enableHeader
Type: Boolean
Read/Write: Read + Write
Remarks:

The default value of the property is "True". This property reflects on the preview canvas of Kony Visualizer

Example:
this.view.componentID.enableHeader = true;
Placeholder Visibility
Description:

User can toggle the visibility of the Dummy content shown in app screen for his reference.

Syntax: placeholderVisibility
Type: Boolean
Read/Write: Read + Write
Remarks:

The default value of the property is "True". This property is just for user reference as to where the app content is displayed at run-time.

Example:
this.view.componentID.placeholderVisibility = true;
Sliding Menu Animation Speed
Description:

Specifies the speed of sliding menu animation.

Syntax: animationSpeed
Type: String
Read/Write: Read + Write
Remarks:

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

Example:
this.view.componentID.animationSpeed = "0.4";
Enable MenuItem Animation
Description:

Enables the animation of the menu items of Sliding Menu.

Syntax: enableMenuItemAnimation
Type: Boolean
Read/Write: Read + Write
Remarks:

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

Example:
this.view.componentID.enableMenuItemAnimation = true;

Transitions

Sliding Menu Direction
Description:

Specifies the direction from which the menu should slide on to the screen.

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.
Syntax: slidingMenuDirection
Type: String
Read/Write: Write
Remarks:

The default value of the property is "Right". This property does not reflect on the preview canvas of Kony Visualizer

Example:
this.view.componentID.slidingMenuDirection = "left";
Header Animation
Description:

Specifies how the sliding menu should appear on the screen.

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

The default value of the property is "No Animation". This property does not reflect on the preview canvas of Kony Visualizer

Example:
this.view.componentID.headerAnimation= "Slide In";
Sliding Menu Transition
Description:

Specifies the interaction of the sliding menu that how it will appear.

  • Reveal
  • Overlay
  • Push
  • Squeeze
Syntax: slidingMenuTransition
Type: String
Read/Write: Read + Write
Remarks:

The default value of the property is "Push". This property does not reflect on the preview canvas of Kony Visualizer

Example:
this.view.componentID.slidingMenuTransition = "Push";

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.componentID.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.componentID.headingLeft = "15Dp";
Heading Text
Description: Specifies a text to be displayed as heading.
Syntax: headingText
Type: String
Read/Write: Read + Write
Example:
this.view.componentID.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.componentID.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.componentID.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.componentID.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.componentID.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.componentID.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.componentID.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.componentID.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.componentID.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.componentID.subHeadingWidth = "10%";

Profile Options

Profile Image Type
Description: Specifies how the profile image to be displayed on the sliding menu.
Syntax: profileImageType
Type: String
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.componentID.profileImageType= "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.componentID.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.componentID.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.componentID.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.componentID.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.componentID.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.componentID.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.componentID.footerImageHeight = "10%";

Replace the "slider" 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.componentID.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.componentID.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: String
Read/Write: Read + Write
Remarks:

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

Example:
this.view.componentID.footerStyle = "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.componentID.footerText = "Logout";

Exposed Skins

Menu Options Text Skin
Description: Specifies a skin to be applied to the text of the menu items in the sliding menu.
Syntax: menuTextSkin
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.componentID.menuTextSkin = "menuItemSkin";
Sliding Menu Skin
Description: Specifies a skin to be applied to the footer text in the sliding menu.
Syntax: slidingMenuSkin
Widget Type: Flex Container
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.componentID.slidingMenuSkin = "slidingMenuSkin";
Footer Text Skin
Description: Specifies id of the skin assigned to the footer text/ label of the sliding menu, if the footer contains text.
Syntax: footerTextSkin
Widget Type: Label
Read/Write: Read + Write
Remarks:

Before setting the property, ensure that the skin ID that you specify already exists in the app project. Skin assigned to this property should be of same widget type (Label).

Example:
this.view.componentID.footerTextSkin = "footerSkin";
Heading Skin
Description: Specifies a skin to be applied to the heading label.
Syntax: headingSkin
Widget Type: Label
Read/Write: Read + Write
Remarks:

Before setting the property, ensure that the skin ID that you specify already exists in the app project. Skin assigned to this property should be of same widget type (Label).

Example:
this.view.componentID.headingSkin = "headSkin";
Sub Heading Skin
Description: Specifies a skin to be applied to the sub-heading label.
Syntax: subHeadingSkin
Widget Type: Label
Read/Write: Read + Write
Remarks:

Before setting the property, ensure that the skin ID that you specify already exists in the app project. Skin assigned to this property should be of same widget type (Label).

Example:
this.view.componentID.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
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
Example:
this.view.componentID.onFooterClick = function()
{
	alert("Footer Clicked");
};
onMenuItemClick
Description: This event is invoked when any one of the sliding menu item is clicked/ tapped. It returns the index for the
option clicked.
Syntax: onMenuItemClick
Example:
this.view.componentID.onMenuItemClick = function()
{
	alert("Menu Item Clicked");
};
onProfileClick
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
Example:
this.view.componentID.onProfileClick = function()
{
	alert("Profile Clicked");
};
onSlidingMenuHide
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: onSlidingMenuHide
Example:
this.view.componentID.onSlidingMenuHide = function()
{
	alert("Sliding Menu Hidden");
};
onSlidingMenuShow
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
Example:
this.view.componentID.onSlidingMenuShow = function()
{
	alert("Sliding Menu Shown");
};

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, submenuItems)
Parameters
menuItems:

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

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

None

Example
//Array of JSON Objects with menu items
var menuData =
[
	{menuItemName:'opt1', menuItemIcon:'iconName.png'},
	{menuItemName:'opt2',menuItemIcon:'iconName.png'}
];

var submenuData =
[
	{menuItemName:'opt1', submenuItemName:'subOpt1', base64:'base64_string'},
	{menuItemName:'opt1', submenuItemName:'subOpt2', subMenuItemIcon:'icon.png’}
];

/* Adding the items to the component */
this.view.componentID.addMenuItems(menuData,subMenuData);
					
removeAllMenuItem

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

Syntax
removeAllMenuItem()
Parameters

None

Return Value

None

Example
this.view.componentID.removeAllMenuItem();
showSlidingMenu

This API shows the Sliding Menu.

Syntax
showSlidingMenu()
Parameters

None

Return Value

None

Example
this.view.componentID.showSlidingMenu();
hideSlidingMenu

This API shows the Sliding Menu.

Syntax
hideSlidingMenu()
Parameters

None

Return Value

None

Example
this.view.componentID.hideSlidingMenu();

Limitations

Initial version doesn’t support landscape mode.