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.
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.
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.
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:
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.