Build the App from Scratch

Now that you have had the experience of working with the Employee Directory sample app and modifying the sample data, we can now move to an advanced section that helps you build the application from scratch.

You can create the Employee Directory app by using several components that are readily available on Kony Marketplace and requires minimal coding.

Follow these steps to create the Employee Directory app:

Create a New Project and Forms

  1. Launch and sign in to Visualizer.
  2. Select File -> New Project.

    /Users/kh2233/Desktop/Screen Shot 2018-05-07 at 11.06.22 PM.png
  3. In the New Project wizard, select Create Custom App and click Choose.

  4. In the pane that appears, provide the project name as EmpDirectory, select Kony Reference Architecture as Project Type (selected by default), and click Create.



  5. Once you have created the project, expand the Mobile section in the project explorer. Right-click on Forms and select New Form.

    /Users/kh2233/Desktop/Screen Shot 2018-05-07 at 11.23.58 PM.png

  6. Right-click on the newly created form and select Rename to rename the form as frmLogin.
  7. Similarly, create another form and name it as frmHome.

back to top

 

Download Components from Kony Marketplace

Once you have created the forms, download the necessary components from Kony Marketplace. You can access Kony Marketplace from the Visualizer menu as shown here.

  1. Select Browse from the Marketplace menu.

    /Users/kh2233/Desktop/Screen Shot 2018-05-07 at 11.41.23 PM.png

    The Kony Marketplace screen appears as shown.

  2. Search for the Login component, and navigate to its detail page.
  3. Select Collection Library from the Import To drop-down list, and click Import.

    /Users/kh2233/Desktop/Screen Shot 2018-05-08 at 1.42.30 AM.png
  4. In the Import Marketplace item dialog, provide the relevant information for Library Name and Collection Name. The Component name field is auto-populated.

  5. Follow the steps 1-4 to import the List-Detail component.
  6. Both these components are now available under My Libraries -> Collection.

    /Users/kh2233/Desktop/Screen Shot 2018-05-08 at 1.49.16 AM.png

back to top

 

Configure the Login Form

  1. Open the frmLogin form and drag the Login component from the collection library onto the form.
  2. Once the Login component is placed on the form, you can choose to edit its properties from the Properties tab.

back to top

 

Configure the Home Form

  1. Open the frmHome form and drag the List-Detail component from the collection library onto the form.
  2. Once the List-Detail component is placed on the form, you can choose to edit its properties from the Properties tab.

back to top

 

Bind the Components

Placing the components onto the respective forms takes care of both the user interface and back-end processes. We now need to bind both the components together. This binding helps you navigate to the application landing page after a successful login.

Follow these steps to achieve the same:

  1. Open frmLogin from the project explorer and select the Login component that has been added to the form.

    /Users/kh2233/Desktop/Screen Shot 2018-05-08 at 2.40.28 AM.png

  2. Select the Action tab from the Properties pane. In the Login Option section, click Edit against loginSuccessEvent.

    /Users/kh2233/Desktop/Screen Shot 2018-05-08 at 2.40.38 AM.png

  3. In the action editor that appears, select the Navigate to Form action. This action populates all the available forms at the lower left corner. Select frmHome as the destination form.

    /Users/kh2233/Desktop/Screen Shot 2018-05-08 at 2.44.18 AM.png

You can now build and publish the app to see the Employee Directory App working against the sample data set.

back to top