Product List & Details

Product List & Details

Asset Version: 1.0.0
  • Version 1.0.0
Last Published: Feb 1, 2018 By: Kony Team
236 0 0 46
A List Detail Interface is a common pattern in computer systems where a master list is displayed, and when an item is selected, more details about that item are displayed in a separate view. This List-Detail pattern caters to the e-commerce applications where all products are listed down in a single form and on click of any product the details page of the product is displayed.

Requirements

  • Visualizer Enterprise
  • Kony Fabric
 

Devices

 

Platforms

Features

  • List-Details layout pre-configured for displaying Products data
  • Easily configurable- customize as per your requirement
  • Connect with any backend data source 

Prerequisites

  • Kony Visualizer v8
  • Kony Fabric v8

Product List-Details is a user defined component which can be used in various commerce apps.

Product List-Details component is a highly configurable component, which basically consists of two views, List view and Details view. List view displays a master list of all products. When a user selects a product, additional information about the selected product is displayed on Details view. Employees can use the built-in features such as Search and Dictionary to quickly navigate through the list and find any product.

Component Functionality

This component shows a list of products along with their thumbnails. Click on any item on the lists, it navigates to the details page containing the details of the items selected.

Use Case

Consider that you are developing a product inventory app that displays a list of all products for the user. When a user selects a product, more information about that product is displayed. You can use Product List-Details component here and develop the app in few hours.

You can import the Product List-Details component into your app (created in Kony Visualizer), and achieve the features of Product List-Details Component. The Product List-Details component facilitates a set of properties that help you customize the fields and functionality if required.

The following sections help you use the Product List-Details component in your app.

Prerequisites

Before you start using the Product List-Details component, ensure you have the following:

  1. Kony account
  2. Kony Visualizer 8.0

Importing the Product List-Details 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 downloaded the component (zip file) on your computer, select the component, and click Open. The Import Marketplace Item dialog appears.
    productld_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.daterangepicker name is displayed by default. If you want, you can rename it.

When you import a component, the component will be imported to Visualizer's workspace, but not directly into your app. So, after importing the component, you must add the component to your app.

Adding a Product List-Details Component into your App

To add a Product List-Details component:

  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.
    Once you drag the component to a form, you will see the component added to the form. You will also see a new element, com.konymp.ProductList 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 will also see a new tab, Component, added on the Properties pane. The Component tab contains assorted properties relevant to the component that allow you to customize the component as required.

You can also add Product List-Details 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 file.
/* creating a component's Object */
var productList= new com.konymp.productlist({
                "clipBounds": true,
                "height": "100%",
                "id": "productList",
                "isVisible": true, 
		 "layoutType": kony.flex.FREE_FORM,
                "left": "0dp", 
		 "masterType": constants.MASTER_TYPE_USERWIDGET,
                "skin": "konympSknFlxBgBlue",
                "top": "0dp",
                "width": "100%",
               }, {}, {});
/* Setting component's properties */
            productList.headerIsVisible = true;
	     productList.titleIsVisible = true;
            productList.hamburgerIsVisible = true;
	     productList.titletext = "Clothes";
/* Adding component to the view */
this.view.add(listdetail);

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

Save the file.

Setting Properties

The Properties provided in the Component tab allow you to customize the UI elements and set constraints for fields in the Product List-Details component. You can set the properties directly on the Component tab or by writing a JavaScript.

Header Visibility
Description: Specifies whether the header in the product list-details component should be visible or not.
Syntax: headerIsVisible
Type: Boolean
Read/Write: Read + Write
Remarks: The default value of the property is true.
Example:
this.headerIsVisible=true;
Hamburger Visibility
Description: Specifies whether hamburger icon is necessary or not.
Syntax: hamburgerIsVisible
Type: Boolean
Read/Write: Read + Write
Remarks The default value of the property is true.
Example:
this.hamburgerIsVisible=true;
Title Visibility
Description: Specifies whether the title should be visible or not.
Syntax: titleIsVisible
Type: Boolean
Read/Write: Read + Write
Remarks

The default value of the property is False.

