Employee Directory

Employee Directory

Asset Version: 1.0.0
  • Version 1.0.0
Last Published: Apr 27, 2017 By: Kony Team
507 0 2 54
The app lets you search, discover and know more about your coworkers. It comes preconfigured with Login, Menu, Filter and List/Detail interface with Search and Dictionary functionalities. Set some properties, map the app data model with your backend and the app will be up and running in a few hours.

App Preview Code

  • ZBSV4
 

Requirements

  • Visualizer Enterprise
  • MobileFabric
 

Devices

 

Platforms

Features

  • Easily configurable - customize as per your requirement
  • Connect with any backend data source
  • Login using Office365, LinkedIn, facebook, Touch ID or custom identity service
  • List Details layout with Search, Filter, Dictionary and Sliding menu functionalities
  • Preconfigured Employee app data model

Platforms Supported

  • Android Phone Native
  • iPhone Native

Prerequisites

  • Kony account
  • Kony Visualizer Enterprise 7.3
  • Kony MobileFabric 7.3

Paul Marconi Looks great but I cannot import into Vizualizer 7.3

When importing the zip file I get the following exception KL: Import failed. Error message: Invalid library zip file! This happens for all library projects.

Rajesh Kumar

Hi Paul, Employee directory is a complete application. So please follow the steps mentioned below and the same documented under documentation tab. 1. On the File menu, point to Import, and click Local Project. The Import Kony Project dialog appears. 2. Click Select archive file. 3. Select Import MobileFabric Services. 4. Click Browse. The Open dialog appears. 5. Navigate to the location where you downloaded the app (zip file) on your computer, select the app, and click Open. The EmployeeDirectory app opens in Visualizer.

The Employee Directory app helps an employee of an organization to search and view other employee details, such as full name, photo, designation, department, reporting manager, and contact details. The app is built with login, sliding menu, filter, and list details (with search and dictionary) functionalities. You can set the required properties and events, map the app data model with your back end service, and build the app. Now, the Employee Directory app is ready to use.

Employee Directory App Functionality

This section explains the functionality of the Employee Directory app.

The following is the login screen of the app:

empdir_login.PNG

Once a user logs on to the app successfully, the Directory screen appears as shown in the following figure:

empdir_listdetails.png

The Directory screen contains the following UI elements:

  1. Hamburger menu icon (upper right of the screen): When a user taps the menu icon, a sliding menu appears. The sliding menu contains user profile photo (who logged on to the app), menu items that navigates to the major modules of the app, and Logout option at the bottom.
    empdir_slidingmenu.png
  2. Hamburger menu icon (upper left of the screen): When user taps the menu icon, the Filter By menu appears. The Filter By menu allows users to filter the search results by department and designation.
    empdir_filterby.png
  3. Search box: Using the search box, a user can type the name of the employee and get the results.
    empdir_searchdetails.png
  4. List-Details: The Directory screen appears with the master list of employees. From the list of employees, when a user taps an employee, a screen appears showing all details of the selected employee.
    empdir_details.png

The following sections help you use the Employee Directory component.

Prerequisites

Before you start using the Employee Data Model, ensure you have the following:

  1. Kony account
  2. Kony Visualizer 7.3
  3. Kony MobileFabric 7.3
  4. For Android apps, add the USE_FINGERPRINT permission to your app project. You can add the permission using the following procedure:
    1. Open the application, and click Project Settings icon. The Project Settings dialog appears.
      empdir_andrperm.png
    2. Click the Native tab, and then click the Android sub-tab.
    3. In the Manifest Properties section, click the Permissions tab.
    4. Select the USE_FINGERPRINT option from the left box, and click Add. Make sure that the USE_FINGERPRINT option is moved to the right box.
    5. Click Finish.

Importing the Employee Directory App

Before you start importing the component to Kony Visualizer, you must download the component from the Kony Marketplace website.

  1. Open Kony Visualizer.
  2. On the File menu, point to Import, and click Local Project. The Import Kony Project dialog appears.
  3. Click Select archive file.
  4. Select Import MobileFabric Services.
  5. Click Browse. The Open dialog appears.
  6. Navigate to the location where you downloaded the component (zip file) on your computer, select the component, and click Open. The EmployeeDirectory app opens in Visualizer.

Once you import the app, you will also see a new set of elements under the Components section on the Templates tab.

After importing the app, 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 example, refer to Button Widget.

Configuring the UI of the Employee Directory App

