Alert Popup

Alert Popup

Asset Version: 1.0.2
  • Version 1.0.2
  • Version 1.0.1
  • Version 1.0.0
Last Published: Jun 12, 2018 By: Kony Team
227 0 0 57
Alert popup can be used to notify user about any new information- be it an error or a transaction success message. The popup makes sure that user reads the message, for he/she must press the OK button before moving forward in app's flow.

Requirements

  • Visualizer Enterprise
 

Devices

 

Platforms


Features: 

 

  • Easily configurable- set the alert message text, specify it's alignment, change the OK button text directly from Visualizer 
  • Fully customizable skins allow you to change look and feel of the component

The Alert popup can be used to notify user about any new information such as an error message or a transaction success message. The popup makes sure that user reads the message, for he/she must press the OK button before moving forward in app's flow.

Use case

Consider a case that you want to develop an app for Milk tracker that helps users to track the Milk delivered daily. The App requests the user to proceed with the placed order. Using the Alert Pop-up component, you can achieve this feature in your app. To achieve the feature, do the following.

  1. Define a Alert Pop Up component with Specific Prompt Message.
  2. Set the OK text as required for the user to click and proceed.

The Alert Pop-up component is a ready-to-use component. You can import the component into your app (created in Kony Visualizer), and can achieve the features without developing it from scratch. The Alert Pop-up component also facilitates a set of properties, events, and APIs that helps you customize the UI elements and functionality, if required.

The following sections help you use the alertpopup component in your app.

Prerequisites

Before you start using the Alert Pop-up component, ensure the following:

  1. Kony account.
  2. Kony Visualizer V8.

Importing the Alert Pop-up Component

Before you start importing the component to Kony Visualizer, you must download the component from Kony Marketplace website.

You can import the marketplace components only into the apps that are of the Kony Reference Architecture type.

  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 have downloaded the component (zip file) on your computer, select the component, and click Open. The Import Marketplace Item dialog appears.
    alertpopup_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.alertpopup 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 Alert Pop-up Component into your App

You can add a alertpopup component to FlexForms only.

To add a alertpopup component:

  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.alertpopup, under the component 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 to Button Widget.

You can also see that a new Component tab, is added on the Properties pane. The component tab contains assorted properties relevant to the component that allows you to customize the component as required. The properties on the Component tab are categorized as General properties. The General properties are the default properties of individual widgets in the component.

Note:

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

You can also add a alertpopup 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 a component's Object */
    var alertpopup = new com.konymp.alertpopup({
    		"clipBounds": true,
    		"height": "100%",
    		"id": "alertpopup",
    		"isVisible": true,
    		"layoutType": kony.flex.FREE_FORM,
    		"left": "0dp",
    		"masterType": constants.MASTER_TYPE_USERWIDGET,
    		"skin": "slFbox",
    		"top": "0dp",
    		"width": "100%"
    }, {}, {});
     /*Setting the component's properties*/
    alertpopup.messageText = "Info Alert";
    alertpopup.ButtonText = "okay";
    alertpopup.messageAlignment= constants.CONTENT_ALIGN_BOTTOM_RIGHT;
    		
    /*Adding the alertpopup component to a Form*/
    this.view.add(alertpopup);
    	
    

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

  2. Save the file.

Setting Properties

The properties provided on the Component tab allow you to customize the UI elements in the alertpopup component. You can set the properties directly on the Component tab or by writing a JavaScript.

General Properties

Button Text
Description: Specifies the text for the button.
Syntax: buttonText
Type: String
Read/Write:

Read + Write

Example:
this.view.componentID.buttonText= "Ok";
Remarks: The default value for the property is OK.
Message
Description: Specifies the text for Alert Pop up display message.
Syntax: messageText
Type: String
Read/Write:

Read + Write

Example:
this.view.componentID.messageText = "Information Alert";
Remarks: The default value for the property is "You’ve just displayed this awesome Pop Up View".
Message Alignment
Description: Specifies the content alignment for header text.
Syntax: messageAlignment
Type: Constant
Read/Write:

Read + Write

Example:
this.view.componentID.messageAlignment = constants.CONTENT_ALIGN_BOTTOM_LEFT;
Remarks: The default value for the property is "constants.CONTENT_ALIGN_CENTER".

Skin Section

Button Skin
Description: This property enables the consumer to change the button skin of the Alert Pop Up component.
Syntax: buttonSkin
Widget Type: Button
Read/Write:

Read + Write

Example:
this.view.componentID.buttonSkin = "konympap80s9sknbtn";
Remarks: Skin assigned to the property is accepted only by same widget type.
Message Skin
Description: This property enables the consumer to change the message skin of the Alert Pop Up component.
Syntax: messageSkin
Widget Type: Label
Read/Write:

Read + Write

Example:
this.view.componentID.messageSkin = "konympap80s9psknlbl";
Remarks: Skin assigned to the property is accepted only by same widget type.
Background Overlay
Description: This property enables the consumer to change the Background Overlay skin of the Alert Pop Up component.
Syntax: backgroundOverlaySkin
Widget Type: FlexContainer
Read/Write:

Read + Write

Example:
this.view.componentID.backgroundOverlaySkin = "konympap80s9sknflx";
Remarks: Skin assigned to the property is accepted only by same widget type.
Popover Flex Skin
Description: This property enables the consumer to change the popover flex skin of the Alert Pop Up component.
Syntax: popoverFlexSkin
Widget Type: FlexContainer
Read/Write:

Read + Write

Example:
this.view.componentID.popoverFlexSkin = "konympap80s9sknflx";
Remarks: Skin assigned to the property is accepted only by same widget type.
Button Focus Skin
Description: This property enables the consumer to change the button’s focus skin of the Alert Pop Up component.
Syntax: ButtonFocusSkin
Widget Type: Button
Read/Write:

Read + Write

Example:
this.view.componentID.rightButtonFocusSkin = "konympap80s9sknbtnFocus";
Remarks: Skin assigned to the property is accepted only by same widget type.

Events

onButtonClick
Description: The event is invoked when the user-touch is released from the button Ok of the Alert Pop Up.
Syntax: onButtonClick()
Type: String
Read/Write:

Read + Write

Example:
this.view.componentID.onButtonClick= function()
{
	alert(“Button Clicked”);
}