Example:
this.titleIsVisible=false;
Search Visibility
Description: Specifies whether the search option should be present in the component or not.
Syntax: searchIsVisible
Type: Boolean
Read/Write: Read + Write
Remarks The default value of the property is false.
Example:
this.searchIsVisible=false;
More Option Visibility
Description: Specifies whether the more icon should be visible in the component.
Syntax: moreIsVisible
Type: Boolean
Read/Write: Read + Write
Remarks

The default value of the property is true.

Example:
this.moreIsVisible=true;
Title Text
Description: Specifies what should the title of the Product List-Details component.
Syntax: this.titleText="Mobiles";
Type: String
Read/Write: Read + Write
Remarks The title can be any string value provided by the user.
Example:
this.titleText="Mobiles";

Skin Section

Header Skin
Description: This property enables the user to change the skin of the header.
Syntax: sknHeader
Read/Write: Read + Write
Example:
this.view.componentID.sknHeader = "skin_name";

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 Action tab, click Edit against each event. For more information, refer to Add Actions.

onClickMoreMenu
Description: This event is invoked when the user clicks on the more option.
Syntax: onClickMoreMenu()
onClickHamburger
Description: This event is invoked when the user clicks on the hamburger menu icon.
Syntax: onClickHamburger()
onSearchbarTextChange
Description: This event is invoked when the user types the text in the search bar.
Syntax: onSearchbarTextChange()
searchOnDone
Description: This event is invoked when the user clicks on Done key in the keyboard.
Syntax: searchOnDone()
onClickAddToCart
Description: This event is invoked when the user types the text in the search bar.
Syntax: onClickAddToCart()
fetch
Description: This event is used when a user wants to make network calls to fetch the data for the Product List-Details component.
Syntax: fetch()

APIs

The following are the APIs pertaining to the Product List-Details component.

fetchData

This API enables the user to make network calls to fetch the data.

Syntax
fetchData()
Parameters

objectService, dataModelObject, queryparam, successCallback, and errorCallback.

Return Value

None.

Example
this.view.componentID.fetchData(objectService,dataModelObject,queryparam,successCallback,errorCallback);
insertRecords

This API enables the user to make network calls to insert the records in to storage objects (for example: wishList and addTocart).

Syntax
insertRecords()
Parameters

objectService, dataModelObject, queryparam, successCallback, and errorCallback.

Return Value

None.

Example
this.view.componentID.insertRecord(objectService,dataModelObject,queryparam,successCallback,errorCallback);
fetchSuccessCallback

This API is used as the successcallback handler, when a user wants to make his fetch call and also use component default processing function simultaneously.

Syntax
successCallback()
Parameters

None.

Return Value

None.

Example
this.view.componentID.fetchData(objectService,dataModelObject,queryparam,this.view.componentId.fetchSuccessCallback,function()alert(“failed);));
fetchErrorCallback

This API is used as the failure call handler, when a user wants to make his fetch call and also use component default processing function simultaneously.

Syntax
fetchErrorCallback()
Parameters

None.

Return Value

None.

Example
this.view.componentID.fetchData(objectService,dataModelObject,queryparam,this.view.componentId.fetchSuccessCallback.bind(this)),this.view.componentId.fetchErrorCallback.bind(this));
setDataToList

This api enables the user to map the data to the segment list of Product List-Details screen.

Syntax
setDataToList()
Parameters

data, and widgetDataMap.

Return Value

None.

Example
this.view.componentID.setDataToList(processedData,widgetDataMap);

Configuring the Kony Fabric App

When you import the Product List-Details component into Kony Visualizer, a Kony Fabric app (with name same as your Visualizer Project Name) is also uploaded to your Kony account.

When you import the Product List-Details component into Kony Visualizer, a Kony Fabric app (with name same as your Visualizer Project Name) is also uploaded to your Kony account.

When you import the Product List-Details component into Kony Visualizer, a Kony Fabric app (with name same as your Visualizer Project Name) is also uploaded to your Kony account.

Note:
  • The name of the Kony Fabric app is same as your Kony Visualizer Project Name.
  • The Kony Fabric app fails to upload if already any app exists with the same name.

 

