Mobile Offline Time Entry

MOBILE
OFFLINE
Time Entry
Oracle HCM Time and Labor Cloud Services
JANUARY 15, 2020

TABLE OF CONTENTS
Introduction .................................................................................................. 5
Executive Summary ..................................................................................... 7
High Level Architecture ................................................................................ 9
Offline Persistent Toolkit .............................................................................................................12
Prepare the Developer Environment.......................................................... 15
Hardware Requirements .............................................................................................................15
Software Requirements ..............................................................................................................15
Set Up the Development Environment .......................................................................................15
Import and Run the Project .........................................................................................................18
Overall Mobile Application Design Flow..................................................... 20
Authenticate and Render the Web Clock Layout ........................................................................20
Store and Synchronize Offline Web Clock Events ......................................................................20
Use Case 1: Authenticating with SaaS ...................................................... 21
Online Design Flow ....................................................................................................................21
Offline Design Flow ....................................................................................................................22
PouchDB ....................................................................................................................................23
Technical Components and Configurations ................................................................................23
Functional and Nonfunctional Configurations .............................................................................24
Integration Touchpoints ..............................................................................................................24
2 W HITE PAPER / MOBILE OFFLINE Time Entry

Login.html .......................................................................................................................................................................................... 25
Login.js .............................................................................................................................................................................................. 26
JWT Authentication (alternate option) ........................................................................................27
Use Case 2: Rendering Web Clock ........................................................... 28
Online Design Flow ....................................................................................................................28
Functional and Nonfunctional Configurations .............................................................................29
HCM Configurations ........................................................................................................................................................................ 29
Create webclock.html ...................................................................................................................................................................... 30
Create webclock.js .......................................................................................................................................................................... 31
API Calls ............................................................................................................................................................................................ 32
Offline Design Flow ....................................................................................................................33
PouchDB Details ........................................................................................................................35
Inspect Element and Web Clock Screens ..................................................................................35
Use Case 3: Persisting Offline Time Reporting ......................................... 39
Design Flow ................................................................................................................................39
Add offline configuration in webclock.js ....................................................................................................................................... 40
Inspect Element and Web Clock Screens ..................................................................................43
Use Case 4: Synchronizing Time Reported Offline.................................... 45

Design Flow ................................................................................................................................45
Time Tampering......................................................................................... 48
Caching Strategy ....................................................................................... 50
Packaging the Android APK File ................................................................ 51
Packaging the iOS IPA File ....................................................................... 54
Create the Provisioning Profile Using Xcode ..............................................................................55
Select the Destination Scheme...................................................................................................56
Revision History ......................................................................................... 58

INTRODUCTION
The objective of this document is to outline the tasks involved in developing a mobile time entry
application. This application works when the mobile device is connected to the internet (online) and
when it isn't (offline). This document answers the question, “What does it take to develop and
enhance mobile offline time entry leveraging Oracle HCM Time and Labor Cloud Services?”
Currently, people can use Time and Labor to report time online in multiple ways, such as with time
cards and Web Clock, in browsers and on mobile devices. To let people, report time offline, you
need to create an application that can run on most mobile platforms, such as Android, iOS, and
Windows.
You can use this document as a how-to guide or a reference guide while developing your mobile
application. The document has references to the Oracle JET framework and Offline Persistence
Toolkit and some open source tools and technologies required to develop the mobile offline time
reporting application. These references include example code snippets that you can use and
enhance, as needed.
The mobile offline application described in this document uses Oracle HCM REST APIs for Web
Clock. These APIs integrate metadata, configuration, and Web Clock events functionality to deliver
an end-to-end mobile Web Clock application that includes offline capabilities.
• Time Layout Sets provide the Web Clock Layout metadata and configurations for the person
reporting time.
• Web Clock Events are created when the person reports time. They provide historical data in daily
time events for up to 7 days.

To gain familiarity with the key technologies that you can use to develop the mobile offline
application, use these links:
Solution Components Links
Oracle JavaScript Extension Toolkit https://www.oracle.com/webfolder/technetwork/jet/globalE

(JET) Mobile Development xamples-Mobile.html
Oracle Offline Persistence Toolkit https://github.com/oracle/offline-persistence-toolkit
Mobile Plug Ins – Cordova, XCode https://cordova.apache.org/docs/en/latest/guide/overview/i

ndex.html
Use Cases Addressed in This Document
We have identified the following four critical use cases with respect to developing this mobile offline
application. These use cases include code snippets that you can leverage, as needed.
• Authentication
• Rendering the Web Clock layout
• Storing time reported while offline
• Synchronizing time reported while offline
This document and the processes outlined within were produced by eVerge Group, LLC in conjunction and at
the direction of Oracle Corporation. eVerge Group, LLC is an Oracle Platinum and certified Oracle HCM Cloud
implementation partner. For more information regarding eVerge Group, please contact us at 1-972-608-1803 or
information@evergegroup.com.

