Model

Download Model Module
Version 201810241358

Here we explain the basic model of the project. Data is stored as JSON and synchronized in real-time for every connected client. So we can store data in CloadIO as a JSON file like the below steps:

Make JSON File

First of all, make the src folder in the project root, then inside it create a JSON file and save.

Notice

You should replace your model JSON file with these example codes.

myApp/src/model.json 
{
    "version": 202105120735,
    "common": {
        "sub": {
            "client": {
                "text": "Form Title",
                "sub": {
                    "first": {
                        "text": "First Name"
                    },
                    "last": {
                        "text": "Last Name"
                    },
                    "gender": {
                        "text": "Gender",
                        "inputType": "select",
                        "src": "key",
                        "value": {
                            "0": {
                                "text": "Male"
                            },
                            "1": {
                                "text": "Female"
                            }
                        }
                    },
                    "createdAt": {
                        "text": "Created At",
                        "inputType": "time",
                        "display": "inTable"
                    },
                    "createdBy": {
                        "text": "Created By",
                        "display": "inTable"
                    }
                }
            }
        }
    }
}

Parse JSON File

Before doing anything we should convert the JSON file. The JSON.parse() method parses a JSON string, constructing the JavaScript value or object described by the string.

Now, open the dashboard.cloadio.com. After login into project account, open the browser console and enter the following commands. Then press enter. 

var model = JSON.parse(`{
    "version": 202105120735,
    "common": {
        "sub": {
            "client": {
                "text": "Form Title",
                "sub": {
                    "first": {
                        "text": "First Name"
                    },
                    "last": {
                        "text": "Last Name"
                    },
                    "gender": {
                        "text": "Gender",
                        "inputType": "select",
                        "src": "key",
                        "value": {
                            "0": {
                                "text": "Male"
                            },
                            "1": {
                                "text": "Female"
                            }
                        }
                    },
                    "createdAt": {
                        "text": "Created At",
                        "inputType": "time",
                        "display": "inTable"
                    },
                    "createdBy": {
                        "text": "Created By",
                        "display": "inTable"
                    }
                }
            }
        }
    }
}`);

Set to CloadIO

After parsing the JSON file, we must set this model to CloadIO. For this purpose, enter the following codes in the console, then press Enter.
ref.child('model').set(model, function (error) {
    if (error)
        console.log(error);
    else
        console.log('ok');
});

Get from CloadIO

Now you can get data from CloadIO, and cache them in your project.

You can get the data in app.js if you need them on more than one page, else you can get the data on the specific page that is needed. 

ref.child('model').get(function (error, values) {
    if (error)
        console.log(error);
    else if (values) {
        if (!app.local.model)
            app.local.model = {};
        app.local.model = values;
    }
});

Notice

For more details about CloadIO visit the CloadIO website.

Model Details

The Model file has two general sections. The first is the version for controlling the changes, and the other is object contains fields and their properties.

Version

The version is based on timestamp syntax and it should be 12 digits. When each object, field and etc is modified or added tofile, it should be changed. It is in order to upload the model toCloadIo, so we can have version control and get the new changes.

Notice

Consider that according to every change the new version number should be greater than the previous version number.

model.json 
{
    "version": 202105120735
}

Objects

The objects section includes all objects, fields, and properties. According todifferent project sections we can define separated objects like the client, dashboard, etc. There is a common object too, for general and common fields and properties.

Parameters Type Description
text String Optional. The title of field.
required boolean Optional. Is this field is required or not? If it is required we write it true.
inputType string Optional. The default of this is a string and it is "text", otherwise, you should write one of the below input types:

  • select: If we want user to select only one option from the available options, we set the input type to "select" and write the value of the options in the value property.

  • multiSelect: If we want user to select one or more options from the available options, we set the input type to "multiSelect" and write the value of the options in the value property.

  • number: If we want to persuade user to enter only the number type in the field, we set the input type tonumber.

  • shortNumber: This is the same as number but it suitable for small numbers. It has increased and decrease button for selecting specific digit.

  • map: If we want to get a user location, we set the input type to map.

  • time: If we want user to set a time, we add the time input type and set the time format in the format property.

  • file: If we want user to be able to upload a file, we set the input type to file and set the accepted suffixes files in the accept property.

  • voice: If we want user to be able to upload a voice, we set the input type to voice.

  • image: If we want user to be able to upload an image, we set the input type to image and write the accepted suffixes in the accept property.

  • longText: If we want to create a field where user can easily type long texts, we should enter the longText for inputType.

  • boolean: We use it only when we need a field that just takes true or false.

  • tel: This field is for when user wants to enter a phone number.

  • multiTel: This field is for when user wants to enter one or more phone numbers.

  • email: When we use the e-mail in the form, This will check the syntax of entered email.

  • virtual: It is for when we want to use a field just in codes calculation, and in design or user interface it does not appear.
placeholder String Optional. The text for placeholder of the field.
toolTip String Optional. It is a message to more describe the field.
display String Optional. This property is for when we want to show or hide the field in the form or table. It can be "inTable", "inForm" or "none".
accept String Optional. Accepted files type or images are included in this section.
value Object Optional. The field values are here. These are the items of fields. For example, when we have a select input type, it should have value property for have item selecting possibility.
src String Optional. It is a key related to selected item.
format String Optional. This is the time format.
syntax String Optional. This is a sequence of characters or regular expressions that specifies a pattern.
options Object Optional. It is for when we need to add some customization code to form or table.

Example

We add some examples of the kind of input types here.

{
    "version": 202105120735,
    "common": {
        "sub": {
            "client": {
                "text": "Form Title",
                "sub": {
                    "first": {
                        "text": "First Name",
                        "placeholder": "Please enter your first name.",
                        "toolTip" : "This is your first name",
                        "required": true,
                        "display": "inForm"
                    },
                    "last": {
                        "text": "Last Name",
                        "placeholder": "Please enter your last name.",
                        "toolTip" : "This is your last name",
                        "required": true,
                        "display": "inForm"
                    },
                    "gender": {
                        "text": "Gender",
                        "inputType": "select",
                        "src": "key",
                        "value": {
                            0: {
                                "text": "Male"
                            },
                            1: {
                                "text": "Female"
                            }
                        },
                        "display": "inTable"
                    },
                    "email": {
                        "text": "E-Mail",
                        "inputType": "email",
                        "placeholder": "Please enter your email.",
                        "toolTip" : "This is your email",
                        "required": true,
                        "display": "inForm"
                    },
                    "location": {
                        "text": "Location",
                        "inputType": "map"
                    },
                    "birthDate": {
                        "text": "Birth Date",
                        "inputType": "time",
                        "format": "YYYY/MM/DD",
                        "options": {
                            "timePicker": {
                                "enabled": true
                            }
                        },
                        "display": "inTable"
                    },
                    "nationalCode": {
                        "text": "National Code",
                        "required": true,
                        "syntax":{
                           "value":"^\\\\d{10}$",
                           "message":"Invalid national code field."
                        }
                    },
                    "file": {
                        "text": "Your photo or video",
                        "inputType": "file",
                        "accept": "video/mp4, video/x-m4v, video/*, image/*",
                        "display": "inForm",
                        "required": true
                    },
                    "createdAt": {
                        "text": "Created At",
                        "inputType": "time",
                        "display": "inTable"
                    },
                    "createdBy": {
                        "text": "Created By",
                        "display": "none"
                    }
                }
            }
        }
    }
}