Sliding Menu User Guide As Per Guidelines

Kony, Inc.
Sliding Menu
User Guide
For Kony Stakeholders only

Kony Sliding Menu Component
Document Revision History

Revisio Date Description of change Author
n
Praharshita
0.1 09-Feb-2017 Initial version
Krishna
2017 Kony, Inc. All rights reserved Page 2 of 16

Copyright 2017 by Kony, Inc.

All rights reserved.
February, 2017
This document contains information proprietary to Kony, Inc., is bound by the Kony
license agreements and may not be used except in the context of understanding the
use and methods of Kony Inc, software without prior, express, written permission. Kony,
Empowering Everywhere, Kony MobileFabric, Kony Modeler, and Kony Visualizer are
trademarks of Kony, Inc. Microsoft, the Microsoft logo, Internet Explorer, Windows, and
Windows Vista are registered trademarks of Microsoft Corporation. Apple, the Apple
logo, iTunes, iPhone, iPad, OS X, Objective-C, Safari, Apple Pay, Apple Watch, and Xcode
are trademarks or registered trademarks of Apple, Inc. Google, the Google logo,
Android, and the Android logo are registered trademarks of Google, Inc. Chrome is a
trademark of Google, Inc. BlackBerry, PlayBook, Research in Motion, and RIM are
registered trademarks of BlackBerry. All other terms, trademarks, or service marks
mentioned in this document have been capitalized and are to be considered the
property of their respective owners.

Contents
1 Introduction............................................................................................................... 5
2 Release Summary...................................................................................................... 5
3 Reference Documents................................................................................................ 5
4 Installation and Deployment Guidelines....................................................................5
5 Changes in this Release............................................................................................. 5
6 Component Developer Guide..................................................................................... 5
6.1 Properties............................................................................................................ 5
6.1.1 Pass Through Properties................................................................................ 5
6.1.2 Custom Properties......................................................................................... 9
6.2 Events............................................................................................................... 11
6.2.1 Pass Through Events................................................................................... 11
6.2.2 Custom Events............................................................................................ 12
6.3 API..................................................................................................................... 12
6.3.1 addMenuItems............................................................................................ 12
6.3.2 removeAllMenuItems.................................................................................. 13
6.4 Consuming the Sliding Menu Component through Visualizer............................13
6.5 Consuming the Login Component dynamically..................................................14
7 Known Issues........................................................................................................... 15

1 Introduction
Sliding Menu component lets the user create a sliding menu (AKA Hamburger Menu)
by simply dragging and dropping the user defined widget into your form. The user
can modify the pass through properties and custom properties to achieve the look
and feel that is compliant with his/her needs.
2 Release Summary
Product name Sliding Menu Component
Release number 1.0
Release date 08 February, 2017
Scope of release First version of Sliding Menu Widget
iPhone Native
Platforms supported Android Phone Native
Windows 10
Kony Product Version
Kony Studio Enterprise : GA- 7.2.5
used
iOS 10
Channels/Devices Android Native
certified Nexus 6 with Android N
Samsung Galaxy S6 Neo with Android 6.1
Product Management
Chandan Esanakula
contact
Engineering Contact Dilip Sukumar
For any application level issues please contact
Support contact
the product manager.
3 Reference Documents
For Kony Studio and Kony Visualizer related documents, see Kony Library.
4 Installation and Deployment Guidelines

5 Changes in this Release
This is the first official release of the Sliding Menu component user widget.

6 Component Developer Guide

6.1 Properties
6.1.1Pass Through Properties
6.1.1.1 profileImageIsVisible
Specifies whether the logo/profile image is visible or not.
Syntax: profileImageIsVisible
Type: Boolean
Read/Write: Read + Write
6.1.1.2 profileImageSource
Specifies the source of the profile image in the sliding menu.
Syntax: profileImageSource
Type: List View (Explorer pops up showing app assets from which you can chose
your profile image.)
6.1.1.3 profileImageLeft
Specifies the left of the profile image in percentage, dp, px or it can be set
to default.
Syntax: profileImageLeft
Type: String
6.1.1.4 profileImageTop
Specifies the top of the profile image in percentage, dp, px or it can be set
to default.
Syntax: profileImageTop
Type: String
6.1.1.5 profileImageHeight
Specifies the height of the profile image in percentage, dp or px.
Syntax: profileImageHeight
Type: String
6.1.1.6 profileImageWidth
Specifies the width of the profile image in percentage, dp or px.

