Skeleton Screen

Skeleton Screen

Asset Version: 1.0.0
  • Version 1.0.0
Last Published: Apr 21, 2017 By: Kony Team
127 2 0 25
A skeleton screen can be used as an alternative to a spinner to indicate loading progress. It gives a visual cue that things are happening immediately- the skeleton of the page has been loaded and the information is gradually loading.

Requirements

  • Visualizer Enterprise
 

Devices

 

Platforms

 

Features

 

  • Appears as if a screen is loading
  • Indicates users what to expect when screen loads
  • Gives better user experience than pre-loaders to indicate loading progress
  • Useful component when a screen takes long time to load.

Platforms Supported

  • Android Phone Native
  • iPhone Native

Prerequisites

  • Kony account
  • Kony Visualizer Enterprise
  • A Kony Reference Architecture app created in Kony Visualizer

The Skeleton Screen component lets you display an outline of a form before loading the actual form with information. The component populates a skeleton screen containing placeholders with animation until the actual form loads completely. Once the form is loaded, the skeleton screen disappears, and the actual form is rendered on the screen.

When an action takes relatively longer time to load a form, the skeleton screen improves the user experience. The Skeleton Screen component makes users of your app feel that your app is faster than what it actually is. To view an example of a skeleton screen, refer Facebook Skeleton Screen.

The following sections help you use the Skeleton Screen component in your app:

Prerequisites

Before you start using the Skeleton Screen component, ensure the following:

  1. Kony account
  2. Kony Visualizer Enterprise 7.3
  3. A Kony Reference Architecture app in Visualizer. You can create a Kony Reference Architecture app in Visualizer using the following procedure:
    1. Open Kony Visualizer.
    2. On the File Menu, click New Project. The New Project dialog appears.
    3. In the Project Name box, type a name for your project.
    4. Select Kony Reference Architecture, and click Create.

Importing the Skeleton Screen 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 the Skeleton Screen 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.
    skeletonscreen_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.skeletonscreen 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 the component, you must add the component to your app.

Adding a Skeleton Screen Component to your App

You can add a Skeleton Screen component to the FlexForm, FlexContainer, FlexScrollContainer, and Tab widgets.

To add a Skeleton Screen component:

  1. Open your app, and then open the form to which you want to add the component.
  2. Open the library to which you imported the component. To open the library:
    • Click the context arrow of KonyLibrary, point to Open, and select the library in which the component exists.
      library.png
  3. From the Collections tab, drag the component onto the form on the Visualizer canvas. The component is added to the form. You can also see a new element, com.konymp.skeletonscreen in the Components section on the Templates tab.
Note:

Ensure that the component is set to occupy 100 percent width of the device. You can achieve this by setting the width of the parent widget to 100 percent.

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 consists of Custom properties. The Custom properties are user-defined properties based on the use case of the component.

Note:

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

You can also add a Skeleton Screen component dynamically. To do so,

  1. Open your app project in Kony Visualizer.
  2. 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.
  3. Copy and paste the following code snippet in the JavaScript file.
    /* creating a component's Object */
    var skeletonScreen = new com.konymp.skeletonscreen({
          "left":"0%",
          "top":"0%",
          "height":"100%",
          "width":"100%",
          "id":"skeletonScreen"
        }, {}, {});
    /* Setting the component's custom properties */
    skeletonScreen.numberOfRows=5; //If not mentioned, the default value (1) is applied.
    skeletonScreen.animationType="PULSATING";
    /*Adding the SkeletonScreen component to a Form*/
                this. view.add(skeletonScreen);
    /*Invoking the Skeleton Screen*/
               this.view.skeletonScreen.showSkeletonScreen();
    /*Dismissing the skeleton Screen*/
               this.view.skeletonScreen.hideSkeletonScreen();

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

  4. Save the file.

Setting Properties

The properties provided on the Component tab allow you to customize the UI elements in the Skeleton Screen component. You can set the properties directly on the Component tab or by writing a JavaScript. This section provides information on how to set the properties by writing a JavaScript.

Number of Rows
Category: Custom
Description: Specifies the number of rows to be generated for the skeleton screen.
Syntax: numberOfRows
Type: Number
Read/Write: Write
Remarks: The default value of the property is the number of rows that fit on the screen of the device. You can specify values ranging from 1 to 10. The property does not accept zero and negative numbers.
Changing the number of rows dynamically at run time results in unexpected behavior.
Example:
this.view.skeletonScreenID.numberOfRows = 4;

Replace the "skeletonScreenID" with the ID of the component in all examples in this document.
You can find the ID of the component on the Look tab.

Type of Animation
Category: Custom
Description: Specifies the type of animation to be applied to the skeleton screen.
Syntax: animationType
Type: Constant
Read/Write: Write
Remarks: The default value of the property is "PULSATING". You can specify either of the following:
  • PULSATING: the skeleton screen renders with fade-in animation.
  • LOADING: the skeleton screen renders with scrolling-fade animation.
Example:
this.view.skeletonScreenID.animationType= Constant.LOADING;

APIs

The following APIs pertain to the Skeleton Screen component.

showSkeletonScreen

The API makes the skeleton screen visible on the screen.

Syntax
showSkeletonScreen()
Parameters

None

Return Value

None

Example
this.view.skeletonScreenID.showSkeletonScreen();
hideSkeletonScreen

The API hides the skeleton screen.

Syntax
hideSkeletonScreen()
Parameters

None

Return Value

None

Remarks

You can invoke the API in the post-show of the form or whenever you make a service call to fetch the data.

Example
this.view.skeletonScreenID.hideSkeletonScreen();