Question on possibility of Multiselect checkbox dropdown using jsonform

KarishmaKain commented 1 year ago

Question Is it possible to create a multiselect checkbox dropdown using jsonform? I went through the documentation but couldn't find an example. I tried using the checkbox schema code and Selection list schema code but i couldn't get checkbox based dropdown. Can someone please help with an example if it is possible?

I am looking for something like this:

sdetweil commented 1 year ago

there is no builtin type like that

but you could do it

{
  "schema": {
    "colors":{
      "type": "object",
      "title": "properties colors",
      "properties": {
        "all":{
          "type":"checkbox"
        },
        "selections":{
          "type":"array",
          "title": "list",
          "items": {
            "type": "string",
            "enum": [
              "INFO",
              "LOG",
              "WARN",
              "ERROR",
              "DEBUG"
            ]
          }
        }
      }
    }
  },
  "form":[
    {
      "title": "Settings",
      "type": "fieldset",
      "expandable": false,
      "order": 0,
      "items": [
            {   
              "key":"colors.all",
                  "title":"All",
                  "onChange": "(evt,node)=>",
                        "function setc(p,s){p.find('legend').first().css('color',s?'red':'blue')};",
                        "var selection=$(evt.target).prop('checked');",
                        "var parent =$(evt.target).closest('fieldset');",
                        "var allchecked=parent.find(\"input[name$='disabled']:checked\").length;",
                        "var count=parent.find(\"input[name$='disabled']\").length;",
                        "if(selection===true && allchecked!==count){selection=false};",
                          "setc(parent,selection);}"
            },
            {
              "key": "colors.selections",
              "type": "checkboxes",
                  "notitle":true
            }
      ]
    }
  ]
}

but you will have to code up the onChange handler to flip them all on or off I posted one of mine for example.. look thru the content and then use jquery operations to find the checkboxes and check or uncheck them

from playground without the onChange coded (I wrapped that over multiple lines for visbility here, which isn't supported in json) Screenshot_2022-09-15_14-53-48

sdetweil commented 1 year ago

and you could code an onChange for the checkboxes to change the text color as well

and u might be able to use a section type for the All checkbox to keep it out of the object itself

KarishmaKain commented 1 year ago

Thanks for the response and this could work for me as an alternative. But could the same thing be done in a dropdown scrollable list(since i will have a 100 options to choose from). The current structure is directly displayed and when 100 options are available in the page it will either become crowded or the entire page will run long. A scrollable dropdown list which would have a 100 options (this can be done), a list of checkboxes (also can be done like you have shown). But can this both be combined to have scrollable dropdown list with a checkbox option next to each of the options?

sdetweil commented 1 year ago

I don't think there is any way to accomplish this with the existing capabilities. BUT one could create a new type, and use the jQuery select2 type to implement the list. (as jsonform depends on jQuery)

I created a key:value pair type for one of my projects.

is there a reason u want checkbox AND text, if it's multi select and the text is highlighted?

sdetweil commented 1 year ago

I added support in the base.. , would u like to try it out on my fork .

whereever your jsonform folder is, rename it out of the way,

git clone https://github.com/sdetweil/jsonform to recreate the folder in the same place

then in the created jsonform folder do git checkout scrollable_checkboxes

in the form u can add

scrollable:true, height: x

where x is number of em's high to make the scroll box

example (this file one folder beside node modules, change the paths then use browser file:///path to this html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>listtest form select </title>
  <link rel="stylesheet" style="text/css" href="../node_modules/jsonform/deps/opt/bootstrap.css" />
</head>
<body  style="margin:30px;">
  <h1>heading</h1>
    <form></form>
    <div id="res" class="alert"></div>
  <script type="text/javascript" src="../node_modules/jsonform/deps/jquery.min.js"></script>
  <script type="text/javascript" src="../node_modules/jsonform/deps/underscore.js"></script>
  <script type="text/javascript" src="../node_modules/jsonform/lib/jsonform.js"></script>
  <script type="text/javascript" src="../node_modules/jsonform/deps/opt/jsv.js"></script>
  <script type="text/javascript" src="../node_modules/jsonform/deps/opt/jquery-ui.js"></script>
  <script type="text/javascript" src="../node_modules/jsonform/deps/opt/ace/ace.js"></script> 
  <script type="text/javascript">
     $('form').jsonForm(
     {
        schema: {
          name: {
            type: 'object',
            properties:{
              list:{
               "type": "array",
                "title": "Options",
                "items": {
                  "type": "string",
    //              "type": "checkboxes"    // is error now, not allowed in schema
                  "title": "Option",
                  "enum": [
                    "one",
                    "two",
                    "four",
                    'ten'
                  ]
                }
              },
             fribble:{
                type: 'object',
                properties:{
                  list:{
                   "type": "array",
                    "title": "Options",
                    "items": {
                      type: "string",
                      enum: [
                        "six",
                        "seven",
                        "eight",
                        'nine'
                      ]
                    }
                  }
                }
             },
             foobar: {
                type:'string',
                enum: [
                  "foo",
                  "bar"
                ]
             }

            }
          }
        },
        form:[
           {
            "title": "Settings",
            "type": "fieldset",
            "expandable": false,
            "order": 0,
            "items": [
                {
                  "key":"name.list",
                  type: "checkboxes",
                  scrollable: true,
                  height:5
                },
                {
                  "key": "name.fribble.list",
                  "type": "checkboxes"
                },
                {
                  "title":"test of enum on not array",
                  key:"name.foobar"
     //          ,  "type":"checkboxes"   // is error now, schema item not array
                }
            ]
          },
          {
            "type": "submit",
            "title": "Save, Create config",
            "id": "submit_button"
          }
        ],
        value:{
             name:{
              list: ['one','ten'],
              fribble: { list: ['seven'] }
             }
        },
        onSubmit: function (errors, values) {
          if (errors) {
            $('#res').html('<p>I beg your pardon?</p>');
          }
          else {
            $('#res').html("test results="+ JSON.stringify(values),'</p>');
          }
        }
     }
    );
    </script>
</body>
</html>

i see this
scrollable, not scrollable, not array

Screenshot at 2022-09-18 08-57-27

stale[bot] commented 1 year ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

jsonform / jsonform

Question on possibility of Multiselect checkbox dropdown using jsonform #416