EXECUTIVE SUMMARY
Time collection is one of the core requirements for Oracle Fusion Time and Labor. It includes a browser-based Web Clock that people
can use to report time while online. Oracle Fusion applications must cater to a wide range of workforce requirements. While much of the
work carried out these days takes connectivity for granted, several work environments still have limited or no network connectivity.
The mobile application described here extends the existing Web Clock functionality to support both online and offline time reporting.
The underlying servers are updated in real time when the person reports their time while online. The time data reported when the
person is offline are stored on the local device. When connectivity is re-established, the time data are synchronized with the server. The
synchronized time data can then be processed and transferred to the appropriate consumers, such as payroll and project costing.
This document addresses these key use cases:
 Authentication: The application opens after the person signs in with valid credentials. When signing in for the first time, the person
must be online. After a successful first sign in, the person can use the application both online and offline.
 Rendering Web Clock Layouts: After they sign in, the person sees the Web Clock home page where they report time and view daily
events for up to 7 days in the past.
 Storing Time Reported While Offline: If the device is online, time reported with Web Clock is synchronized to the server. But, if the
device is offline, the clock events and associated data are stored on the device until the next time the application is online.
 Synchronizing Time Reported While Offline: The device regularly checks the network connectivity and as soon as the device is
online, the application fetches the reported time data from the offline storage and posts it to the server.
 Time Tampering: The application provides a guard against time tampering attempts by the person. It does this by saving a copy of
the location time stamp and increasing the count by +1 every minute the device is offline. When the device is back online, the
application compares the device time stamp with the location time stamp, and, if it detects any discrepancies, it marks the specific
time event as tampered.
The mobile application in this document uses these technologies:
 Node JS: The base platform
 Oracle JET Framework: Facilitates development of the mobile application pages
 Cordova and XCode: Integrates with Android and iOS platforms, respectively
 Oracle Offline Persistence Toolkit: Stores the person info and API response to render Web Clock pages when offline. It also stores
the time reported while offline and synchronizes the time data with the server when the device is back online.

The application is built on the Model-View-View/Model (MVVM) architectural design pattern shown here:
The View consists of the UI components such as the buttons and icons. The Model represents the application data and includes Offline
Persistence Toolkit, which is responsible for storing the time data reported while offline. The View/Model in this architecture mediates
communication between the UI elements and the application data. It describes the state of the data in the model.
There is a two-way data binding between the View and the Model, where data changes in the View/Model are sent to the UI
components, and input from the UI components is written back to the View/Model.
The Model synchronizes with the Oracle HCM Cloud Server, which describes all of the Time and Labor configuration details, such as
the time layout sets and worker time entry profiles. It gives the options to get and update the clock events and accepts the data by
enabling API services.
The REST APIs are the middleware services between the application and HCM cloud. This is the layer responsible for the transfer of
information between the HCM server and the mobile application.
This mobile application design enables people to clock in and out on their mobile devices, regardless of whether they're online or
offline. This boosts the ease and accuracy of their time reporting and results in fewer defaults and deviations.

HIGH LEVEL ARCHITECTURE
The mobile offline Web Clock application described here was developed using Oracle JET Framework. Oracle JET supports the Model-
View-ViewModel (MVVM) architectural design pattern. It also supports two-way data binding between the view and model. Data
changes in the ViewModel are sent to the UI components, and input from the UI components is written back to the ViewModel. Here's a
high-level architectural diagram of this relationship.
This table describes the items that make up the high-level architecture.
ITEM DESCRIPTION
View The View is a collection of UI components implemented as HTML5 custom elements, ranging from basic buttons to
advanced data visualization components. To design the view components in Web Clock, use HTML5, CSS. Also use it
to render static images, such as the clock in, clock out, meal in, and meal out icons on web clock buttons.
ViewModel The ViewModel exposes data from the Model to the View and maintains the application's state. In the view model, the
binder mediates communication between the view and the data binder. The view model has been described as a state
of the data in the model. In this layer, you use JavaScript files to define event handlers that you then use to populate
the data provider and bind the data provider to observables that the view component can use.
Model The Model represents the application data. In this layer, you use implemented REST API calls to get the data from
Oracle HCM Time and Labor Cloud Service to store in Offline Persistent Toolkit to use when the mobile device is
offline. Offline Persistent Toolkit uses PouchDB internally for storage.
HCM Cloud Server Oracle HCM Time and Labor Cloud Server, gives you the options to get and update the web clock events. It contains
the time entry object configurations, such as time layout sets and worker time entry profiles. It accepts external time
data provided by REST API services. It also has Web Clock; which people use to clock in and out. Web Clock can be
extended to a mobile platform in both online and offline modes.
You configure multiple time entry objects so that people can use Web Clock to report time. These objects include web
clock buttons and time card fields that you add to the web clock layout. Then, you use groups and time entry profiles
to associate the web clock layout with the people you want reporting time with Web Clock.

ITEM DESCRIPTION
Here's a high-level architecture diagram that shows how the time entry objects you configure work together.