Syntax: profileImageWidth
Type: String
6.1.1.7 headingText
Specifies the text to be displayed in the header label.
Syntax: headingText
Type: String
6.1.1.8 subHeadingText
Specifies the text to be displayed in the sub-header label.
Syntax: subHeadingText
Type: String
6.1.1.9 headingTextIsVisible
Specifies whether the heading label in the sliding menu is visible.
Syntax: headingTextIsVisible
Type: Boolean
6.1.1.10 subHeadingTextIsVisible
Specifies whether the sub-heading label in the sliding menu is visible.
Syntax: subHeadingTextIsVisible
Type: Boolean
6.1.1.11 headingLeft
Specifies the left of the heading label in percentages, dp, px or it can be
set as default.
Syntax: headingLeft
Type: Number
1 headingTop
Specifies top of the heading label in percentages, dp, px or it can be set as
default.
Syntax: headingTop
Type: Number

1 headingHeight
Specifies height of the heading label in percentages, dp, px , default or it
can be set as preferrred.
Syntax: headingHeight
Type: Number
6.1.1.12 headingWidth
Specifies width of the heading label in percentages, dp, px, default or it
can be set as preferred.
Syntax: headingWidth
Type: Number
6.1.1.13 subHeadingLeft
Specifies left of the sub-heading label in percentages, dp, px or it can be
set as default.
Syntax: subHeadingLeft
Type: Number
6.1.1.14 subHeadingTop
Specifies top of the sub-heading label in percentages, dp, px or it can be
set as default.
Syntax: subHeadingTop
Type: Number
6.1.1.15 subHeadingHeight
Specifies height of the sub-heading label in percentages, dp, px, default or
it can be set as preferred.
Syntax: subHeadingHeight
Type: Number
6.1.1.16 subHeadingWidth
Specifies width of the sub-heading label in percentages, dp, px, default or
it can be set as preferred.

Syntax: subHeadingWidth
Type: Number
6.1.1.17 footerText
Specifies text to be displayed in the footer. This property is dependent on
Footer Style (which is a custom property). If the footerStyle is one that contains
text, then the footerText property lets you specify the contents of the text.
Syntax: footerText
Type: String
6.1.1.18 footerImageSource
Specifies the source of the footer image in the sliding menu if the
footerType property is chosen such that the footer includes a footer image.
Syntax: footerImageSource
Type: List View (Explorer pops up showing app assets from which you can chose
your footer image.)
6.1.1.19 footerImageHeight
Specifies height of the footer image in dp,px or percentage.
Syntax: footerImageHeight
Type: String
6.1.1.20 footerImageWidth
Specifies width of the footer image in dp,px or percentage.
Syntax: footerImageWidth
Type: String
6.1.1.21 slidingMenuIsVisible
This property lets the user toggle the visibility of the sliding menu user
widget so that he can see the changes made to the pass-through properties on
the preview canvas of Kony Visualizer.
Note: Changes made to the Custom Properties will not reflect on the preview
canvas of Kony Visualizer. To see the changes you have made, you must build
and run the app in any of the supported channels.
Syntax: slidingMenuIsVisible

Type: Boolean
6.1.2Custom Properties
6.1.2.1 slidingMenuDirection
Specifies the direction from which the sliding menu will appear.
Syntax: slidingMenuDirection
Type: List Selector (Constant)
Left: Sliding Menu comes in from the left side of the screen.
Right: Sliding Menu comes in from the right side of the screen.
Default: Right
Read/Write: Write
6.1.2.2 headerAnimation
Specifies how the header animation will take place once the sliding menu
is visible.
Syntax: headerAnimation
No Animation: Sliding Menu comes in from the left side of the screen.
Zoom Out: Sliding Menu zooms into view.
Slide In: Sliding Menu header slides in from left or right depending on sliding
menu direction property (slidingMenuDirection).
Default: No Animation
Read/Write: Write
6.1.2.3 profileImageType
Changes the display style/skin of the profile image i.e. regular, circle or
rounded corners.
Syntax: profileImageType
Regular
Rounded Corner
Circle
Default: Regular
Read/Write: Write

6.1.2.4 footerStyle
Specifies the contents of the footer.
Syntax: footerStyle
No Footer
Only Text
Only Image
Image & Text
Default: No Footer
Read/Write: Write
6.1.2.5 slidingMenuSkin
Specifies the id of the skin that will be assigned to the flex container of the
sliding menu. You can modify the skin of the flex to match the theme of your app.
Syntax: slidingMenuSkin
Type: String
Read/Write: Write
Remarks:
Before setting this property one should make sure that the skin with the
specified id exists. For creating the skin refer to the Kony documentation.
6.1.2.6 headingSkin
Specifies the id of the skin that will be assigned to the heading label.
Syntax: headingSkin
Type: String
Remarks:
6.1.2.7 subHeadingSkin
Specifies the id of the skin that will be assigned to the sub-heading label.
Syntax: subHeadingSkin
Type: String
Remarks:

