Design Guidelines For Kony Apps

Create an App with Kony Reference Architecture

When you create an app with Kony Reference Architecture, you can start by building the app's data model in Kony Fabric Console. You can add various back-end services and operations that your front-end client app requires. You can then build your front-end client app with Kony Visualizer. Kony Visualizer provides you with a way to interface your front-end client app with your back-end Kony Fabric app, as described on Kony Visualizer User Guide and in Kony Fabric User Guide.

Build Your Front-End Client App

After you have created your Object services by using Kony Fabric, you can build your front-end client app with Kony Visualizer.

You can connect your front-end client app to your back-end Kony Fabric app and the services it offers, and then generate the object model. To do so, on the Data & Services panel, click the hamburger menu near the Refresh button, and then click either Create New App or Link to Existing App.

You can select the channels for which you want to build your app, such as Desktop, Mobile, Android Wear, or Tablet. The Reference Architecture Extensions feature is not available for the Apple Watch channel. You can then design the user interface of your app by using various widgets available on Kony Visualizer. For more information on channels, widgets, and API functions that are available on Kony Visualizer, refer Kony Visualizer User Guide, Kony Visualizer Widget Programmer's Guide, and Kony Visualizer API Programmer's Guide.

Create a Kony Reference Architecture Project

You must follow these steps to create a Kony Reference Architecture project on Kony Visualizer:

On Kony Visualizer, click File, and then click New Project. Kony Visualizer displays the New Project dialog box with the types of apps that you can create.
Select the Create Custom App option, and click Choose. Kony Visualizer again displays the New Project dialog box with the available project types
Select the Kony Reference Architecture project type.
Type the name of your project in the Project Name field. You must follow these guidelines while specifying the name of your project:
- The name must always start with an alphabet.
- The name should contain only alphabets and digits.
- Special characters and reserved words are not allowed.
- The name must contain more than three characters.
Click Create. Kony Visualizer creates the project.

Build the App's User Interface

Your client app's user interface displays one or more screens, also called views. Views can be forms, templates, or masters. Every view must have at least one of these. More typically, a view requires multiple forms, templates, or masters. The process of creating views is described in the Kony Visualizer User Guide.

After creating at least one screen for your app using forms, you can add widgets to the forms. Widgets provide your app with the user interface elements that it needs. These include buttons, menus, text labels, calendars, and more. They also give your app access to the functionality of the user's device through the use of a camera widget, a phone, widget, and so forth. The process of populating your app's forms with widgets is presented in the Kony Visualizer User Guide.

Add Functionality to Your App

Each time you add forms to your app, Kony Visualizer automatically adds a controller for each form and creates a folder in your project to put it in. You'll find the controllers for your forms in the project tree under the channel that you're developing the app for. So if you add a form called frmMain to your project and you're developing the app for Android and iOS, you'll find folders for the frmMainController in the Android and iOS branches of the project tree. Whenever you change the names of your forms and templates, Kony Visualizer automatically renames the controllers associated with them.

Likewise, when you add templates to your apps, Kony Visualizer adds the corresponding controller for each template. Renaming your template automatically renames its controller.

To add functionality to your app, you add your custom JavaScript code to the controllers in your app. The controller for a form or template is the only object that has access to the form or template. Only the controller can performs actions on it.

Your app may also contain models, one for each backend data source. The data sources can be local on the device or remote servers that are accessed across the network. If you need to, you can add custom code to your app's models to enhance or customize the model's functionality.

In addition, you can add actions to your forms just as you would with any other Kony Visualizer app. When you do, Kony Visualizer automatically creates an action controller for your actions. However, this is an autogenerated file and you should not make any changes to it. If you do, they will be overwritten the next time the file is regenerated.

Build Your App's Data Model

The steps required to build the data model of your app are as follows:

Build a Kony Fabric app
Configure Identity Services
Create an Object Service
Configure the Data Model

Build a Kony Fabric App

To integrate your front-end client app with the back-end services that you want the app to access through Kony Fabric, you must first create a Kony Fabric app by using Kony Fabric Console. For more details on how to do so, refer Kony Fabric documentation.

In this walkthrough, we will create a simple service that integrates with SAP data in the back end. Although your data may reside in a different backend storage system, the basic workflow for building your app's data model will be very similar to what's shown here. In this walkthrough, we will assume that you have already created your Kony Fabric app.

For our example, the Kony Fabric app is called Work Order. The Work Order Kony Fabric app gets its data from SAP. In the Kony Fabric console, the results will resemble the following illustration.

Configure Identity Services

Select the app you just created. In this example, it's the Work Order app.
Click the Configure Services tab.
Choose Identity Services.
Click the Configure New button.
Set the identity's name.
Select the Type of Identity. In this example, it will be Kony SAP Gateway.
Set the address and port of the gateway server.
Supply the remaining information such as the login credentials and so forth. You screen will resemble the following.

Create an Object Service

Next, you create an object service that will provide your front-end client app with access to the data in the data store. In this example, the client app on the device or desktop will access the work order data in the SAP database.

In the Configure Services tab in the Kony Fabric console, click Objects.
Select the Configure New button.
Set the name and endpoint type. In this example, the endpoint type is SAP.
Select Existing Identity Provider and enter the name of the identity service you create in Step 2. This example uses the name identitysap.
Fill in the other information such as User ID, Password, and so forth.
Click the Save & Configure button.

Configure the Data Model

At this point, you need to configure the data model your service will use.

Continuing from #6 in Step 3, click the Generate button.
In dialog box that appears, select the object service you want to use. The Kony Fabric console then displays a list of objects offered by the selected object service.
Choose the object or objects that you want your client app to have access to. In this example, we will select only one object, as shown in the following figure.
Click Next.
In the dialog box that appears, click Generate. Your data model is now generated automatically by the system.
Click the Publish button to publish your Kony Fabric data service app.

Import Kony Visualizer Apps into Kony Visualizer Classic

If you create your app on Kony Visualizer and you decide to import it into Kony Visualizer Classic so that you can integrate your app with Kony Fabric backend services, you will need to generate ObjectModel and ObjectModelExtension classes for your app. To do so, use the following steps.

From the Kony Visualizer main menu, choose File and then Import.
In the Import Kony Application dialog box, ensure that Select project root is selected.
Click the Browse button, navigate to your Kony Visualizer project, select it, and click OK.
After the Kony Visualizer project loads, point your mouse cursor at the Kony Fabric channel in the Kony Visualizer Classic Project pane.
Click the down arrow that appears and choose Generate Object Model from the context menu.
If prompted to do so, specify the name of your Kony Fabric app, as well as the object services you want to use in your front-end Kony Visualizer app.

A Sample FormController

The following sample code shows the partial implementation of a FormController object. Note that the implementation is in RequireJS format, which is mandatory for Kony Reference Architecture applications.

define( {     onIPRecievedFromIPControl: function (masterController1, newtext)      {         if (null != newtext)          {             alert(newtext);         }     },      AS_Button_6c7c9d022bcc4a61a603aa3c89110efe: function (eventobject)      {         this.view.defaultAnimationEnabled = false;         this.view.master1.onIPAddressSet = this.onIPRecievedFromIPControl;         this.view.master1.IPAddress = "212.212.100.110";     } });

Note: In an MVC project, a top-level FlexContainer is added by default when you create a new template.