HR Survey/Employee Audit Application

Prev Next
This content is currently unavailable in Spanish. You are viewing the default (English) version.

I. Overview: HR Survey/Employee Audit Application

This application is an express app that is built outside of Visual Vault, utilizing a template stored in a private VisualVault Github repository, HRSurvey. It operates exclusively through API calls and does not make direct database queries. The app leverages Kendo JavaScript components and is integrated into VisualVault by configuring the application source URL. When configuring the URL, parameters are passed, including a user login token that carries the user's identity and an authentication token. These tokens are used within the Node.js app to verify the user's authentication.

During testing and debugging, the app doesn't require authentication. However, when deployed into VisualVault production sites, users must log in to authenticate the app for proper access and security verification.


II. Application Objective

HR audit processes can be optimized by implementing a single search screen to locate and select employee records efficiently. This application eliminates the need for navigating multiple folders, reduce search times, and ensure accuracy by consolidating data access into a unified interface.

It includes role-based permissions, allowing users to view only the records of those they manage or are second-level reports. Staff can search by employee name, view matches with their employee numbers, and access documents via the integrated VisualVault document viewer for secure and efficient management.

Primary Features:

  • Group all audit data into a single object.

  • Share audit with coordinators.

  • Select employees to be audited (possible and definite)

  • Quickly locate employee documents requested by auditors and relate them to the audit.

  • View all audit documents from a single screen.


III. Application Description

The HR Survey application is set up using Visual Studio Code (VS Code), Node.js, and a basic MVC architecture to run the application with an Express-based web server. Below is a breakdown of the steps to work with the application:

Step-by-step instructions

Step 1. Clone the Github repository HRSurvey to local machine via Visual Studio Code

  1. Install the localhost certificate for local developments

    1. Windows 10/11: Right click on the localhost.crt file, select Install Certificate--> Local Machine-->Place all certificates in the following store-->browse to Trusted Root Certificate Authorities-->click OK.

  2. Click Run and Debug Icon

    1. Click the Run and Debug Icon (ctrl+Shift+D) Click Launch Program Icon (F5)

  3. Open browser to https://localhost:89

    1. You change the port number in the /bin/www file

    During local development, the app can be tested in debugging mode without authentication. In production, authentication is required to ensure secure access to the application.

Step 2. Configurations

  1. Configure the client variables within the /Services folder:

    1. /Services/configvariables.js contains the constants: Auditor_Names_List, Document_Types_List, Document_Types_Requested_List, Leader_Name_List, Survey_Type_List

    2. /Services/serverstrings.js contains the variables: AUTH_API_KEY, AUTH_CUST_ALIAS, AUTH_DEV_ID, AUTH_DEV_SECRET, AUTH_DB_ALIAS, AUTH_VAULT_URL, Individual_Template, TOKEN_KEY, SQL_USER, SQL_PASSWORD, SQL_DATABASE, SQL_SERVER, SQL_MULTISUBNETFAILOVER, SQL_ENABLED.

Step 3. Deploy Application to VisualVault (pre-prod environment)

  1. Define the VisualVault custom SQL queries in the VV control panel.

    1. Navigate to VisualVault > Control Panel > Enterprise Tools

    2. Click on Data Connections.

    3. Push code to VisualVault.

    4. Set up environment variables

Step 4. Test the Deployed App

  • Test all the endpoints of the Express app to make sure the API is functioning properly.

  • Monitor logs for errors.

Step 5. Add the Application to the Landing Page

  1. Navigate to VisualVault > Control Panel > Admin Tools

  2. Open Portals.

  3. Click Portal Tab Content.

  4. Click Add a Widget Container.

    1. Set screen layout to: One Column

  5. Click Add Widget, choose Page Viewer

    1. Fill in the Page Viewer Title.

    2. Fill in the Content URL

    3. Set Width to 100%.

    4. Set Height to 1000 px.

Walkthrough


How it works

Scripting and Workflow

There are no changes required for any VisualVault Forms, Workflow, or Microservices. This application is a predefined feature, and development is completed within the HR Survey/Employee Audit application which is built outside of VisualVault.

Setting Up Views and Partials

  • The server serves views using the URL path /views/<view_name>.html (e.g., accessing localhost:89/views/index.html loads index.html).

  • The app includes partial views using HTML includes like include partials/head.

Single Page Application (SPA)

    • The app uses a single-page design with dynamic view swapping, controlled by index.html.

    • JavaScript sets the base URL dynamically using the head.html partial.

    • JavaScript manages functionality like authentication and initializing Kendo grids.

    //PROD
    //var appBaseUrl = 'https://vv5dev.visualvault.com';

    //local machine
    var appBaseUrl = 'https://localhost:89';

Configuring JavaScript for Client-Side Interactivity

  • Public JavaScript: documentsView.js

    • This file handles various functions, including interacting with the Kendo UI grid, authenticating with VisualVault, and executing search queries when the user presses the Enter key or clicks a search button.

      • It also handles the binding of data to the grid and other dynamic elements.

  • Kendo UI Grid

    • The Kendo grid is initialized and populated with data dynamically fetched from the server (via AJAX calls to /api/documents).

    • This grid can also export data to Excel, configure toolbar buttons, and manage column visibility and sorting.

Controllers and Routes

  • Routes use Express to connect API calls to controller functions.

  • For GET requests: Data is fetched based on query parameters.

  • For POST requests: Data is submitted to filter or create documents.

//controller Routes
//TODO - add middleware for bearer token authentication here
var documentsController = require('./controllers/documentsController.js');
app.get('/api/documents', documentsController.findAll);
app.post('/api/documents', documentsController.findAll);
app.post('/api/documents/authenticate', documentsController.authenticate); 
app.get('/api/documents/authenticate', documentsController.authenticate);
// app.post('/api/documents', documentsController.create);
// app.put('/api/documents', documentsController.update);
// app.delete('/api/documents/: document Id', documentsController.delete);

Models and Data Fetching

  • Model Setup

    • Models interact with data sources like SQL databases or Visual Vault APIs.

    • Data retrieval is done via promises in JavaScript using SQL queries or Visual Vault’s API.

  • Query Parameters

    • Requests to the backend (API calls) are made using query parameters to filter or sort data. These parameters are then passed into SQL queries or API calls.

  • Executing Queries

    • The controller sends the request parameters to the model, which constructs the SQL query or calls VisualVault APIs for data.

    • Results are sent back as JSON objects to be consumed by the front end.

Execution

  • Response Handling

    • After the query results are retrieved, they are formatted in the controller and returned as a JSON response. This response is then consumed by the JavaScript functions in the SPA to update the grid and interface dynamically.

  • Excel Export

    • If the Kendo grid is configured for export, users can download the grid’s data into an Excel file. This functionality is set up using Kendo's built-in export capabilities.


VI. Related Resources

Github

  • Reference VisualVault Github repository, HRSurvey.

VII. Related Articles