Offline HTML

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

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

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 and drop 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.

Adding iframes to different UI elements

This section lists some of the locations in Resco mobile apps where you can add iframes.

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.
   • Check Authenticate if the HTML content requires authentication.
   • Check Delay Load to only load the content once it becomes visible. For example, loading of a form tab can be postponed until user switches to display the tab.
   • Check Visible if you want display the content on the screen. Scripts often don't need to be visible.
4. Click OK.

Home screen

Select Home screen from the Project menu and click Add IFrame.

In the app, this iframe is displayed as one of the menu items on the home screen.

Form

Select any entity from the Project menu, then click Show UI to display the list of views, forms, and charts. Edit a form, go to the appropriate tab, and click Add IFrame.

In the app, this iframe is displayed on the selected form tab.

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 / 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

• Debugging offline HTML
• Webinar Offline HTML in Resco Mobile CRM - Part 1/2 (Intro)
• Webinar Offline HTML in Resco Mobile CRM - Part 2/2 (Data Access)
• JSBridge Guide
• JavaScript Bridge reference