The Employee Directory app consists of the following components:

  • Login component is a login form that every mobile app needs to authenticate its users. The Login component provides multiple options to log on to the app. A user can log on either by providing user credentials, or by using fingerprint. You can customize the component as you require. To learn how to customize and configure the component, refer to the Setting Properties section of the Login component documentation.
  • Sliding Menu component is a ready-to-use Hamburger Menu. The Sliding Menu component contains a Hamburger menu icon and a sliding menu. When a user clicks the Hamburger menu icon, the sliding menu slides on to the screen either from the right side or from the left side of the screen. To learn how to customize and configure the component, refer to the Setting Properties section of the Sliding Menu component documentation.
  • List-Details component consists of two views, List view and Details view. List view displays a master list of all employees. When a user selects an employee, additional information about the selected employee is displayed on the Details view. The component contains built-in features such as Search and Dictionary to quickly navigate through the list and find any employee. To learn how to customize and configure the component, refer to the Setting Properties section of the List-Details component documentation.

Configuring the EmployeeDirectoryApp MobileFabric App

When you import the Employee Directory app into Kony Visualizer, a MobileFabric app, EmployeeDirectoryApp, is uploaded to your Kony account.

Note:

The EmployeeDirectoryApp MobileFabric app fails to upload if already any MobileFabric app exists with the same name (EmployeeDirectoryApp). If you do not want to use the existing EmployeeDirectoryApp MobileFabric app, rename or delete the existing MobileFabric app, delete the Employee Directory project from Visualizer, and import it again.

The Employee Directory MobileFabric app contains a set of identity, integration, orchestration, and objects services by default. Using the MobileFabric console, you can configure the services as you require and then publish the app.

The following sections help you configure the EmployeeDirectoryApp MobileFabric app.

Importing Sample data

Sample employee data is bundled with the EmployeeDirectoryApp zip file. The data is available as the EmployeeModelSchema.zip file in the app zip file. You can find the data zip file in Visualizer workplace at \<works pace>\<project name>\resources\mobile\common\raw\EmployeeModelSchema.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 EmployeeDirectoryApp.
  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.
    empdir_objserv.png
  6. Find the EmployeeModelSchema object service by typing app's name search box. Click import icon (highlighted in the following figure). The Open dialog appears.
    empdir_objservimp.png
  7. select the EmployeeModelSchema.zip file available in your Visualizer workspace at \<works pace>\<project name>\resources\mobile\common\raw\EmployeeModelSchema.zip.

Configuring User Credentials Authentication

Kony User Repository is a repository service available in the EmployeeDirectoryApp MobileFabric app. The repository service helps you authenticate employees when they try to log on to the Employee Directory app using the user credentials. The service also provides you an option to import your users list as a CSV file. Ensure that the CSV file conforms to the sample.

To view the Kony User Repository in EmployeeDirectoryApp:

  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 EmployeeDirectoryApp app. The EmployeeDirectoryApp page appears along with the Configure Services tab and the Identity sub-tab opened by default.
    Note:

    You can find the app by typing the app's name in the Search box.

  4. Click Kony User Repository. The Cloud User Repository page appears with a list of employees.

For more information, refer to Kony User Repository.

Configuring Social Authentication

The Login component comes along with social authentication embedded in it. With the integration of social authentication, the app users can log into your app directly using their social website credentials. The Login component contains icons of Facebook, LinkedIn, and Office 365 at the bottom of the screen. When a user taps on any one of the icons, the respective login form opens.

The EmployeeDirectoryApp app contains a set of identity services related to social authentication. The identity services set helps you invoke the social authentication process when a user tries to log into your app using the social website credentials. When a user taps any of the social website icons, the corresponding identity service gets invoked. For example, if a user clicks the Facebook icon, the Facebook service is invoked, and then the Facebook login screen opens using which the user can log into your app. The following are the available identity services.

  • reusableFacebookLogin: provides the oAuth login service for Facebook.
  • reusableLinkedinLogin: provides the oAuth login service for LinkedIn.
  • reusableOffice365Login: provides the oAuth login service for Office 365.

To enable social authentication, you must specify client details (client ID and client secret) for each identity service. You can generate the client details for each identity service by logging on to the respective social website as a developer and creating an app in it. For example, if you want to enable the Facebook social authentication for your app, log on to https://developers.facebook.com/ and create an app. When you create an app, the client ID and client secret key are generated.

The following procedure explains how to specify the client details for the reusableFacebookLogin identity service.

  1. After logging into your Kony account, open the EmployeeDirectoryApp app. The EmployeeDirectoryApp page appears along with the Configure Services tab and the Identity sub-tab opened by default.
  2. Click reusableFacebookLogin. The FacebookLogin page opens.
  3. In the Client ID box, type the client ID of the Facebook that you generated.
  4. In the Client Secret box, type the client secret key.
  5. Click Save.

You can follow the above procedure to specify the client details for other identity services.

Configuring Identity Service Authentication

An identity service allows you to connect to your existing user accounts directory. For example, if you are maintaining your user account details in Microsoft Active Directory, using the identity service, you can connect to the Active Directory and enable authentication of users to access your application. In the MobileFabric console, you can create identity services. For more information, refer to Identity Services. The Login component allows you to associate with identity services for user authentication.

