{dialog.object}setJSONFormItems Method

IN THIS PAGE

Discussion
Example
Example: Using Xbasic to Generate Items
JavaScript Executed by the Callback
Videos

Syntax

{dialog.Object}.setJSONFormItems(JSONFormName, Items)

Arguments

JSONFormNamestring: The name of the JSON Form control to populate (e.g., 'JSONFORM1').
Itemsarray: An array of objects that define the items (controls, layout containers, etc.) to populate the JSON Form with.

Description

Populates a JSON Form control with a specific structure (items) defined in a JavaScript array or object. This is the core method used to create Data Driven Forms.

Discussion

The setJSONFormItems method allows you to dynamically define the structure of a JSON Form at runtime. This is distinct from populate (which sets the *data* values); this method sets the *form definition* (the fields themselves).

The Items array is typically generated using Xbasic helper functions like A5Helper_getJSONFormitems_fromDatabase() or a5wcb_jsonFormItems_from_commands(), but it can also be constructed manually in JavaScript.

An easy way to generate the Items array is to build a JSON Form using the builder. Then click the Show... button and select JSONForm Items (JSON) from the pop-up menu.

The Show menu with the JSONForm Items (JSON) command.

Show JSONForm Items

Example

In this example, we manually define a simple form structure with two fields and apply it to a control named 'jf'.

// Define the items array
var items = [
    {
        "type": "edit",
        "id": "TEXTBOX_1",
        "data": { "from": "First_Name" },
        "label": { "text": "First Name" }
    },
    {
        "type": "edit",
        "id": "TEXTBOX_2",
        "data": { "from": "Last_Name" },
        "label": { "text": "Last Name" }
    }
];

// Apply the definition to the JSON Form control
{dialog.object}.setJSONFormItems('jf', items);

Example: Using Xbasic to Generate Items

This method is often called within an Ajax callback. The Xbasic function generates the item definition string, and the JavaScript returned by the callback executes setJSONFormItems.

// Xbasic function handling the callback
function xb as c (e as p)
    dim formname as c = e.dataSubmitted.formname
    dim fn as c = a5.Get_Exe_Path() + "\MDBfiles\datadrivenjsonform.xlsx"
    dim cs as c = fn
    dim table as c = "DataDrivenJSONForms"
    dim style_name as c = e.tmpl.style_name

    ' Generate the JSON definition from the database
    dim def as c = A5Helper_getJSONFormitems_fromDatabase(cs,table,"FormId",formname,style_name)

    ' Construct the JavaScript to send back to the client
    dim js as c
    js = "var items = " + def + ";" + crlf()
    js = js + "{dialog.object}.setJSONFormItems('jf',items);"
    
    xb = js
end function

JavaScript Executed by the Callback

var items = /* JSON definition returned by the server */;
{dialog.object}.setJSONFormItems('jf', items);

Videos

How to dynamically set the structure of a JSON Form

In this video we show how you can dynamically set the structure of a JSON form using a Javascript function.

A data driven form is a form where the questions shown on the form are retrieved from a database. If you want to add a new question to the form you don't have to edit the form. You just edit the database that lists the questions.

Download Component