Web page View
Web page view shows a data type object as a viewable or editable form. Web page views are created in the Web pages editor. Designing and creating web pages is the most common part of application development. This article includes the general explanation of a web view, its relation to data types, and usage in the Codejig Builder.
- Web pages view Dashboard
- Data types and web page view
- Embedded Data types and Web page view
- Adding elements to Web page view
- Text and Table views inside the Web page view
- Web page view in the application website
Web pages view Dashboard
The standard way to open a Web page view from the Builder is to open Web pages from the menu.
The main parts of the Web pages:
- The list of all the created web pages.
- Create a new page alongside the data type of the same name.
- Delete a web page.
- Filter web pages by categories.
- Preview window. Click on the preview window to start editing the page in the Web pages editor.
- Toggle to the Properties window of the web page.
- Open the related data type details page.
- Change the Homepage of the website.
Data types and web page view
Since a web page view is a human-friendly representation of the data type (information, design), the web page must be related to a data type.
By default, a web page is created with the Directory data type. You may also add a web page view to the Embedded or Report types.
Multiple web pages can be created for the same data type. You can see the list of related views on the data type details page.
Multiple web pages can be created for the same data type. You can see the list of related views on the data type details page.
Adding elements to Web page view
Web page views can contain fields, arbitrary HTML mark-up and could be used for layout of web pages.
If you open any page in the Web pages editor, you will see the Components panel on the left side. Drag and drop components to the Working area to create your web pages.
Inside the "LAYOUT" you can find a button, plain HTML text, or Group Box. In the "ADD NEW FIELD" section, new fields can be created. The field is the main element that contains information in the, most commonly, primitive data type. To add a composite type, unfold the Define and choose the Regular or Collection view. Read more here.
.png&serveAsImage=true)
Embedded Data types and Web page view
Embedded data type is used in the context of some other data types and is their integral part.
Web page view defined on an embedded type can be included in a parent form view.
Embedded web page views can be re-used inside multiple data types. It's more like a web page rendered inside the other web page.
To add an embedded view to the working area, from the ADD NEW FIELD → Define drag and drop Regular field. In the next pop-up window, provide a Name and select the embedded type you want to import.
To add an embedded view to the working area, from the ADD NEW FIELD → Define drag and drop Regular field. In the next pop-up window, provide a Name and select the embedded type you want to import.
Text and Table views inside the Web page view
Inside the Web page view, it is possible to specify text or table view for a data type.
To do so, from the ADD NEW FIELD → Define drag and drop Regular or a Collection field.
When you define a Regular field, the data type is represented in the type of a Select field, where you can choose the text view that will show up. To change a text view (or create a new one) for an imported regular field,
go to its Properties, APPEARANCE, and change the View parameter.
When you define a Collection field, an imported data type will be shown in the table form. To change its view,
go to the newly created field Properties, GENERAL, and modify the View parameter.
Web page view and the application website.
If you have designed and created a web page view, you can present it to the end-user on the application.
First, you need to make sure that your web page is added to the app menu from the Menu editor.
Then you need to Publish your application.
After that, you can finally go to your application and open the web page from it.
Let's take a detailed look at the Greenland Navy on-boarding web page available here. That is the final page, intended for the user. It has a header (title, "Save" and "Show change" log buttons) and body (text, date, and image fields and buttons).
The URL looks as the follows: https://.../update/2500000121828211225 where the word "update" indicates that we are currently in the "edit" mode
of the instance hidden behind the id "2500000121828211225".
Remove the id and replace the "update" with "create" and you will start creating a new instance of the web page. The same edit mode, but only for another instance.
Now, if you delete the "create" part of the URL (you will receive examples.codejig.com/en/entity2500000121828209839/), then you will see a table view of a data type, called an index page.
An index page is a page (unique per data type) where the data is shown in the table form. On the index page, you may create/delete/filter and open (if you click on the corresponding row) instances. So, the data type may have different web page views (templates) and many instances that hold the data.
Let's take a detailed look at the Greenland Navy on-boarding web page available here. That is the final page, intended for the user. It has a header (title, "Save" and "Show change" log buttons) and body (text, date, and image fields and buttons).
Now, if you delete the "create" part of the URL (you will receive examples.codejig.com/en/entity2500000121828209839/), then you will see a table view of a data type, called an index page.
An index page is a page (unique per data type) where the data is shown in the table form. On the index page, you may create/delete/filter and open (if you click on the corresponding row) instances. So, the data type may have different web page views (templates) and many instances that hold the data.