Note:

Ensure that you know the name of the identity service name to which you want to associate.

To associate the Login component with an identity service, do the following:

  1. In Kony Visualizer, open your app and the form on which Login component is placed.
  2. Select the Login component, and click the Component tab on the Properties pane.
  3. In the Provider Name box, type the name of the identity service to which the component to be associated.

Configuring Orchestration Service

Orchestration services are used to integrate multiple services and form a single service. The EmployeeStorageObjects orchestration service is used to fetch all data objects in to the mobile app at one go to reduce the number of service calls. If you do not want to fetch all data objects at one go, delete the EmployeeStorageObjects orchestration service and StorageObjectService, which is a service driven object or wrapper on the EmployeeStorageObjects orchestration service

To view the orchestration services, do the following:

  1. After logging on to your Kony account, open the EmployeeDirectoryApp MobileFabric app.
  2. Click the Orchestration sub-tab. The Orchestration sub-tab opens with a list of services.
  3. Click EmployeeStorageObjects. The Service Definition tab of the selected orchestration service opens by default.
  4. Click Operations tab to view the operations of the selected service.

    empdir_orchservice.png

    The EmployeeStorageObjects service contains the getAllDetails operation. The operation fetches and combines all the data objects from the EmployeeModelSchema data model.

Configuring Object Service

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 EmployeeDirectoryApp MobileFabric app is mapped with the MobileFabric storage. The EmployeeModelSchema is the data model for the MobileFabric data storage.

The EmployeeDirectoryApp MobileFabric app contains the following object services:

  1. EmployeeModelSchema contains the Employee data model
  2. StorageObjectService acts as a service driven object for the orchestration service (wrapper around the orchestration service EmployeeStorageObjects).

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

  1. After logging on to your Kony account, open the EmployeeDirectoryApp MobileFabric 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, EmployeeModelSchema. The Service Definition tab of the selected service opens by default.

    empdir_objectservice.png

Mapping Employee Data Model (Object services) with a back end Data Source

The EmployeeDirectoryApp MobileFabric app is pre-configured with Employee Data Model (by default mapped to MobileFabric Storage). The data model contains multiple objects and fields related to employee information. The following diagram illustrates the objects in the data model and relationships among them.

lisdetail_datamap.png

The app data model is created as an object service. Using the MobileFabric 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 EmployeeDirectoryApp MobileFabric app is mapped to the MobileFabric storage. You can easily decouple the app data model with the MobileFabric storage and map it with other back end data source.

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

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

    empdir_clone.png

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

    listdetail_endpoint.png

  4. In the Name box, type a name for a copy of Employee App 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 EmployeeModelSchema object service allows you to modify the app data model as you require. You can add, edit, and delete 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 Contact_type_id 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 must also change the data object mappings with UI widgets. Refer to the steps mentioned in Mapping data from Object Services section.

You can fetch all the data at once using the getAllDetails operation of StorageObjectServices. The StorageObjectServices is a service driven object (wrapper) of the EmployeeStorageObjects 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 EmployeeModelSchema 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, after adding or deleting an object from the app data model, you must add or delete that object in the orchestration service EmployeeStorageObjects.

Note:

You can also delete the existing Employee 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 figure illustrates the process of mapping the data to the List view segment.

lisdetail_dataobjects.png

  • The List view consists of empname, designation, department, and empimage widgets.
  • Employee, Designation, Department, and Media are the corresponding object services in the MobileFabric app, which is associated with Visualizer app.
  • First_Name, Last_Name, Name, and Image are the fields in the respective object services

List UI mapping with object services can be represented as follows:

List[“empname”] = Employee[“First_Name” + ”Last_Name”];
List[“designation”] = Designation[“Name”];
List[“department”] = Department[“Name”];
List[“empimage”] = Media[“Image”];

Modifying the List-Details UI

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

Example:

Steps to modify the List view:

  1. In the Project explorer, click the Template tab. A list of templates is displayed.
  2. Go to Mobile >> Segments >>segRowTemplate>> datacontainer
  3. Add, edit, or delete 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 figure illustrate how to remove the designation Label Widget from the row template.

listdetail_listview.png

listdetail_listview1.png

 

Steps to modify the Details view:

  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. Add, edit, or delete widgets as per your requirement.
  4. You can also configure data mapped to a widget. Refer Mapping UI with Data from Object Services.

The following screenshots illustrate how to re-arrange “callMobileFlex” flex.

listdetail_detailview.png

listdetail_detailview1.png

listdetail_detailview2.png

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

Publishing the App

After configuring the necessary configurations, you must publish the app to MobileFabric. For more information, refer to Publish a Project to MobileFabric.