Confirmation Popup

Confirmation Popup

Asset Version: 1.0.1
  • Version 1.0.1
  • Version 1.0.0
Last Published: May 4, 2018 By: Kony Team
619 0 0 48
Confirmation popup is used when you need user's explicit confirmation to proceed with an action eg. while deleting a record.

Requirements

  • Visualizer Enterprise
 

Devices

 

Platforms


Features: 

  • Easily configurable- set display text and other properties directly from Vizualizer 
  • Fully customizable skins allow you to change look and feel of the component

The Confirmation popup is used when you need user's explicit confirmation to proceed with an action. For example, when deleting a record or while canceling an order placed etc.

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 provide his confirmation on receiving that days order. Using the Confirmation Pop-up component, you can achieve this feature in your app. To achieve the feature, do the following.

  1. Define a Confirmation Pop Up component with Specific Confirmation Message.
  2. Set the Proceed /Okay Text as required for the user to accept and provide confirmation.

The Confirmation 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 Confirmation 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 confirmationpopup component in your app.

Prerequisites

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

  1. Kony account.
  2. Kony Visualizer 8.0.

Importing the Confirmation Pop-up 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.

  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.
    confirmationpopup_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.confirmationpopup 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 Confirmation Pop-up Component into your App

You can add a confirmationpopup component to FlexForms only.

To add a confirmationpopup 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.confirmationpopup, 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 confirmationpopup 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 confirmationpopup = new com.konymp.confirmationpopup(
    {
    	"clipBounds": true,
    	"height": "100%",
    	"id": "confirmationpopup",
    	"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*/
    confirmationpopup.leftButtonText = "Left";
    confirmationpopup.rightButtonText = "Right";
    confirmationpopup.messageText = "Alert";
    confirmationpopup.messageAlignment = constants.CONTENT_ALIGN_BOTTOM_LEFT;
    
    /*Adding the confirmationpopup component to a Form*/
    this.view.add(confirmationpopup);
    	
    

    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 confirmationpopup component. You can set the properties directly on the Component tab or by writing a JavaScript.

General Properties

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

Read + Write

Example:
this.view.confirmationpopup.leftButtonText= "No";
Remarks: The default value for the property is No.
Right Button text
Description: Specifies the text for right button.
Syntax: rightButtonText
Type: String
Read/Write:

Read + Write

Example:
this.view.confirmationpopup.rightButtonText = "Yes";
Remarks: The default value for the property is "Yes".
Message
Description: Specifies the text for Display Message.
Syntax: messageText
Type: String
Read/Write:

Read + Write

Example:
this.view.confirmationpopup.messageText = "Do you really want to reject this Purchase Order";
Remarks: The default value for the property is "Do you really want to reject this Purchase Order?".
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

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

Read + Write

Example:
this.view.confirmationpopup.leftButtonSkin= "konympcp80s9sknbtn";
Remarks: Skin assigned to the property is accepted only by same widget type.
Right Button Skin
Description: This property enables the consumer to change the right button skin of the Confirmation Pop Up component.
Syntax: rightButtonSkin
Widget Type: Button
Read/Write:

Read + Write

Example:
this.view.confirmationpopup.rightButtonSkin = "konympcp80s9sknbtn";
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 Confirmation Pop Up component.
Syntax: messageSkin
Widget Type: Label
Read/Write:

Read + Write

Example:
this.view.confirmationpopup.messageSkin = "konympcp80s9sknlbl";
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 Confirmation Pop Up component.
Syntax: backgroundOverlaySkin
Widget Type: FlexContainer
Read/Write:

Read + Write

Example:
this.view.confirmationpopup.backgroundOverlaySkin = "konympcp80s9sknflx";
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 Confirmation Pop Up component.
Syntax: popoverSkin
Widget Type: FlexContainer
Read/Write:

Read + Write

Example:
this.view.confirmationpopup.popoverSkin = "konympcp80s9sknflx";
Remarks: Skin assigned to the property is accepted only by same widget type.
Left Button Focus Skin
Description: This property enables the consumer to change the left button’s focus skin of the Confirmation Pop Up component.
Syntax: leftButtonFocusSkin
Widget Type: Button
Read/Write:

Read + Write

Example:
this.view.confirmationpopup.leftButtonFocusSkin = "konympcp80s9sknbtn";
Remarks: Skin assigned to the property is accepted only by same widget type.
Right Button Focus Skin
Description: This property enables the consumer to change the right button’s focus skin of the Confirmation Pop Up component.
Syntax: rightButtonFocusSkin
Widget Type: Button
Read/Write:

Read + Write

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

Defining Events

onLeftButtonClick
Description: This event is invoked when the user-touch is released from the left button on the Confirmation Pop Up.
Syntax: onLeftButtonClick(eventobject)
Type: String
Read/Write:

Read + Write

Example:
this.view.confirmationpopup.onLeftButtonClick= function(eventobject){ alert(eventobject.comment); }
Params: eventobject - JSON Object
onRightButtonClick
Description: This event is invoked when the user-touch is released from the left button on the Confirmation Pop Up.
Syntax: onRightButtonClick(eventobject)
Type: String
Read/Write:

Read + Write

Example:
this.view.confirmationpopup.onRightButtonClick= function(eventobject){ alert(eventobject.comment); }
Params: eventobject - JSON Object