6.1.2.8 menuItemTextSkin
Specifies id of the skin that will be assigned to the menu items text/label
of the sliding menu.
Syntax: menuItemTextSkin
Type: String
Remarks:
6.1.2.9 footerTextSkin
Specifies id of the skin that will be assigned to the footer text/label of the
sliding menu if the footer contains text. (Please refer to footerStyle property for
more details)
Syntax: footerTextSkin
Type: String
Remarks:
6.2 Events
6.2.1Pass Through Events
6.2.1.1 onProfileClick Event
An event callback is invoked by the platform when the profile image of the
sliding menu is clicked.
Syntax: onProfileClick()
6.2.1.2 onFooterClick Event
An event callback is invoked by the platform when the footer of the sliding
menu is clicked.
Syntax: onFooterClick()

6.2.2Custom Events
6.2.2.1 onSlidingMenuShow Event
An event callback is invoked by the platform when the user clicks on the
sliding menu controls icon to show the sliding menu. This lets the developer
(consumer) set some event on when the sliding menu is displayed.
Syntax: onSlidingMenuShow()
6.2.2.2 onSlidingMenuHide Event
An event callback is invoked by the platform when the user clicks on the
sliding menu controls icon to hide the sliding menu. This lets the consumer set
some event on when the sliding menu is hidden from view.
Syntax: onSlidingMenuHide()
6.3 API
6.3.1addMenuItems
This menu is used to add menu items to the sliding menu. It adds all the
options mentioned directly if no options have been previously specified. If menu
options have been specified previously, the new options that are passed as
parameters are appended at the bottom of the list.
Syntax: addMenuItems(menuItems)
Parameters:
menuItems : It is an array of JSONs that are used to populate the menu
items.
The following snippets illustrate the format in which data should be sent to this
function.
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);}}]
//If one wants to create a sub-menu, the format would be that of an

array of JSONS
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);}}]]
Sample Code:
var data= [
{ text:Menu Option 1,src:img1.png, callback:function(){alert(Navigate to

form 1);}},
form 2);}},
form 3);}}
];
this.view.slidingMenu.addMenuItems(data);
6.3.2removeAllMenuItems
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
Sample Code
this.view.slidingMenu.removeAllMenuItems();
6.4 Consuming the Sliding Menu Component through Visualizer

We can simply drag and drop the component into app.
We can set both custom and pass-through properties in the UDW tab of the
component in the right panel of the visualizer as shown below.

6.5 Consuming the Login Component dynamically

You can also consume the login component from the code dynamically.
/* 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 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 Component to the Form*/
this.add(slider);
To add menuItems to the sliding menu please refer to the addMenuItems API.
7 Known Issues
The changes made to the custom properties do not reflect immediately on
the Kony Visualizer Preview Canvas. In order to see the changes, the app
must be run on a supported platform.
Skins are exposed as custom properties. Any changes made to the skins
will not reflect on the Kony Visualizer Preview Canvas.

Sliding Menu User Guide As Per Guidelines

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Sliding Menu User Guide As Per Guidelines

Uploaded by

Copyright:

Available Formats

Kony, Inc.

For Kony Stakeholders only

Document Revision History

2017 Kony, Inc. All rights reserved Page 2 of 16

Copyright 2017 by Kony, Inc.

2017 Kony, Inc. All rights reserved Page 3 of 16

2017 Kony, Inc. All rights reserved Page 4 of 16

Scope of release First version of Sliding Menu Widget

4 Installation and Deployment Guidelines

2017 Kony, Inc. All rights reserved Page 5 of 16

6 Component Developer Guide

2017 Kony, Inc. All rights reserved Page 6 of 16

2017 Kony, Inc. All rights reserved Page 7 of 16

2017 Kony, Inc. All rights reserved Page 8 of 16

2017 Kony, Inc. All rights reserved Page 9 of 16

2017 Kony, Inc. All rights reserved Page 10 of 16

2017 Kony, Inc. All rights reserved Page 11 of 16

2017 Kony, Inc. All rights reserved Page 12 of 16

var data= [{text: Menu Option 1 ,src:imgsrc1.png, callback:function()

//If one wants to create a sub-menu, the format would be that of an

var data= [[ Menu Option 1 , MenuOption1.png,

2017 Kony, Inc. All rights reserved Page 13 of 16

6.4 Consuming the Sliding Menu Component through Visualizer

2017 Kony, Inc. All rights reserved Page 14 of 16

6.5 Consuming the Login Component dynamically

/* creating a component's Object */

2017 Kony, Inc. All rights reserved Page 15 of 16

2017 Kony, Inc. All rights reserved Page 16 of 16

You might also like