Web Page Editor

Suppose you already know how to create Data Types and Fields and is familiar with Web page view.

After you may want to customize how your application looks on the web. To do so Codejig Builder provides the Web Page Editor – simple but powerful web page customization tool.


The main idea of the web page editor is to create a webpage by dragging and dropping UI elements to it. This is a fun, fast, and easy way to create a webpage when compared to traditional coding. When the added element is highlighted, you will be automatically toggled to the Properties panel to customize it. The options present in the Properties panel depend on the type of UI element.

Besides application will show an auto-generated web page if none is added, we strongly recommend you to create your own for a better user experience.

Your resulting page is shown on the Working area.

The web page editor can be used to build your webpage from scratch. On the left side of the screen, two panels are located – Components and Properties. You can toggle between them. 

  1. Components panel

    The Components panel contains elements that can be added to your page. All you need to do is drag the element from the panel and drop it on the part of the page you want. After the component is dropped on the Working area, its Properties panel will be opened in place of the Components panel. Read more about Components.

  2. Properties panel

    The Properties panel provides the means to customize the elements that have been added to the page. Read more.

On the right side of the Web pages editor, there is a small "more" button, placed vertically. If you open it, you shall see two additional panels: Type actions and Page properties.

  1. Type actions

    The panel is used to create and open the actions, available for the current web page. That is the code logic, that will be triggered on a specific event, like save or delete action. Read corresponding tooltips to learn more about an action.

  2. Page properties

    On the panel, you can modify the options that are applicable to the whole page. You may change the page header/toolbar, icon, CSS theme.

On the left side of the navigation bar are a breadcrumb trail and a Navigate icon that can be used to navigate the builder.

On the top of the Web pages editor is the navigation bar. The right side of the navigation bar consists of several buttons:


  • The preview button opens the webpage in preview mode.

  • The View in app button opens the webpage in the application (if the page is available there).

  • The clear button deletes everything on the web page editor.

  • The undo button undoes the most recent changes.

  • The redo button cancels the effect of the undo button.

  • The help icon opens the quick tips window.

  • The help link opens documentation with some tips on the webpage editor.

  • The Save web page button saves the changes you have made on the webpage editor.

Note: you can also use keyboard hotkeys (on Windows OS) 'Ctrl+Z' or 'Ctrl+Sihft+Z' to undo/redo respectively, 'Ctrl+S' to save, and 'Ctrl+C' 'Ctrl+V' to copy/paste.;