Offline HTML

From Resco's Wiki
Revision as of 07:33, 3 April 2020 by Jzambor (talk | contribs) (See also)
Jump to: navigation, search
Resco JavaScript Bridge

Woodford allows to configure a great wealth of features in Resco mobile CRM apps. All this can be performed without coding. However, some advanced features simply cannot be accomplished without some code. This is where offline HTML can be used.

Offline HTML is a flexible way to extend Resco mobile apps. You can add specially crafted HTML pages to your mobile project and these can be used for online and offline. When we say HTML pages, this is not restricted to .html files! You can also include JavaScript files, cascading style sheets, images, custom fonts, etc.

The most common use cases include:

  • Extending the user interface of mobile CRM apps
  • Adding business logic or complex form validation
  • Replacing the app's UI completely

Inline frame

The HTML pages are displayed directly in the application, in inline frames. An inline frame, or iframe, is a dedicated window of the standard web browser available on your device:

  • iOS – Safari
  • Android – Chrome
  • Windows – Edge or Internet Explorer

See web browser component for more exact details.

Iframes can be placed:

  • as a tab on a Form
  • as an item on the Home screen
  • as a Home screen replacement
  • complete replacement of the app's user interface
  • on a view (in this case, HTML cannot modify the user interface, but it can be used for example to modify the data source - display different records in the view)

Managing offline HTML content

Using Woodford, edit an app project, then select Offline HTML from the Project menu.

Here you can upload or create new files, edit existing files, create folders, etc. All uploaded content will be available for use in the app. To upload new files, either click Upload and select the files, or you can even drag files directly into Woodford.

The screen for managing files can be accessed also from IFrame configuration for various UI components, for example, while editing the Home screen, click Add IFrame and then click Manage.

Tip You can upload zip archives to the offline HTML folder. The application extracts the files automatically.

Adding iframes to different UI elements

  1. Edit an app project in Woodford.
  2. Edit a UI component that supports iframes.
  3. Click Add IFrame and configure it:
    • As Name, enter a label of the new item.
    • As URL, enter the URL of a website or click Browse and select an offline file. You can pass entity data as parameters in the URL, for example https://www.google.com/search?q={name}
    • Configure additional details depending on the UI component.
  4. Click OK.

Additional configuration

Authenticate
This option available for home screen and forms allows you to send the credentials of the current mobile app user to the web resource in the URL. This works for Active Directory CRM authentication only.
Delay Load
On forms, you can delay the loading of a form tab until the user switches to display the tab. This applies to old form UI.
Visible
On forms, you can suppress displaying the content on the screen. Scripts often don't need to be visible.
Provides Data Source
On views, you can enable this option if the offline HTML should serve as the source of data displayed in the view.

Resco JavaScript Bridge

Resco JavaScript Bridge, or JSBridge.js, is a component provided by Resco that allows the scripts in the HTML frame to interact with Resco mobile apps. You can interact with

  • user interface layer: access the forms, perform validation, etc.
  • data layer: access entities and records, create and modify records, query data
  • miscellaneous: access application, its configuration, write files, modify metadata

You have to include JSBridge.js in your HTML.

The latest version is available on GitHub: https://github.com/Resconet/JSBridge

Tutorial

When you launch Resco Mobile CRM app for the first time after installation, a tutorial about the application starts automatically. This tutorial is also available in Mobile CRM app’s About section and can be played by tapping the Tutorial button.

You can replace this tutorial with your own content, to help your users with some specific aspects of your customized Mobile CRM app.

  1. Create your custom tutorial in HTML format.
  2. Save it as Index.html.
  3. Upload it the Offline HTML section of the project, to the folder (you need to create it) named exactly onboarding (lower and upper cases need to be maintained). The path to this file should be onboarding/index.html.

In the HTML, you can use images that can be stored in this folder as well or you can use links to other online/offline content. You can also use JSBridge to access CRM data.

See also