1

Offline HTML

From Resco's Wiki
Jump to navigation Jump to 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.

Where can you use them

Iframes can be placed:

  • as a tab on a Form
  • as an item on the Home screen
  • as a Home screen replacement
  • as a complete replacement of the app's user interface
  • as a global hidden iframe
  • 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)
  • on a chart (to provide data source)
  • on a dashboard
  • on a calendar (tourplan)
  • into form rules (you can execute JavaScript from rules)
  • on a questionnaire (for advanced validation, navigation, and other use cases)
  • on the route plan

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 also be accessed from the 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.

Offline HTML window in Woodford with editor

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. (On a form, drag Iframe from the Tabs pane to the Designer pane.)
    • 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}
    For offline content, use file://folder/filename.html (or use Browse to select the file).
    • Configure additional details depending on the UI component.
  4. Click OK.

Offline HTML: Add iframe to contact form sample

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.
Open web links in external browser
Use an external browser to display web content.
Provides Data Source
On views and charts, you can enable this option if the offline HTML should serve as the source of data displayed in the view/chart.

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

Known issue

Due to an iOS 13 change made by Apple, your Offline HTML code calling JSBridge v10.0 or older may cause runtime errors. This issue does not affect JSBridge v10.1 and newer.

The solution is upgrading the JSBridge.js script to the latest version via NPM or from official GitHub repo (see the top of this page for links). Upgrading the script should not affect your solution, backward compatibility is our priority. However, we understand that you might need to be extra careful. Therefore, we have prepared fixed versions of older JSBridge.js scripts. You can get exactly the same version as you currently use in your production from this repo with only the minimal fix applied.

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



Was this information helpful? How can we improve?
Retrieved from "https://docs.resco.net/mediawiki/index.php?title=Offline_HTML&oldid=10551"