ITEM DESCRIPTION
Web clock button configurations include clock events and time attributes, such as Payroll Time Type. Each button in
the group has a single display name and can store the values for multiple time attributes associated with a single clock
event. A time attribute reflects how much time is paid or recorded as an information entry and qualifies the associated
time event or time entry.
Here's an example of a web clock buttons configuration that was created using the Time Entry Layout Components
task in the Setup and Maintenance work area. The task is part of the Workforce Deployment offering, Time and Labor
functional area.
REST APIs REST APIs are middleware services between this mobile application and the HCM cloud server. This layer gets
information from the HCM cloud server in the form of an HTTP request and transfers it to the mobile application. The
various services involved in this process provide time layout sets and web clock events. It works according to
authentication.

ITEM DESCRIPTION
Oracle HCM REST APIs interact with the HCM cloud server and the mobile applications.
The REST APIs in this table support an offline web clock configuration. JSON responses from GET methods are
stored in this mobile application to use when rendering the mobile pages. Offline data stored in the mobile application
is synchronized with the HCM cloud server using POST calls.
API NAME METHOD BACKGROUND
Time Layout Sets GET Retrieves the web clock layout configuration and stores
it in this mobile application.
Web Clock Events GET Retrieves the web clock events that match the criteria,
such as person id, and stores the last 7 days' worth as
history details.
Web Clock Events POST Updates the HCM cloud server with the time data stored
in this mobile application, so server-side processes can
validate time cards and run the approval workflows.
Offline Persistent Toolkit

Oracle Mobile Offline Persistent Toolkit is a client-side JavaScript library that provides caching and offline support at the HTTP request
layer. It does this by using the Fetch API, an XHR adapter, and pouchDB (currently v6.3.4). The toolkit also supports shredding and
unshredding, as well as synchronizing and conflict handling.
PouchDB is an open-source JavaScript database designed to run in a browser. It enables applications to store data locally while offline,
then synchronize it with PouchDB and compatible servers when the application is back online. It keeps the person's data synchronized
no matter where they next use the application.

Here's a high-level architecture diagram that shows how Offline Persistent Toolkit works with mobile devices, HCM REST APIs, and the
HCM cloud server.
For more general information about this toolkit, see https://docs.oracle.com/en/middleware/jet/4.2.0/develop/oracle-offline-persistence-

toolkit.html.
The mobile offline solution described here uses Offline Persistent Toolkit to synchronize and store web clock configuration data and
web clock events.

 The GET timeLayoutSets API gets the web clock configuration data for the toolkit to store in persistent storage. This mobile
application uses the data to render Web Clock pages on the mobile device, like this page.
 The GET webClockEvents API gets web clock events for the last 7 days from the HCM cloud server for the toolkit to store in
persistent storage. This mobile application uses them to render details for each of the last 7 days in the Daily Time Events section of
the Web Clock page, shown here.
 The toolkit uses PouchDB to store web clock events and related time attributes when the mobile device is offline.
 The POST webClockEvents API synchronizes with the HCM cloud server, the web clock events and related attributes that were
stored while the mobile device was offline, when the mobile device is online again.

PREPARE THE DEVELOPER ENVIRONMEN T
Hardware Requirements
REQUIREMENT VERSION OR CAPACITY
Operating System Windows 7 or 10
RAM 1 GB recommended
Hard Drive 500 GB recommended
Processor Minimum 1 GHz; 2GHz or more recommended
Software Requirements
REQUIREMENT VERSION
Base packages Node JS, Oracle Jet
Web Technologies HTML5, JavaScript, CSS, Ajax
Plugins and tools Cordova, Xcode, Android, iOS & Windows tools
IDE NetBeans 8.2
Set Up the Development Environment

STEP ACTION DETAILS
1 Download and install Node JS Download location: https://nodejs.org/en/download/

(10.16.3).
Be sure to select the appropriate operating system. After the installation finishes, you can verify
the version in the command prompt using this command: npm –v
2 Install Oracle JET (7.2.0). In the command prompt, run this command:
npm –g install @oracle/ojet-cli
If you get an error after running this command, clear the cache by changing the network with the
command npm clear cache –force, then run the first command again.
3 Install the Cordova plugin In the command prompt, run this command:
(9.0.0). npm install –g cordova
Optional: Upgrade to the most recent version by running these commands:

npm install –g cordova@latest
cordova --version
4 Install the Xcode development Install the Xcode development environment from the App Store, which is only available on
environment. macOS.
After installing Xcode, install the Xcode command-line tools by running this command in a
terminal window:
xcode-select -- install

STEP ACTION DETAILS
5 Create the mobile offline time 1. Create the project folder that will store the source files.
entry application project. 2. In the command prompt, go to the project folder.
3. Create the project using this command: ojet create MobileOfflineApp --hybrid
--appname "MobileOfflineApp" --platform=android,ios,windows --
template=navdrawer
4. Make sure that the project was created successfully by reviewing the project source in
Internet Explorer.
For details about creating a hybrid mobile application, see Create a Hybrid Mobile Application
Using the Oracle JET Command-Line Interface in the Developing Applications with Oracle JET
guide on docs.oracle.com, in the middleware documentation.
6 Build the project. In Oracle JET Command-Line Interface, run this command:
ojet build android
Tip: The platform can be android|ios|windows
7 Serve the project. In Oracle JET Command-Line Interface, run this command:
ojet serve [ios|android|windows]
For Android: >ojet serve android –destination=emulator
For Windows: >ojet serve windows –browser=chrome
8 Install the Android tools. Use the Install Android Development Tools procedure in the Developing Applications with Oracle
JET guide on docs.oracle.com, in the middleware documentation. The procedure guides you
through these tasks:
 Installing an emulator accelerator
 Creating an Android virtual device
 Setting up your Android device to install an application from your development machine
 Installing Gradle and configuring Gradle proxy settings
 Configuring environment variables to reference JDK and Android SDK installations
