David G. David G. - 5 months ago 28
CSS Question

Create responsive bootstrap form programmatically from data

I'm trying to build a responsive form programmatically from a json file. The file will contain information on each item that needs to be shown (ex: label+textfield, then label+combobox, then label+etc, including the data for the labels). I would like to be able to read that json to build any forms programmatically when the user load the page with his data (his form), with a responsive layout (if there is space for 2 items in the same line, have two columns, if not, one column, etc.). The item should use the space correctly too (the width that they have access to, like normal bootstrap fields).

My goal is to code my layout, then forget about it. I want to be able to add more items and get a responsive layout like I described (for different screen sizes and devices).

I searched the web a lot but could only find hard-coded solutions for specific responsive forms/needs.

Is there a simple way to do this? Or even a way at all? Are there free frameworks/plugins to do this or to help me do it?

Thank you anyway for your help. If my question is unclear please ask for clarifications and I will gladly add more information as needed.

PS: I get my json from a database with asp code. Right now I have dhtmlx layout and components but they are not responsive. Still, some of my components will have to coexist in the new environment.

Answer

I did not get an answer but still did an html form generated from data, with bootstrap. This is just an example. The data is objects that I made. You can see some examples of constructions here, that are responsive.

You need to download the linked stylesheets and scripts (see the HTML file) for it to work. You only need bootstrap and JQuery for most of the app, the other includes are for specific controls.

I hope this can help.

This is my index.html

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
    <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
    <script src="js/bootstrap-checkbox.min.js" defer></script>
    <script src="js/bootstrap-filestyle.min.js" defer></script>

    <link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.1/summernote.css" rel="stylesheet">
    <script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.1/summernote.js"></script>

    <script src="js/myJavaScript.js"></script>
</head>

<body onload="addAllElements()">
    <h1>Exemple de formulaire responsive généré pour Bootstrap</h1>
    <br/>
    <div class="row" id="mainRow">
    </div>
</body>

</html>

And this is my javascript file

//This function should read a json file and produce the right form
function addAllElements() {
    //A test for generated forms (from objects)
    for (var i = 0; i < 3; i++) {
        addElement({
            label: "SAQ ID :",
            tag: "input",
            type: "text",
            infos: { name: "sapID" }
        });
        addElement({
            label: "Family of equipement :",
            tag: "textarea",
            infos: { name: "familyEQ" }
        });
        addElement({
            label: "Category of equipement :",
            tag: "textarea",
            infos: { name: "categoryEQ" }
        });
        addElement({
            label: "Name of the equipement :",
            tag: "input",
            type: "text",
            infos: { name: "nameEQ" }
        });
        addElement({
            label: "Serial Number :",
            tag: "input",
            type: "text",
            infos: { name: "serial" }
        });
        addElement({
            label: "Type/Model :",
            tag: "input",
            type: "text",
            infos: { name: "typeModel" }
        });
        addElement({
            label: "Photo :",
            tag: "pictureUpload",
            type: "file",
            infos: { name: "photo" }
        });
        addElement({
            label: "Can the material be assigned or sold :",
            tag: "checkbox",
            type: "checkbox",
            infos: {}
        });
        addElement({
            label: "Some rich text editing :",
            tag: "richEditor",
        });
    }

    //We add the styling for checkboxes, file inputs and rich editors
    $(':checkbox').checkboxpicker();
    $(":file").filestyle({ buttonText: "File", buttonName: "btn-primary", placeholder: "No file" });
    $('.richEditor').summernote();
}

//This function add a single element to the form
function addElement() {
        //We create the group div (the whole element div)
        var newDiv = document.createElement("div");
        if(arguments[0].tag !== "richEditor"){
            newDiv.className = "form-group col-xs-12 col-sm-6 col-lg-4 col-xl-3";
        }else{
            newDiv.className = "form-group col-xs-12 col-sm-12 col-lg-12 col-xl-12";
        }

        //We create and add the label to the div
        var newLabel = document.createElement("label");
        if(arguments[0].tag == "richEditor"){
            newLabel.className = "col-xs-12 col-sm-2 col-lg-2 col-xl-2 control-label";
        }else{
            newLabel.className = "col-xs-12 col-sm-5 control-label";
        }
        newLabel.innerHTML = arguments[0].label;
        newDiv.appendChild(newLabel);

        //We create and add the input to the div
        var inputDiv = document.createElement("div");
        if(arguments[0].tag == "richEditor"){
            inputDiv.className = "col-xs-12 col-sm-10 col-lg-10 col-xl-10";
            //inputDiv.style.paddingLeft = "5%"
        }else{
            inputDiv.className = "col-xs-12 col-sm-7";
        }
        newDiv.appendChild(inputDiv);

    switch (arguments[0].tag) {
        case "input":
            var newInput = document.createElement("input");
            newInput.className = "form-control";
            newInput.type = (arguments[0].type !== undefined ? arguments[0].type : "");
            newInput.placeholder = (arguments[0].infos.placeholder !== undefined ? arguments[0].infos.placeholder : "");
            newInput.name = (arguments[0].infos.name !== undefined ? arguments[0].infos.name : "");
            inputDiv.appendChild(newInput);
            break;
        case "textarea":
            var newInput = document.createElement("textarea");
            newInput.className = "form-control";
            newInput.type = (arguments[0].type !== undefined ? arguments[0].type : "");
            newInput.placeholder = (arguments[0].infos.placeholder !== undefined ? arguments[0].infos.placeholder : "");
            newInput.name = (arguments[0].infos.name !== undefined ? arguments[0].infos.name : "");
            newInput.style = "resize: vertical;";
            inputDiv.appendChild(newInput);
            break;
        case "pictureUpload":
            var newInput = document.createElement("input");
            newInput.className = "form-control stylesheet";
            newInput.type = "file";
            newInput.placeholder = (arguments[0].infos.placeholder !== undefined ? arguments[0].infos.placeholder : "");
            newInput.name = (arguments[0].infos.name !== undefined ? arguments[0].infos.name : "");
            inputDiv.appendChild(newInput);
            break;
        case "checkbox":
            var newInput = document.createElement("input");
            newInput.className = "form-control";
            newInput.type = "checkbox";
            var att = document.createAttribute("data-reverse");
            newInput.setAttributeNode(att);
            att = document.createAttribute("checked");
            newInput.setAttributeNode(att);
            inputDiv.appendChild(newInput);
            break;
        case "richEditor":
            var newInput = document.createElement("div");
            newInput.className = "form-control richEditor";
            inputDiv.appendChild(newInput);
            break;
        default:
    }

    var mainRow = document.getElementById("mainRow");
    mainRow.appendChild(newDiv);
}