First of all: thank you for sharing this beautiful system. I'm looking for a way to change the 'previously submitted values'. I want to download an 'array' from the server and put it in the 'previously submitted values' first. The only way I've found so far is to replace in jsonform.js:

formTree.prototype.computeInitialValues = function () {
    this.root.computeInitialValues(this.formDesc.value);
   };

with

formTree.prototype.computeInitialValues = function () {
    this.root.computeInitialValues(previouslySubmitted);
 };

Where previouslySubmitted is a variable ( in my html) from server: var previouslySubmitted = ({"fotos":[{"foto":["foto1"],"tekst":["text1"]},{"foto":["foto2"],"tekst":["text2"]}]}); But I'm sure there is an easier way to achieve this. Any suggestion?

As raised in #43, JSONForm does not yet support schemas that use the $ref JSON Schema keyword.

At a minimum, JSONForm should support internal references. Support for external references may be harder to achieve due to the async nature of such references.

See JSON Reference and JSON Schema URI resolution scope alteration with the "id" keyword for details.

I am looking for a package just like this to replace Alpaca forms. I have prototyped a simple page to test this package out...

But like Alpaca it seems to have issues with accessibility. Collapsed field sets for instance do not seem to be expandable using the keyboard, only a click event is used?

Is there a way of enabling additional navigation options?

I have some blind users that have to use screen readers and keyboard navigation, and my application has some quite complex settings screens using JSON based forms. I also use collapsed and conditionally visible field sets quite extensively.

hi ! I am trying to build JsonForm by sending schema from the server to client. I cannot use templating because I don't know before hand which schema to use. but once user selects some options, I do AJAX calll to the server and retrieve schema, e.g. dataType: 'json', success: function (data) { const my_schema = JSON.parse(data.schema_str); $('#featureAttribs').jsonForm( my_schema ); }

this works fine, but I also need to save values, so that I can populate form later. Only way I know so far is to extract all values from POST at server side, then form values. But it would be great if I could call something like getFormValue before POST and then send values inside the post and avoid parsing at server ser.

is getFormValue() official API? I did not see it the wiki docs.

I could not also use onSubmit callback (which supplies values), because i could not pass function definition in Json format.

I tried also

    dataType: 'json',
    success: function (data) {
        const my_schema = JSON.parse(data.schema_str);

        my_schema["onSubmit"] = "function (errors, values) { alert(\"Hello\"); return onJsonFormSubmission(errors, values);  }";

        $('#featureAttribs').jsonForm( my_schema );
    }

but callback never gets called. I can guess that JsonForm extracts function part and then parses schema.

i've read the doc and played with changing form layouts..

i am trying to add a configuration form to an app.. BUT the plugin ORDER matters (fifo top down in the config file) so I REALLY want the drag/drop capability... but my array element is a fieldset, and no two are alike.

as an alternative, I could add a position field, 1-n enum.. is there some way to hook them together so that the user can't pick two (or more) in the same position? is there a form init function? vs a special type where I could add a change handler for those fields?

Hi, I've run into an issue that I can't figure out.

I made a custom field that looks like the built in select field, but adds an Other option. When the Other option is selected, it displays a text field for the user to specify. That text field is the actual field used for the data and is just hidden or shown by the select field. The select field just sets the text box value onChange.

Here is the code for the field (largely copied from jsonform.js):

JSONForm.fieldTypes['selectOther'] = {
        'template':`<select onChange="$('#<%= id %>').val((this.value != 'Other')?this.value:''); $('#<%= id %>').toggle(this.value == 'Other'); $('#<%= id %>').focus();"` +
            'class=\'form-control<%= (fieldHtmlClass ? " " + fieldHtmlClass : "") %>\'' +
            '<%= (node.schemaElement && node.schemaElement.disabled? " disabled" : "")%>' +
            '> ' +
            '<% node.schemaElement.selectOptions.push("Other") %>' +
            '<% _.each(node.schemaElement.selectOptions, function(key, val) { if(key instanceof Object) { if (value === key.value) { %> <option selected value="<%= key.value %>"><%= key.title %></option> <% } else { %> <option value="<%= key.value %>"><%= key.title %></option> <% }} else { if (value === key) { %> <option selected value="<%= key %>"><%= key %></option> <% } else { %><option value="<%= key %>"><%= key %></option> <% }}}); %> ' +
            '</select>' +
            '<input type="text" ' +
            'class=\'form-control<%= (fieldHtmlClass ? " " + fieldHtmlClass : "") %>\'' +
            'name="<%= node.name %>" value="<%= escape(value) %>" id="<%= id %>"' +
            'title="Please Specify"' +
            '<%= (node.disabled? " disabled" : "")%>' +
            '<%= (node.readOnly ? " readonly=\'readonly\'" : "") %>' +
            '<%= (node.schemaElement && (node.schemaElement.step > 0 || node.schemaElement.step == "any") ? " step=\'" + node.schemaElement.step + "\'" : "") %>' +
            '<%= (node.schemaElement && node.schemaElement.maxLength ? " maxlength=\'" + node.schemaElement.maxLength + "\'" : "") %>' +
            '<%= (node.schemaElement && node.schemaElement.required && (node.schemaElement.type !== "boolean") ? " required=\'required\'" : "") %>' +
            '<%= (node.placeholder? " placeholder=" + \'"\' + escape(node.placeholder) + \'"\' : "")%>' +
            ' />',
        'fieldtemplate': true,
        'inputfield': true,
        'onInsert':function (evt, node) {
            let selectNode = $(node.el).find('select');
            let inputNode = $(node.el).find('input');

            //Initialize the textbox to the value of the select box
            if(!inputNode.val()) {
                inputNode.val(selectNode.val());
            }

            //If the text box is set to something that isn't in the select options, set select to Other
            if (selectNode.find(`option[value="${inputNode.val()}"]`).length === 0){
                selectNode.val('Other');
            }

            //Show the text box if the select option is Other and hide otherwise
            $(inputNode).toggle(selectNode.val() == 'Other');
        }
    };

