Web Page View Editor

Suppose you already know how to create Data Types and Fields.

After you may want to customize your application appearance 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 redirected to the Properties section to begin customizing it. The options present in the Properties section depends on the type of UI element.

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

Your resulting page is shown on the central canvas.

The web page editor can be used to build your webpage from scratch. The panel is located on the left side of the screen and is made up of 2 sections - Components and Properties.

  1. Components

    The Components section 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. Read more

  2. Item Properties

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

Note: Undo/redo operations are also supported.

The right side of the menu bar consists of the Clear, Undo, Redo, Help, Preview, and Save web page buttons:

  • 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 preview button opens the webpage in the preview mode

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

At the center of the menu bar is a gear icon that opens the Web page properties window. You can make changes to the web page such as its Name, CSS Theme, Page title, etc. 

On the left side of the gear icon is a breadcrumb trail that can be used to navigate the builder.

See our video tutorial  .