How does this work?

How to build custom views.

Building Views

The public folder contains all the data required to build a custom view.

|-- public
|   |-- definition.json
|   |-- index.html
|   |-- npm-shrinkwrap.json
|   |-- package.json
|   |-- tsconfig.json
|   |-- utils-browser.js
|   |-- utils-node.js
|   |-- webpack-require.d.ts
|   |-- javascripts
|   |   |-- forms
|   |       |-- directives.js
|   |       |-- services.js
|   |       |-- patient_form
|   |       |   |-- controller.js
|   |       |   |-- data.js
|   |       |   |-- template.html
|   |       |   |-- view.js
|   |       |-- telemedicine_consent
|   |           |-- controller.js
|   |           |-- data.js
|   |           |-- template.html
|   |           |-- view.js

There are a few files here which are necessary for the forms to function.

definition.json

This file is used to define the forms contained within this SDK. These definitions are used to list the “forms” contained within this bundle on the HTML5 mobile app. The ordering of the list here defines the order in which the forms are listed in the mobile app for any given Job.

{
  "forms": [
    {
      "name": "Patient Form",
      "view": "patient_form/view.js",
      "data": "patient_form/data.js"
    },
    {
      "name": "Telemedicine Form",
      "view": "telemedicine_consent/view.js",
      "data": "telemedicine_consent/data.js"
    }
  ]
}

Each item in the definition has three major parts:

  1. name: The name this form. This name is displayed as the name of the form in the job details page.
  2. view: The view file that defines all the view and rendering logic.
  3. data: The data file that defines all the networking logic.

data

This file contains all of the logic required to fetch as well as save data to and from Salesforce, via Skedulo.

When opening the page, the fetch function in data.js is called and the resulting data set is then fed into the view.js file (which is responsible for calling the controller function and rendering the view).

Once a save action is triggered by the controller, the diff that has to be saved is fed into the save function within data.js and the data-set is saved to Salesforce.

During development of these forms, no action takes place after form submission. However, on the mobile app, after a successful save, the Custom View is closed and a browser back is automatically triggered and the page navigates back to the job details view.

view

Data fetched by the above mentioned fetch function is fed into this view along with the currently active JobID, the saveFn, as well as any other additional core plugins (only signaturePanel for now).

All DOM manipulation must be done within this file. This file should be responsible for bootstrap rendering of the app via the framework or otherwise. The default implementation comes with Angular to help speed up development. However, this can be changed to use React or any other view framework.

The other files like controller.js, directives.js, services.js, template.html etc. are just called by the view function. Refer to one of the view.js files within the sample code to see how this works.


Last modified August 2, 2019: Updated fonts and finished guide 1:1 (fe87bc2)