And here is how I add it to the schema:

"platform": {
    "type": "selectOther",
    "title": "Platform",
    "selectOptions": ["Phone","Email","In-Person","Facebook","Instagram","LinkedIn"],
    "required": true
}

My problem is that when the form is submitted, the field doesn't behave as if it is actually required. What I want to happen is if a user selects Other but doesn't actually fill the textbox, then they will get a validation error stating that the box is required when they try to submit. Any ideas on what I'm missing to make this work properly?

Thanks!

Hi My name is Patrick,

im working on some project that uses json forms. However im not sure how to initialize a value of a schema key in the json form being passed from android to the form via javascript.

I can be able to pass the string to the form but the value is not being initialized.

Does json forms support this?

Here is a pastebin link to my form

http://pastebin.com/d1ee495N

one of my users wants to make a slide view like this

This results in a ranging slider, like I'd like, but no number to indicate what it means.

I'd rather have something like

short of creating a custom field, is there a mechanism to do this?

append puts the html before the description and makes a mess (from playground) without append

with append

Hello all

This project has been stale for a while (due to us not putting much work in it since we didn't use it for the last couple of years) — we deeply apologize for that. But it still has a lot of traction and would really benefit from the work of all the people that helped build it and all the fantastic forks that exist today.

We are actively considering creating an independent organisation to hold this repo (and possibly all the plugins / related code), so that everyone can get involved, correct, enhance, triage issues, test, etc ... From there, we can pick a few members to publish packages for instance, to smooth the process and speed things up.

Let us know what you think in the comments of this issue below, or via mail at [email protected], we're happy to discuss so the project can really be useful and progress as it should.

Thanks Best ! Cyril @ Joshfire

Hi,

first of all, you've done a great job on this useful project.

I've played with the playground project, and looked at the source. I noticed the field type 'file' is rendered in the generated form.

however reading the source, It seems file upload handling was commented out on submit. since the 'file' type is not available in the documentation, I guess the feature was dropped.

I need to add this feature, and eventually contribute to the project. Any instruction on adding new field types?

Thank you

Hello, I was wondering if there is a way to customize only specific properties instead of having to define them all in the form section. In my example below, I'd like to append an event handler on the zipcode element:

br_address = {
    zipcode: {type: 'string',title: 'CEP',},
    street: {type: 'string',title: 'Logradouro'},
    number: {type: 'string',title: 'Número'},
    district: {type: 'string',title: 'Bairro',},
    cityname: {type: 'string',title: 'Cidade'},
    state: {type: 'string',title: 'Unidade Federativa'},
    complement: {type: 'string',title: 'Complemento'},
    country: {type: 'string',title: 'País'}
}
local_schema = {
    local: {
        type: 'object',
        properties: {
            name: {type: 'string',title: 'Name',required: true},
            age: {type: 'number',title: 'Age'}
        }                
    },
    address: {
        type: 'object',
        properties: br_address
    }
}

$('form').jsonForm({
    schema: local_schema,
    form: [
        'local',
        'address'
    ],
});

Having to list all the fields of an object just to change the behavior of one of them is painful. Any tips ?

I am new to JSONForms. And I'm trying to implement the UI form which will get the Options dynamically and need to set the input value from the value tag. I'm Not finding a way to render the Option/select dynamically.

var JSON_Form= {
   schema:{
      "phone_calendar_integration":{
         "type":"object",
         "properties":{
            "remind_before_minutes":{
               "type":"boolean",
               "title":"Calendar Integration"
            },
            "calendar_name":{
               "title":"Calendar Name: ",
               "type":"string"
            },
            "calendar_fields":{
               "type":"object",
               "properties":{
                  "calendar_wh_clause":{
                     "title":"Any filter that you want to apply:",
                     "type":"string"
                  },
                  "calendar_object":{
                     "title":"Object in Salesforce that you want to Sync Calendar:",
                     "type":"string",
                      "enum":[<Dynamic Option>]
                  },
                  "title":{
                     "title":"Field for title",
                     "type":"string",
                      "enum":[<Dynamic Option>]
                  },
                  "event_id":{
                     "type":"string",
                     "enum":[<Dynamic Option>]
                  },
                  "description":{
                     "title":"Description",
                     "type":"string",
                      "enum":[<Dynamic Option>]
                  },
                  "start_datetime":{
                     "title":"Field for Event Start Date",
                     "type":"string",
                     "enum":[<Dynamic Option>]
                  },
                  "end_datetime":{
                     "title":"Field for Event End Date",
                     "type":"string",
                     "enum":[<Dynamic Option>]
                  }
               }
            }
         }
      }
   }, value : {
   "phone_calendar_integration":{
      "calendar_name":"dftly Tasks",
      "calendar_fields":{
         "start_datetime":"dftlytime__Assigment_Start_Date__c",
         "description":"Name",
         "end_datetime":"dftlytime__Assignment_End_Date__c",
         "title":"dftlytime__dftly_Project__r.Name",
         "event_id":"Id",
         "location":""
      },
      "calendar_object":"dftlytime__dftly_Project_Assignment__c",
      "remind_before_minutes":15,
      "calendar_wh_clause":"dftlytime__Assigment_Start_Date__c >= LAST_N_DAYS:30 and dftlytime__Assignment_End_Date__c <= NEXT_N_DAYS:30 and dftlytime__dftly_Time_Tracker_User__c = '#@#userid#-#'"
} , form:{
      {
         "title":"Calendar",
         "type":"tab",
         "items":[
            {
               "key":"phone_calendar_integration",
               "activeClass":"btn-success",
               "onChange" : function (evt){
                                     var value = $(evt.target).val();
                                     if (value) alert(value);
               }
            }
         ]
      }
   }
}

I have not found a way to create an array of Ace fields. When doing the following the Ace editors show-up within each field, but they drag in a very odd way and appear buggy:

schema: { myArray: { type: "array", title: "Form Values", items: { type: "object", properties: { value: { type: "object", title: "Form Value", properties: { key: { type: "ace", title: "Key" }, value: { type: "ace", title: "Value" } } } } } } }

Is it possible to create an array of Ace types and if so can you please provide an example?

We have need for a select list which supports selecting multiple items. This is typically managed via the "multiple" attribute on a select list. I attempted to modify the underlying select template to test if it was possible by adding the multiple attribute to the select template if it is present in the schema like so: <select name="<%= node.name %>" id="<%= id %>" <%= node.formElement.multiple ? "multiple" + " " : "" %>'. This allowed support for selecting multiple items in the list, but when the form is submitted, only the last item selected is returned.

i am trying to enhance lib to support scrollable checkboxes..

so I built this form

  {
  "schema": {
          "name": {
            "type": "object",
           "properties":{
              "list":{
                "type:": "string",
                "enum": [
                  "one",
                  "two",
                  "four",
                  "ten"
               ]
             },
             "fribble":{
                "type": "string",
                "enum": [
                  "six",
                  "seven",
                  "eight",
                  "nine"
               ]
             }
           }
          }
        },
        "form":[
           {
            "title": "Settings",
            "type": "fieldset",
            "expandable": false,
            "order": 0,
            "items": [
                {
                  "key":"name.list",
                  "type": "checkboxes",
                  "scrollable": true,
                  "height":5
                },
                {
                  "key": "name.fribble",
                  "type": "checkboxes"
                }
            ]
          },
          {
            "type": "submit",
            "title": "Submit",
            "id": "submit_button"
          }
        ],
        "value":{
             "name":{
              "list": ["one","ten"],
              "fribble":["seven"]
             }
        }
      }         

get the right presentation but on submit, I get no results.. (in playground)

The add/remove icons for fields are redundant and misplaced.

Ref links: https://jsonform.github.io/jsonform/playground/index.html?example=fields-tabarray https://jsonform.github.io/jsonform/playground/index.html?example=templating-idx

Screenshots:

If there is a section containing >1 field, then there should be one single remove icon and the entire section should have some border to indicate the area where the action takes place on.