Overview

After logging into the developer console. You will find a multitiude of example designs to get started.

After reading through them. Feel free to delete them once familiar with their content, or keep them for reference.

Hello World Example 0

Head over to Dashboard>Dashboard to view the initial hello world examples. Click on hello world example 0.

To see how it renders click "save draft and render" button. This will render a preview in a new tab.

Screenshot

Above: Helloworld Example 0 Design Area

Things to consider on this page:

  • Form Editing Area, define the HTML form elements here.
  • Python Editing Area, write your python code here.
  • CSS Editing Area, optionally define CSS here

Form Design Area

The main ribbon is defined at the top and has the following options:

  • +Field: add a new html element row
  • -Field: remove a row. First select the radio button on the side of the element
  • Move row up/ down: first select the row before moving
  • Save draft and render: this will save a temporary version
  • Commit: once some progress has been made, committing the code will save a permanent version with each commit being stored. You can view any commit at any time via the dashboard.

Screenshot

Forms are designed so that each row should be given a unique variable name.

When defining the variable name of a button, a function should also be defined with the same name. This function gets called upon the button being clicked.

Preview Render

Clicking "save draft and render" will render a preview in a new tab and will save a temporary version.

For example, the Hello world example 0 is rendered as the following: Screenshot

Python Editor

The python editor is like any other python editor.

Each button variable name given in the HTML form design area will map to a function defined in the python code, and will get executed upon that button being clicked. For the example below, the function "a_button_name" get's called as the row is defined with that name.

Screenshot