Using the Kony Fabric console, you can configure the app-related orchestration and object services, and then publish the app.

The following sections help you use the Kony Fabric app.

 

Importing Sample data

Sample product data is bundled with the Product List-Details component. The sample data is available in the productDB.zip file located in your Visualizer workspace at \<works pace>\<project name>\resources\mobile\common\raw\ productDB.zip

To import the sample data, do the following:

  1. Log on to your Kony account. The Dashboard page appears by default.
  2. In the left pane, click the Apps menu. The Custom Apps page appears.
  3. Find and click the ListDetail (your project's name) app. .
  4. Click the Publish tab. The Publish tab opens. You must publish the app at least once before importing the sample data.
  5. In the Publish tab, In your environment box, in the RUNTIME CONSOLES section, click object services icon (highlighted in the following figure). The Object Services page appears.

    productld_runtime.png

  6. Find the productDB object service by typing in the app name search box. Click import icon (highlighted in the following figure) and select the productDB.zip file located in your Visualizer workspace at \<works pace>\<project name>\resources\mobile\common\raw\productDB.zip

    productld_objserv.png
    productld_objserv1.png

Configuring Kony Fabric Services

The product Kony Fabric app contains a set of orchestration, and objects services by default. Using the Kony Fabric console, you can view and modify these services and also create new services.

Orchestration Service

Orchestration services are used to integrate multiple services and form a single service. The productOrchestration orchestration service fetches all the data objects in the mobile app in one go (to reduce the number of service calls). If you don't want to fetch all the data objects in one go, then delete the productOrchestration orchestration service (and the productionListOS which is a service driven object or wrapper on productDB orchestration service)

To view the orchestration services, do the following:

  1. After logging on to your Kony account, open the product(your project's name) app.
  2. Click the Orchestration sub-tab. The Orchestration sub-tab opens with a list of services.
  3. Click on the productOrchestration service. The Service Definition tab of the selected orchestration service opens by default.
  4. Click Operations tab to view the operations of the selected service.

    productld_orchserv.png

    productDB service contains the productOrchestration operation. The operation fetches and combines all the data objects from productDB.

Object Services

The object services help you define the app data model and map it with relevant back end services. In the object service, you can view all the objects of the data model and the default fields and relationships of each object. To learn more about object services and mapping, see Object Services.

By default, the Product List-Details component is mapped with the Kony Fabric storage. The productDB is the data model schema for the Kony Fabric data storage.

The product Kony Fabric app contains the following object services:

  1. productDB service contains the Product Data Model
  2. productListOS service acts as a service driven object for the orchestration service (wrapper around the orchestration service productOrchestration).

To view the object service and its operations, do the following:

  1. After logging on to your Kony account, open the product Kony Fabric app.
  2. Click the Objects sub-tab. The Objects sub-tab opens with a list of data models.
  3. Click any one of the data models. For example, productDB. The Service Definition tab of the selected service opens by default.

    productld_params.png

Mapping Product List-Details Data Model (Object services) with a back end Data Source

Product List-Details component comes pre-configured with Product Data Model (by default mapped to Kony Fabric Storage). The data model contains multiple objects and fields related to product information. The following diagram illustrates the objects in the data model and relationships among them.

Click here for the Product List -Details entity relationship diagram:

The app data model is created as an object service. Using the Kony Fabric console, you can modify the fields and relationships of the objects in the data model. For example, you can add new fields to objects and define new relationships between objects.

By default, the product Kony Fabric app is mapped to the Kony Fabric storage. You can easily decouple the app data model with the Kony Fabric storage and map it with other back end data source.

To map with a back end data source, do the following:

  1. On the product Kony Fabric app page, click the Configure Services tab, and then click Objects sub-tab. The Objects sub-tab opens along with the productD object service listed.
  2. Click the context menu icon of productDB as shown in the following figure. The context menu opens.

    productlddm_cloneapp.png

  3. Click Clone App Data Model. A copy of Product Data Model is created and the New Object Service page appears.

    productlddm_cloneserv.png

  4. In the Name box, type a name for a copy of the Product Data Model.
  5. Click the context menu arrow to expand the Endpoint Type list. A drop-down list opens.
  6. Select the required back end data source that you want to map and click SAVE & CONFIGURE.

Modifying the Data Model

The productDB object service allows you to modify the app data model as you require. You can edit(or)delete(or)add objects and fields in the data model based on your requirement. Every object in the object service contains the following sections:

Fields

In the Fields section of an object, you can add new fields and edit and delete the fields associated with the object. Every object has a set of fields that you cannot edit or delete. For example, the CreatedBy and CreatedDataTime fields of the user object cannot be modified.

Relationships

In the Relationships section of an object, you can define new relationships with other objects and edit and delete existing relationships of the object.

For more information, refer to Object Services.

After making the modifications in the app data model you also need to change the data object mappings with UI widgets. Refer to the steps mentioned in Mapping data from Object Services section.

The app fetches all the data at once (to reduce the number of service calls) using the productOrchestration operation of the productListOS. The productListOS is a service driven object (wrapper) of the productOrchestration orchestration service.

If you do not want the mobile client to fetch all the data at once, you can delete the services and directly bind the data objects of productDB and associate the data objects to the UI of respective widgets.

However, If you want to fetch all the data at once on the client side, then after adding/deleting an object from the app data model you need to add/delete that object in the orchestration service productOrchestration.

Note:

You can also delete the existing Product Data Model and use a completely new app data model. In that case, you need to associate the new object services with the UI. Refer to the steps are mentioned in Mapping data from Object Services section.

 

Mapping UI with Data from Object Services

You can easily map UI widgets with object services. For example the following image illustrates the process of mapping the data to the List view segment.

productld_mapping.png

As shown above:

  • The List view consists of thumbnail, BrandNameList, Rating, PriceList, and BrandDetailsList widgets.
  • mediaContent, productName, ratingValue, listCost and shortDescription are the corresponding object services in the Kony Fabric app, which is associated with Visualizer app.

Here is a sample code which is used to map the widgets with respective object services.

productList["thumbnail"] = media["mediaContent"];
productList["lblBrandNameList"] = product["productName"];
productList["lblRating"] = rating["ratingValue"];
productList["lblPriceList"] = listPrice["listCost"];
productList["lblBrandDetailsList"] = product["shortDescription"];
Note:

The app fetches all the data at once (to reduce the number of service calls) using the productOrchestration operation of the productListOS. The productListOS is a service driven object (wrapper) of the productOrchestration orchestration service. If you do not want the mobile client to fetch all the data at once, you can delete the services and directly bind the data objects of productDB and associate the data objects to the UI of respective widgets.

Modifying the Product List-Details UI

You can easily modify the UI of the Product List-Details component to suit your requirements.

Example:

The following procedures explain you how to modify UI elements.

To modify the List view UI, do the following:

  1. In the Project explorer, click the Template tab. A list of templates is displayed.
  2. Go to Mobile >> Segments >> datacontainer (segRowTemplate)
  3. Modify/ Delete/ Add widgets to the datacontainer template as per your requirement.
  4. You can also configure data mapped to a widget. See Mapping UI with Data from Object Services.

The following figures illustrate how to remove the lblBrandDetailsList Label Widget from the row template.

productld_modify.png

productld_modify1.png

 

To modify the Details view, do the following:

  1. In the Project explorer, click the Template tab. A list of templates is displayed.
  2. Go to Components >> com.konymp.listdetail >> listdetail >> flxDetailsScreen
  3. Modify/ Delete/ Add widgets as per your requirement.
  4. You can also configure the data mapped to a widget. See Mapping UI with Data from Object Services.

The following figure illustrates how to re-arrange the flxProductInfo flex.

productld_modify2.png

The following figure reflects the flxProductInfo flex after the Move Down functionality.

productld_modify3.png

Similarly, you can delete other widgets or rows. If you wish to add new rows in details view, you can directly copy one of the existing flexes or add a new flex. The Product List-Details component also comes with a few additional flexes. To use the additional flexes, turn on the visibility of the required flexes.