9 Install the iOS tools. Use the Install iOS Development Tools procedure in the Developing Applications with Oracle
JET guide on docs.oracle.com, in the middleware documentation.
10 Install the Windows tools. Use the Install Windows Development Tools procedure in the Developing Applications with
Oracle JET guide on docs.oracle.com, in the middleware documentation.
11 Install NetBeans. Use NetBeans as an IDE to develop this mobile application. Download the latest NetBeans
version from netbeans.org.
12 Install Oracle Offline 1. Read the Offline Persistent Toolkit README file.
Persistent Toolkit. 2. Add the toolkit to the application. In the command prompt, run this command:
npm install offline-persistence-toolkit
3. Add pouchDB and pouchDB-find. In the command prompt, run this command:
npm install pouchdb pouchdb-find

STEP ACTION DETAILS
4. Configure the toolkit in js/main.js exactly like this:

requirejs.config({
paths: {
……………………………………,
……………………………………,
'pouchdb': 'js/libs/pouchdb-7.0.0',
'pouchfind': 'js/libs/pouchdb.find',
'persist' : 'js/libs/persist/v1.4.0/min'
}
5. Initialize pouchDB in main.js
copyCustomLibsToStaging: {
fileList: [
{cwd: 'node_modules/@oracle/offline-persistence-toolkit/',
src: ['*'],
dest: 'web/js/libs/persist'},
{cwd: 'node_modules/pouchdb/',
src: ['*'],
dest: 'web/js/libs/pouchdb'}
]
},
6. Add the libs configuration in the js/path_mapping.json file using the Installing the
Offline Persistence Toolkit procedure in the Developing Applications with Oracle JET guide
on docs.oracle.com, in the middleware documentation.

STEP ACTION DETAILS
13 Store images and icons in the You need to store the web clock icons in the application source code. Create the folder src >
mobile offline time entry css > images and add the icons or images you want to use in the application.
application.
Import and Run the Project

1. Open NetBeans IDE and import the project. On the File menu, select Open Project.
2. Make sure the project is imported successfully. It should look like this:

3. Run the project. In the command prompt go to the project source folder and run the appropriate command.
For Android: >ojet serve android –destination=emulator
For Windows: >ojet serve windows –browser=chrome
For iOS: >ojet serve ios
To add destination details, see the Serve a Hybrid Mobile Application section of the Create a Hybrid Mobile Application Using Oracle
JET Command Line-Interface topic. This topic is in the Developing Applications with Oracle JET guide on docs.oracle.com, in the
middleware documentation.
4. Make sure the project runs successfully in the browser or emulator.

OVERALL MOBILE APPLICATION DESIGN FLOW
This high-level design flow shows how the mobile application handles authentication, web clock rendering, and offline data
synchronization.
Authenticate and Render the Web Clock Layout

The flow starts when the person signs in to this mobile application. The application records their credentials and calls the REST API to
authenticate them. If the person entered valid credentials, the Web Clock home page appears. Otherwise, the person sees an error
message on the signin page.
The Web Clock home page shows buttons, such as Start Shift and End Shift, that the person uses to report their time. This mobile
application records the corresponding clock events and any additional time attributes. This information appears in the Daily Events
section, so the person can confirm they reported their time accurately. Web Clock also shows person details and signout options.
When the person is ready, they submit their reported time and the mobile application checks the network status.
 If the device is online, the application connects to the HCM APIs and updates the time entries to the server.
 If the device is offline, the application stores the time data in the offline toolkit. Offline web clock events are stored in an indexed
database in the form of key and value pairs. The data can be handled according to the key.
Store and Synchronize Offline Web Clock Events

The mobile Web Clock application checks the network status internally every 30 or 60 seconds. If the device is online, the application
gets the data from the offline toolkit, frames the API payload, and synchronizes it to the server. This process can repeat several times
until the application completes the data synchronization.
To synchronize or update the time data on the HCM Cloud Server, the mobile application calls the API. The API returns an appropriate
status code and message after the update.

USE CASE 1: AUTHENTICATING W ITH SAAS
Online Design Flow

The flow starts with the person entering their credentials on the sign in page after launching the application. The sign in page has the
domain name, username, and password. If the person leaves any required fields blank, they get an alert asking them to enter the
required information.
After the user submits their credentials, the mobile application checks the network status. If the device is online, the application
connects to the HCM cloud server using the HCM authenticate REST API and validates the domain and credentials. The API responds
in JSON format with a status code.
 If the API responds that the credentials are valid and includes the status code, effective start date, person id, and profile details, the
Web Clock home page appears. The page includes the appropriate web clock buttons and time card fields as well as daily event
details for up to the last 7 days. The application also caches these details in the offline data toolkit.
 If the API responds that the credentials are invalid and doesn't include the status code or other necessary details, an error message
appears.
During the first sign in, the device needs to be in online mode so that the mobile application and signin credentials can be authenticated
by HCM cloud server. After the initial signin, if the application is offline, it gets the data from the offline toolkit.
Here's a high-level design flow show how this mobile application authenticates signin credentials.
Here are the details of the authenticate API:
 URL: eiwb-dev1.fa.us6.oraclecloud.com/hcmRestApi/resources/latest/emps?q=UserName=<username>
 Type: GET
 Authorization: basic auth
 Response Format: application/json

Offline Design Flow
When the device is offline, the mobile application connects to the Offline Persistent Toolkit to fetch the signin data since it can't reach
the HCM API. The application needs to connect online at least once before it works offline, so that it gets the API response with the
relevant details and data to store offline.
Offline Persistent Toolkit uses PouchDB to store the offline data. Data sets are stored in the form of key and value pairs in persistent
storage. From persistent storage, the device fetches username, person id, and the effective date to validate the user and to render the
web clock home page.
Here's how you enable offline authentication:
1. Add offline persistent toolkit libraries in js/viewModels/login.js file as shown in the adjacent screenshot.
2. Add user information into persistent storage which can later be retrieved when the device is offline.
3. Refer login.js file for the source code.

PouchDB
PouchDB stores the data in an indexed database. It creates separate objects to store individual data. The persistent toolkit connects to
PouchDB using the persistent store factory in the application. It operates in a directional way, meaning it uses online mode to set the
data and offline mode to retrieve it, as shown here.
Technical Components and Configurations

ITEM DETAILS
Components required to implement signin  login.html

 login.js
 webclock.html
 webclock.js
Configuration for routing in appController.js file self.router = Router.rootInstance;

self.router.configure({
'login':{label:'Login', isDefault: true}
})

Functional and Nonfunctional Configurations
Not applicable
Integration Touchpoints
Make sure the Oracle JET application created the src folder with the css, and js subfolders. Then create the login.html and login.js files.
Here's an example of the mobile application signin page that you're creating.

LOGIN.HTML
1. Open the src > js > views folder.
2. Create the login.html page.
3. Create the input fields for domain, username, and password.
4. Create the Submit button.
5. We have provided code snippet along with this document. Please refer login.html for the sample code for login. (login.html is present
in src\js\views directory and contains full source code of authentication workflow).

LOGIN.JS
1. Open the src > js > viewModel folder.
2. Create the login.js file
3. Add the code to get the domain, username, and password values.
4. Implement the code to call the REST API to authenticate.
5. We have provided code snippet along with this document. Please refer login.js for the sample code (login.js is present in
src\js\viewModel directory and contains full source code of user authentication along with JavaScript library).

JWT Authentication (alternate option)
JSON Web Token (JWT) is a compact token format that offers a self-contained way for securely transmitting information between
connected applications as a JSON object. JWT can be used for authorization because after the person signs in, each subsequent
request includes the JWT. This token lets the person access the permitted routes, services, and resources.
The JWT token text contains a set of claims, which are a combination of standard and user-defined unique name: value pair fields. In
JWT tokens for Oracle Fusion REST APIs, we include three required fields along with a single optional field (prn) where we put the
username. These fields are:
FIELD DESCRIPTION
iat issued at time (UTC unix)
exp expiration time (UTC unix)
iss issuer of the claim
prn primary subject of the

claim
Thus, a JWT token includes the username and the expiration period for the token, which can be passed by the mobile application to
Oracle Fusion REST APIs. This is a Base64url encoded value. The token can be verified and trusted because it's digitally signed. JWTs
can be signed using a secret (with the HMAC algorithm) or a public/private key pair using RSA or ECDSA.
After the person is successfully authenticated when they first sign in to the application, the JWT token can be generated and stored in
Offline Persistence Toolkit. This token can then be used to transfer the information between the mobile application and HCM cloud
server without the need for repeated authorization.
For more details about JWTs, see these references:
 The JWT Token for Authorization topic in the REST API for Oracle HCM Cloud guide on docs.oracle.com, in the Human Resources
cloud application documentation.
 The Using JWT To Secure Your Cloud Application Integrations blog in Oracle Fusion Applications Developer Relations on
blogs.oracle.com.

USE CASE 2: RENDERING W EB CLOCK
When the person signs in with valid credentials, the application displays the Web Clock home page. If the credentials are invalid, it
shows an error message.
The Web Clock home page shows buttons, such as Start Shift and End Shift, that the person uses to report their time. This mobile
application records the corresponding clock events and any additional time attributes. This information appears in the Daily Events
section, so the person can confirm they reported their time accurately. Web Clock also shows person details and sign-out options.
Online Design Flow

When the person is ready, they submit their reported time and the mobile application checks the network status. If the device is online,
the application connects to the HCM APIs and updates the time entries to the server.
Here's a high-level design flow showing how this mobile application renders Web Clock when online.

ITEM DETAILS
Components required to render Web Clock  webclock.html

 webclock.js
Configuration for routing in appController.js file self.router = Router.rootInstance;

self.router.configure({
'login':{label:'Login', isDefault: true}
'webclock': {label: 'Web Clock'}
})

Functional and Nonfunctional Configurations
HCM CONFIGURATIONS
People need the Employee abstract role to use Web Clock to report time. They also need the privileges to call GET and POST
operations for their own web clock events. You need to assign the role and privileges to the custom roles that people will need to use
offline Web Clock.
REST
PRIVILEGE CODE PRIVILEGE NAME ACTIONS DESCRIPTIONS
HXT_REST_SERVICE_ACCESS_WEB_CLOCK_EVENTS_PRIV Use REST Service – GET Invokes GET and

Web Clock Events DESCRI POST operations on
BE the webClockEvents
POST API
HXT_REST_SERVICE_ACCESS_WEB_CLOCK_EVENTS_PRIV Use REST Service – GET Invokes GET and

Web Clock Events DESCRI POST operations on
BE the webClockEvents
POST API
HXT_REST_SERVICE_ACCESS_TIME_CARD_FIELD_VALUES_LOV_PRIV Use REST Service - GET Calls the GET method

Time Card Lists of DESCRI associated with the
Values BE timeCardListsOfValues
POST REST service.

CREATE WEBCLOCK.HTML
1. Open the src > js > views folder.
2. Create the webclock.html page.
3. Add the code to show the web clock page after successful sign-in authentication.
4. Refer webclock.html(src\js\views) for the source code of web clock rendering. A file webclock.html contains user interface details of
rendering web clock use case.

CREATE WEBCLOCK.JS
2. Create the webclock.js file.
3. Add the code for the Web Clock page.
4. Refer webclock.js(src\js\viewModel) for the source code of web clock rendering. A file webclock.js contains business and API
processing logic.

API CALLS
ITEM DESCRIPTION JSON SAMPLE
Time Layout Sets - GET The timeLayoutSets API gets the

web clock layout information, such
as name, id, button name, and
display names, used to display web
clock buttons.
Web Clock Events - GET The webClockEvents API helps

display any relevant time card fields
after tapping a web clock button. It
contains information, such as web
clock click id, button id, event
source, and icon name.
This API also gets daily time event

history and submitted time entries
for up to the last 7 days.

Offline Design Flow
When the person is ready, they submit their reported time and the mobile application checks the network status. If the device is offline,
the application connects to Offline Persistent Toolkit. From persistent storage, it fetches the time layout set and time card field data to
render the web clock buttons, daily events history, and any time card fields.
Here's how you enable offline rendering of Web Clock.
1. Add offline persistent toolkit libraries in the js/viewModels/webclock.js file, as shown in step 2.
2. Add person information to persistent storage for use when the device is offline. See the earlier authentication code snippets for the
full source code, for login module.

3. Add the API URL to register in the persistent manager, as shown here.
4. Add event listener information to detect the network status, as shown here.

PouchDB Details
When the mobile application is online, it gets data by connecting to the HCM cloud server. The application stores the data in PouchDB,
in an indexed database. PouchDB operates in a directional way, meaning it uses online mode to set the data and offline mode to
retrieve it, as shown here.
In this use case, PouchDB is storing the timeLayoutSets and webClockEvents API responses so the application can render Web Clock
when offline. One can check the persistent storage for offline data in browser via Inspect Element.
Inspect Element and Web Clock Screens

In Inspect Element, open the Application tab and make sure the PouchDB data is stored, as shown here.
Time Layout Object in Offline Persistent Storage

Go to offline mode and check for the Web Clock view. It displays all data, buttons, and icons. Refer to webclock.js for the source code.
Web Clock Home Page
Related Time Card Fields

Daily Time Events History

USE CASE 3: PERSISTING OFFLINE TIME REPORTING
Design Flow
When the person reports time when offline, the mobile application connects to Offline Persistent Toolkit to store the time data. PouchDB
stores the data in an indexed database. It creates separate objects to store individual data. The persistent toolkit connects to PouchDB
using the persistent store factory in the application. It operates in a directional way, meaning it uses online mode to set the data and
offline mode to retrieve it, as shown here.

Here's the components you need to save offline data in persistent toolkit:
 webclock.html
 webclock.js
 Persistent toolkit configuration

ADD OFFLINE CONFIGURATION IN WEBCLOCK.JS
2. Add the configuration in the webclock.js file.
3. Add the code to identify the network status and save data to persistent toolkit if the device is offline.
4. Add offline persistent toolkit library details in webclock.js to enable offline feature.

5. Add the URL for the timeLayoutSets API in the persistent manager’s register, as shown here. The register calls the API, gets the
response, and stores the data in PouchDB.
6. Add the event listener information to detect whether the network is online or offline, as shown here.

7. In the submit function, get the time event details and, if the device is online, call the webClockEvents POST API. Otherwise, store the
data in persistent storage. Here's the code to handle this behavior:
8. Add a custom handler patch function to store reported time data in persistent storage if the device is offline. Also add a block to
update the data on the server if the device is online. Here's the code snippet. Refer only to the IF block.

9. Identify the network status using the EventListener function, as shown here. EventListener detects the network status by calling the
onlineHandler and offlineHandler functions and internally calling the synchOnline and synchOffline functions.
Inspect Element and Web Clock Screens

In Inspect Element, open the Application tab and make sure indexed db stores the API response as shown here.
Time Layout Object in Offline Persistent Storage

USE CASE 4: SYNCHRONIZING TIME REPORTED OFFLINE
Design Flow
When the device finds and connects to the network, the mobile application starts to synchronize the data in persistent storage to the
server. The application fetches the data from persistent storage, prepares the payload for the POST API call, and submits the request
to the server.

Here's the components you need to synchronize offline data to the server:
 webclock.js
 Persistent toolkit configuration

Identify the network status using the EventListener function, as shown here. EventListener detects the network status by calling the
onlineHandler and offlineHandler functions and internally calling the synchOnline and synchOffline functions.
If the device is online, the mobile application gets the offline time data from persistent storage to synchronize to the server.

In the customHandlePatch function of this code snippet, the application gets the data from persistent storage using the
webClockClickId, and sends the data to the server.
Submit the offline data to the HCM APIs to synchronize the data to the server, as shown here. After submitting the request to the
server, check the API status to determine the synchronization status. If the API returns the status code 201, it indicates a successful
synchronization to the server. Otherwise, the application again stores the data in persistent storage.
To check the synchronization status, find the API status on the Network tab. If the API returns the status code 200, it indicates a
successful synchronization to the server. Otherwise, check the error messages.

TIME TAMPERING
Here's how you record any time tampering on the device:
1. Write a function to get the location time stamp, using the navigator.geolocation method, like the function shown here.
2. Write a function to store the location time stamp in local storage and increase it by 1 every minute while offline, like the function
shown here.

3. Compare the device time stamp with the location time stamp when the device is back online. Any difference in the time intervals
indicates that the device time was tampered with and the API payload needs to POST timeTamperedFlag as Yes.
If the device doesn't find the geolocation, it returns an error message, like this message.

CACHING STRATEGY
If the API response header contains no-cache or no-store properties, the application can’t store the API response in offline persistent
storage. Here's how you avoid this situation.
1. Add the cacheStrategies.js file to the project source and import it in the webclock.js, as shown here.
2. Add cacheStrategies to the persistenceManager.init() function, as shown here.

PACKAGING THE ANDROID APK FILE
1. Add the release configuration details to the src\js\path_mapping.json file for offline persistent toolkit and PouchDB, as shown here.
2. Generate the keystore.jks file using the steps in the Generate and upload key and keystone section of the Sign your app topic.
3. Create the buildConfig.json file in the project folder.
4. Add the .jks file details of keystore, store password, alias, password, and keystore type, as shown here.

5. Add the configuration for persistent toolkit, PouchDB in the hybrid section of scripts\config\oraclejet-build.js, as shown here.
6. In the command prompt of the project folder, run this command to build the .apk file:
ojet build android --release --build-config=buildConfig.json

Here's an example of a successfully created apk file.

PACKAGING THE IOS IPA FILE
Here's how you package the iOS IAP file. You can also refer to the Package a Hybrid Mobile App on iOS section of the Package and
Publish Hybrid Mobile Applications topic in the Developing Applications with Oracle JET guide on docs.oracle.com. The guide is in the
middleware documentation.
1. Import the .xcodeproj file to Xcode. The file is located here: /{project_name}/hybrid/platforms/ios/{project_name}.xcodeproj
2. Add the APPLE ID in Xcode by navigating to the Accounts section, as shown here.

Create the Provisioning Profile Using Xcode
1. In the build-release.xconfig file, change iPhone Distribution to iPhone Developer.
2. Here's what you need to do after importing the project into Xcode:
a. Select the project.
b. On the Signing and Capabilities tab, enable the Automatically manage signing check box.
c. Select the team name.
d. Make sure that the provisioning profile was created, as shown here.

Select the Destination Scheme
1. In XCode, select Product > Destination.
2. Select the Generic iOS Device option, as shown here.
3. Create the .app file:
 Open XCode and select Archive option
 In the Products folder, right-click the project.
 Select the Show in Finder option to show the content of the packageon the right side of the panel
 In the Products folder, rename the .app file, to {project_name}.app.
4. Make sure the .app file created successfully, as shown here.

5. Create the .ipa file.
a. Create a folder named Payload.
b. Put the {project_name}.app in the payload.
c. Compress the payload.
d. Change the name of the Payload.zip file to {project_name}.ipa.

REVISION HISTORY
ROW VERSION AUTHOR DATE DESCRIPTION

NUMBER
1 1.0.0 eVerge Dec 6, Released version with executive summary, overview, authentication, design flow,
Software & 2019 use cases with development steps and packaging.
Technology
Services
Private
Limited
2 1.0.1 eVerge Dec 18, Updated the document based on Oracle team review comments
Software & 2019
Technology
Services
Private
Limited

eVerge Group, LLC
Corporate Headquarters:
4965 Preston Park Blvd., Suite 700
Plano, TX 75093
www.evergegroup.com
Contact Information:
1-972-608-1803
information@evergegroup.com
Bangalore Office:
91-080-25639848
ORACLE CORPORATION
Worldwide Headquarters
500 Oracle Parkway, Redwood Shores, CA 94065 USA
Worldwide Inquiries
TELE + 1.650.506.7000 + 1.800.ORACLE1
FAX + 1.650.506.7200
oracle.com
CONNECT W ITH US
Call +1.800.ORACLE1 or visit oracle.com. Outside North America, find your local office at oracle.com/contact.
blogs.oracle.com/oracle facebook.com/oracle twitter.com/oracle
Copyright © 2020, Oracle and/or its affiliates. All rights reserved. This document is provided for information purposes only, and the contents hereof are
subject to change without notice. This document is not warranted to be error-free, nor subject to any other warranties or conditions, whether expressed
orally or implied in law, including implied warranties and conditions of merchantability or fitness for a particular purpose. We specifically disclaim any
liability with respect to this document, and no contractual obligations are formed either directly or indirectly by this document. This document may not be
reproduced or transmitted in any form or by any means, electronic or mechanical, for any purpose, without our prior written permission.
Oracle and Java are registered trademarks of Oracle and/or its affiliates. Other names may be trademarks of their respective owners.
Intel and Intel Xeon are trademarks or registered trademarks of Intel Corporation. All SPARC trademarks are used under license and are trademarks or
registered trademarks of SPARC International, Inc. AMD, Opteron, the AMD logo, and the AMD Opteron logo are trademarks or registered trademarks
of Advanced Micro Devices. UNIX is a registered trademark of The Open Group. 0120
White Paper MOBILE OFFLINE Time Entry
January 2020January 2020

Mobile Offline Time Entry

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Mobile Offline Time Entry

Hochgeladen von

Copyright:

Verfügbare Formate

MOBILE

JANUARY 15, 2020

Executive Summary ..................................................................................... 7

High Level Architecture ................................................................................ 9

Offline Persistent Toolkit .............................................................................................................12

Prepare the Developer Environment.......................................................... 15

Hardware Requirements .............................................................................................................15

Software Requirements ..............................................................................................................15

Set Up the Development Environment .......................................................................................15

Import and Run the Project .........................................................................................................18

Overall Mobile Application Design Flow..................................................... 20

Authenticate and Render the Web Clock Layout ........................................................................20

Store and Synchronize Offline Web Clock Events ......................................................................20

Use Case 1: Authenticating with SaaS ...................................................... 21

Online Design Flow ....................................................................................................................21

Offline Design Flow ....................................................................................................................22

Technical Components and Configurations ................................................................................23

Functional and Nonfunctional Configurations .............................................................................24

Integration Touchpoints ..............................................................................................................24

2 W HITE PAPER / MOBILE OFFLINE Time Entry

JWT Authentication (alternate option) ........................................................................................27

Use Case 2: Rendering Web Clock ........................................................... 28

Online Design Flow ....................................................................................................................28

Technical Components and Configurations ................................................................................28

Functional and Nonfunctional Configurations .............................................................................29

HCM Configurations ........................................................................................................................................................................ 29

Integration Touchpoints ..............................................................................................................30

Create webclock.html ...................................................................................................................................................................... 30

Create webclock.js .......................................................................................................................................................................... 31

API Calls ............................................................................................................................................................................................ 32

Offline Design Flow ....................................................................................................................33

PouchDB Details ........................................................................................................................35

Inspect Element and Web Clock Screens ..................................................................................35

Use Case 3: Persisting Offline Time Reporting ......................................... 39

Design Flow ................................................................................................................................39

Technical Components and Configurations ................................................................................39

Integration Touchpoints ..............................................................................................................40

Add offline configuration in webclock.js ....................................................................................................................................... 40

Inspect Element and Web Clock Screens ..................................................................................43

Use Case 4: Synchronizing Time Reported Offline.................................... 45

3 W HITE PAPER / MOBILE OFFLINE Time Entry

Technical Components and Configurations ................................................................................45

Integration Touchpoints ..............................................................................................................46

Caching Strategy ....................................................................................... 50

Packaging the Android APK File ................................................................ 51

Packaging the iOS IPA File ....................................................................... 54

Create the Provisioning Profile Using Xcode ..............................................................................55

Select the Destination Scheme...................................................................................................56

Revision History ......................................................................................... 58

4 W HITE PAPER / MOBILE OFFLINE Time Entry

5 W HITE PAPER / MOBILE OFFLINE Time Entry

Solution Components Links

Oracle JavaScript Extension Toolkit https://www.oracle.com/webfolder/technetwork/jet/globalE

Oracle Offline Persistence Toolkit https://github.com/oracle/offline-persistence-toolkit

Mobile Plug Ins – Cordova, XCode https://cordova.apache.org/docs/en/latest/guide/overview/i

Use Cases Addressed in This Document

• Rendering the Web Clock layout

• Storing time reported while offline

• Synchronizing time reported while offline

6 W HITE PAPER / MOBILE OFFLINE Time Entry

This document addresses these key use cases:

The mobile application in this document uses these technologies:

 Node JS: The base platform