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.
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
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)
- 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 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
- Edit an app project in Woodford.
- Edit a UI component that supports iframes.
- 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
- For offline content, use
file://folder/filename.html(or use Browse to select the file).
- Configure additional details depending on the UI component.
- Click OK.
- 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.
- 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.
- 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
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.
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.
- Create your custom tutorial in HTML format.
- Save it as
- 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
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.
- Uploading custom fonts to Offline HTML for use in the style editor
- Debugging offline HTML
- Webinar Offline HTML in Resco Mobile CRM - Part 1/2 (Intro) Webinar
- Webinar Offline HTML in Resco Mobile CRM - Part 2/2 (Data Access) Webinar
- JSBridge Guide
- Find your Contacts on LinkedIn Blog
- Using JSBridge in entity notification workflow