HTML Snippet

Owned by Will Wilson (Deactivated)
Last updated: Mar 15, 2016
4 min read

 

The HTML Snippet is a special feature that allows you to display a Code Widget AppBlock within a page.  

Home Canvas

On the Home canvas:

  1. Create a space using splitters.
  2. Open the Special Features drawer in the Tool Box
  3. Grab the HTML tool and drop it into the space you just created.
  4. Click the tool on the canvas.
  5. Specify the desired AppBlock.  (Your only choices will be Code Widget and Website AppBlocks)

 

 

 

 

 

You can send a test app to see what it looks like on your phone.

Code Widget on iPhone Home page

 

Detail Canvas

On a Detail canvas:

  1. Open the Special Features drawer under the Generic Tools tab of the Tool Box.
  2. Grab the HTML tool and drop it onto the canvas.
  3. Adjust the tool on the canvas until it is the right size in the right place.
  4. Click the tool on the canvas.
  5. Specify the desired AppBlock.  (Your only choices will be Code Widget and Website AppBlocks)

(the process is the same on an Input canvas and an Empty List canvas)

 

 

 

 

 

You can send a test app to see what it looks like on your phone.

 

Code Widget on Detail page on iPhone

 

List Canvas

For canvas views with rows (List View, Folders View, Item Select View), you cannot add the HTML Snippet tool to a row.  This is because the app uses gesture detection to determine when the app user taps a row (and which row was tapped).  The purpose of this is so that tapping a row leads the app user to another page.  Because of this gesture detection, there are certain field types that can respond to gestures on other page types but not pages with rows.  A Code Widget can contain a link, and if the app user taps that link, he would expect to be taken to that URL.  The reason a Code Widget is not allowed on a row is due to "gesture collision"; essentially, if you have a Code Widget with a link on a row, and the app user taps that link, the app would not know if it should go to the URL or proceed to another page.

If you want to add a Code Widget to a page with rows, you will need to add a header or footer and place the HTML Snippet there.

On a List canvas:

  1. Right-click on a row and add a header or a footer.
    1. Design your header/footer - you can adjust the height and set the Background Color.
  2. Open the Special Features drawer under the Generic Tools tab of the Tool Box.
  3. Grab the HTML tool and drop it onto the header/footer.
  4. Adjust the tool on the canvas until it is the right size in the right place.
  5. Click the tool on the canvas.
  6. Specify the desired AppBlock.  (Your only choices will be Code Widget and Website AppBlocks)

(The process is the same on a Folders canvas or an Item Select canvas.)

 

  1. Right-click on a row and add a header or a footer.
    1. Design your header/footer - you can adjust the height and set the Background Color.

 

2. Open the Special Features drawer under the Generic Tools tab of the Tool Box.

3. Grab the HTML tool and drop it onto the header/footer.

 

4. Adjust the tool on the canvas until it is the right size in the right place.

5. Click the tool on the canvas.

6. Specify the desired AppBlock.  (Your only choices will be Code Widget and Website AppBlocks)

 

 

 

You can send a test app to see what it looks like on your phone.

Code Widget on List page on iPhone


Updates

If you update your Code Widget, you will need to do another build to make the updates take effect.