Jump to content
  • A mobile application for monitoring store employee presence KPIs in Spotfire


    This article describes a TIBCO Spotfire mobile application for monitoring employee presence in clothing stores. The purpose of this article is to provide an example Spotfire application using the TIBCO Spotfire KPI chart visualization and regular Spotfire features, such as actions and data limiting, to provide an easy-to-use application for phones, tablets, or computers. The intended users are store managers or executives that need to make sure the departments are appropriately staffed, and who need to take action by reassigning employees between stores or departments if necessary. The focus of this article is to illustrate how applications can be built using the KPI chart and other Spotfire visualizations to provide mobile solutions to relevant use-cases, not to provide a production-quality solution in itself.

    Description of the application

    The example is built around a fictional store chain with stores in a city, where stores have departments for men's, women's, and children's clothes, as well as sportswear. Each department has a number of expected employees and absent employees, with thresholds for how many employee absences can be tolerated in a department. The KPI status can be Good, Acceptable, or Bad, which we color Green, Yellow, and Red, respectively.

    The status of a department is determined by the number of present employees versus the number of absent employees, and its threshold for how many absences can be tolerated before the Status of the department is considered Acceptable or Bad, rather than Good. The status of a store is set to the worst status of any one of its departments: If a store has three departments with the status showing two Good and one Acceptable, the store's status is considered Acceptable.

    Furthermore, if a department has a Bad status, we want to be able to view the available options for reassignment of employees between departments and between the other stores in the city.

    Design of the Application

    We want to solve the above requirements through a Spotfire analysis with three pages to describe Store KPIs, Department KPIs, and Reassignment Candidates. We let the user navigate from Store KPIs to Department KPIs by tapping or clicking a Store KPI. If the user taps or clicks a department KPI, we navigate to the Employee reassignment page.

    Store KPIs

    The store KPIs are displayed through a KPI chart, with one KPI displaying the status of each Store.

    The Value axis displays the number of Expected employees versus the number of Present employees.

    Expression for the Value axis:

     Sum([Expected people] - [Present people]) as [Employees Missing] 

    The Color of the KPIs is set to the worst color of the departments for the store:

     Max([Color]) OVER (Intersect([Department]))

    In this case, the Color column contains a numerical value, which is 0 for Green (Good), 1 for Yellow (Acceptable), and 2 for Red (Bad)

    When a user clicks or taps a Store KPI tile , we want to navigate to the Department KPIs, and then limit that data to show only the data for Departments in the Store the user clicked or tapped.  We can accomplish this task by using an Action for the Store KPIs that triggers a script, which sets a document property to the value of the clicked or tapped store, and then navigates to the Department KPIs page. The Action script code looks like this:

    Document.Properties["SelectedStore"] = Context.HierarchyPathValues[0]
    Document.ActivePageReference = TargetPage
    Here is how the store KPIs look on a mobile phone (using the Spotfire iOS App):



    Department KPIs

    The Department KPIs show for each department in the selected store how many employees it is missing, and the color of the KPI shows the status of the department.

    The Department KPI uses data limiting to make sure we can focus on one store at a time. The data-limiting expression is set to: "${SelectedStore}"=[store]. The SelectedStore document property is set to the value of the KPI tile that the user clicked at the Store KPI level through the Action Script code described above.

    We also need an action when the user clicks a department KPI tile, and we use a script with similar code, as in the example above: We store the value of the clicked KPI tile in a document property and navigate to the Reassignment Candidates page.

    Document.Properties["SelectedDepartment"] = Context.HierarchyPathValues[0]
    Document.ActivePageReference = TargetPage
    Here is how the Department page looks:



    Reassignment Candidates

    The reassignment candidates page shows, for the selected store and department, how many employees are needed in order to get out of Bad status, and also lists employees from departments that have enough employees and who could be reassigned to the selected department (if they already work in the same kind of department, or if they are considered "multi-skilled".

    The Text area uses Calculated Values in order to indicate the selected store and department and also to calculate and show how many employees are required.

    The Table has data limiting set to an expression that makes it show only employees in the same store, that are Multi-skilled, who work in a department that has enough people or are working in the same kind of department,  and who are also present. The data limiting expression is:

     [Enough employees in department] And ([MultiSkilled] = "Yes" OR [Department]="${SelectedDepartment}") And [Present] = "Yes"  
    Here is how the Replacement page looks:



    We hope you find this article useful when you are developing mobile applications with TIBCO Spotfire. We would love to hear your feedback! We have attached the DXP. If you want to investigate it in more detail, you need Spotfire 7.6 or later.

    Read more about using the KPI chart and using Spotfire on mobile devices here:




    User Feedback

    Recommended Comments

    There are no comments to display.

  • Create New...