What are Pages? How does it work?

Page is a feature in which we represent the data in the List view or Detail view under the Data tab.

There are two views-

1. Page list
2. Page detail

How to create a Page list?

1. Create JSON on Sublime or notepad just like below-

{
  "form_details":{
    "315323":{
      "Q1__Student_Name":"widget_1lrakndlqc45",
      "Gender":"widget_01iytifgf43",
      "Photo":"widget_1lrakndlqc46",
      "Location_5_Manual":"widget_1lrakndlqc44",
      "Date_Time_12":"widget_1lrakndlqc40",
      "Q2__Switch":"widget_1lrakndlqc24"
    }
  },
  "settings":{},
  "page_name":"Student details",
  "page_type":"1",
  "order_number":1,
  "columns":[
    {
      "widget_1lrakndlqc45":"Student Name"
    },
    {
      "widget_01iytifgf43":"Gender"
    },
    {
      "widget_1lrakndlqc46":"Photo"
    },
    {
      "widget_1lrakndlqc44":"Location"
    },
    {
      "widget_1lrakndlqc40":"Date and Time"
    },
    {
      "widget_1lrakndlqc24":"Toggle"
    }
  ]
}

Please find the description of the above JSON-

Explanation of the above ” form_details ” map-

1. 315323- Form id from which you are showing the data
2. Q1__Student_Name- Identifier of the field from the above-mentioned form
3. widget_1lrakndlqc45 – Mention Random UID to identify the widget.

Explanation of the “columns” map-

1. widget_1lrakndlqc45 – Mention the above UID in the column map as well.
2. Student Name – Mention the name of the column which needs to be shown on the Page List

Where to add this JSON?

1. Navigate to addFormPage API-
   For QA- https://qa.axonator.com/addFormPage
   For Stage – https://stage.axonator.com/addFormPage
   For Prod – https://app.axonator.com/addFormPage
2. Mention the form id from which you are showing the data

3. Add the create JSON to Page JSON section and click on “Add Page” button.

Now the Page list is added to the app under the Data section, refer to the screenshots below-

How to create a Page Detail?

1. Create JSON on Sublime or notepad just like below-

{
  "page_name":"Student Information",
  "form_details":{
    "315323":{
      "Q1__Student_Name":"widget_01iytifgf02",
      "Gender":"widget_1lrakndlqc19",
      "Photo":"widget_1lrakndlqc49",
      "Location_5_Manual":"widget_1lrakndlqc10",
      "Date_Time_12":"widget_1lrakndlqc09",
      "Q2__Switch":"widget_1lrakndlq04"
    }
  },
  "contents":{
    "sections":[
      {
        "widgets":[
          {
            "identifier":"widget_01iytifgf02",
            "prompt":"Student Name"
          },
          {
            "identifier":"widget_1lrakndlqc19",
            "prompt":"Gender"
          }
        ],
        "name":"Student personal details"
      },
      {
        "widgets":[
           {
            "identifier":"widget_1lrakndlqc49",
            "prompt":"Photo"
          },
          {
            "identifier":"widget_1lrakndlqc09",
            "prompt":"Date and Time"
          }
        ],
        "name":"Student Other Details"
      },
      {
        "widgets":[
          {
            "identifier":"widget_1lrakndlqc10",
            "prompt":"Location"
          },
          {
            "identifier":"widget_1lrakndlq04",
            "prompt":"Toggle"
          }
        ],
        "name":"Residential Address"
      }
    ],
    "form_relations":[
      {
        "tab_name":"Children",
        "field_id":[
          "Children_2"
        ],
        "form_id":"315324",
        "list_page_id":"6",
        "type":"insider"
      },
      {
        "tab_name":"District",
        "field_id":[
          "District_3"
        ],
        "form_id":"315330",
        "list_page_id":"6",
        "type":"insider"
      },
      {
        "tab_name":"Action form",
        "field_id":"",
        "form_id":"315327",
        "list_page_id":"6",
        "type":"outsider"
      }
    ]
  },
  "page_type":"2"
}

Please find the description of the above JSON-

Explanation of the above ” form_details ” map-

1. 315323 – Form id from which you are showing the data.
2. Q1__Student_Name- Identifier of the field from the above-mentioned form
3. widget_1lrakndlqc45 – Mention Random UID to identify the widget.

Explanation of the “contents” map-

1. “identifier”: “widget_01iytifgf02” – Mention Random UID to identify the widget which you want to show in the section of the page detail.
2. “prompt”: “Student Name” – Mention the name of the field which you want to show in the sections.
3. “name”: “Student personal details” – Mention the name of the section of the page detail view.

In this way, you can add multiple sections in the page detail view.

Explanation of the “form_relations” map-

1. “tab_name”: “Children” – Mention the name of the tab for child records which will be shown at the bottom of the page detail.
2. “field_id”:[“Children_2”] – Mention the child widget identifier which you want to show.
3. “form_id”:”315324″ – Mention the child form id
4. “type”:”insider” – Keep “insider” for child records, reference form records
5. “type”:”outsider” – Keep “outsider” for action form records