We are preparing a new source of documentation for you. Work in progress!

Offline HTML

From Resco's Wiki
Jump to: navigation, search

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

The inline frame 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.

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