This tutorial is for the new, online project designer. The tutorial for the Desktop Designer is available here .

Html Point

Learn how the html point can be used and see it in action with the sample projects.

What is the HTML point?

The HTML Point can be used in conjunction with the Javascript Point to display HTML markup inside a session. As demonstrated in the Javascript point tutorials , javascript can be used to populate the values for points, including HTML Points. This enables being able to display common HTML elements such as headings, tables, hyperlinks and much more.

Key Features

  • Can be used to display information in a unique way, using HTML markup and CSS to customise the format.
  • Can be a powerful tool when used in conjunction with the Javascript point to display information when a session is opened or a point's value has changed and much more.
  • Can be used to display information for sessions in a sub project, using the Sub Project point .
  • Supports user interaction through the use of HTML hyperlinks that can execute URL schemes which directly interact with sessions on the device to perform actions such as opening/sending/duplicating/deleting sessions and more.

Html point example ios

Configuration and Settings

This point is dependant on other points to populate its value and therefore does not have many properties to customise in the designer. See below for details on each of this point's properties.

Html point web properties

HTML Settings

Size

The size of the point can be adjusted to set then number of lines of text to display.

Sample Projects

The following samples demonstrate how the HTML point can be used in conjunction with the Javascript point and Sub Project point to provide advanced functionality to your projects. It is highly recommended that you read through the tutorials for the Javascript point and the Sub Project point before proceeding. To get started, please start by downloading the project files and the javascript files that are used in these samples.


Sample Projects
You can download the sample files for this tutorial or import the projects directly into your account. Please note that you may already have these samples if you have recently downloaded the Javascript point samples.
Download the Sample Files Import into My Account

Sample 1: HTML & Javascript

This sample demonstrates several key features of using the HTML point with the Javascript point. On page On page three of the javascript_sample.ppc project, there are three sections which will be discussed below:


1. Deleting a Project

The first section contains a javascript point JavascriptPoint1 which updates the html point HtmlPoint1 . The javascript code that was used for this section can be seen in javascript_sample_3_part_1.js . A key feature shown in this sample is the use of URL Schemes to create links that can process actions on installed projects and sessions.

Html point sample 1 section 1 ios

This particular example creates a URL Scheme to delete a project named javascript_sample_blank_project.ppc: 

var blankProjectName = 'javascript_sample_blank_project.ppc';

...

var urlToDeleteProject = app_prefix + "://device/delete/project?project=" + blankProjectName;

What are URL Schemes?
For further information on what URL schemes are available and how they can be used to empower your projects, please refer to the URL Scheme documentation.
Learn how to use the URL Schemes

2. Interacting with Other Projects

The second section of this sample demonstrates how the Javascript and Html point can be used to interact with a separate project.In this case the project is a sub project, however it does not need to be a sub project in order for this to work.

Html point sample 1 section 2 ios

The javascript code that was used for this section can be seen in javascript_sample_3_part_2.js . This section demonstrates several more URL Schemes:


Creating a session

This will copy the point values of edit1, edit2 and parent from the open session, into the new duplicated session. 

// Link to create a session
var valuesToCopy = encodeURIComponent(JSON.stringify({"edit1":"edit1", "edit2":"edit2", "parent":parentGUID}));
var urlToCreateSession = app_prefix + "://device/new/session?project=" + subProjectName + "&values=" + valuesToCopy;

Opening a session
// Link to Open session
var urlToOpenSession = app_prefix + ":///open/session?project=" + subProjectName + "&session=" + childSession.guid;

Sending a session
// Link to Send session
var encodedJSONForSend = encodeURIComponent(JSON.stringify([{"project":subProjectName, "sessions":[childSession.guid] }]));
var urlToSendSession = app_prefix + ":///send/sessions?sessions=" + encodedJSONForSend;

Duplicating a session
// Link to Duplicate session
var duplicateJSON = {
  "duplicate" : [
    {
      "project":subProjectName,
      "sessions":[childSession.guid],
      "values":{"edit1": childSession.values['edit1'], "edit2": childSession.values['edit2'], "parent": parentGUID},
    }
  ]
};
var encodedJSONForDuplicate = encodeURIComponent(JSON.stringify(duplicateJSON));
var urlToDuplicateSession = app_prefix + ":///duplicate/sessions?params=" + encodedJSONForDuplicate;

3. Javascript Callbacks & Html

This section is similar to the Javascript Sample 2: Javascript Callbacks. It demonstrates how to use the various javascript callbacks to interact with a HTML point including; onSessionStart, onSessionFinish, onPointValueChanged.

Html point example ios