It is possible to make dynamic html from json ionic - javascript

I want to make dynamic html from JSON response coming from server,
For eg: Let say json response from server is
param_data: any = {
"fields": [
{ "type": "text", "name": "firstname", "label": "label", "required": true, "data": "", "frmctrlnm": "labelone" },
{ "type": "button", "name": "firstname", "label": "label two", "required": true, "data": "", "frmctrlnm": "labeltwo" },
{ "type": "input", "name": "Red", "label": "input", "required": true, "data": "", "frmctrlnm": "inputone" },
{ "type": "input", "name": "BLue", "label": "input", "required": true, "data": "", "frmctrlnm": "inputone" },
{ "type": "label", "name": "color_id", "label": "input two", "required": true, "data": "", "frmctrlnm": "inputtwo" },
{ "type": "select", "name": "select", "label": "select", "required": true, "data": "", "frmctrlnm": "select" }
]}
Based on type coming from server i wants to make html component and on click of submit i want same json with user updated data in the fields.
It is possible to achieve this ?
Thank you in advance!

You can try something like this:
let htmlString = ``;
param_data.fields.forEach(element => {
if (element.type == "text") {
htmlString +=
`<div class="form-group">
<label class="control-label col-md-4">
${element.label}:
</label>
<div class="col-md-8">
<input type="text" class="form-control" name="${element.name}" ${element.required == true? 'required':''}>
</div>
</div>`
}
});

Related

Slack Block-kit Multi_users_select Remove defaults app

I implemented a slack bot with um field of type input(multi_users_select). I would like to remove defaults apps from the list select?
{
type: 'input',
element: {
type: 'multi_users_select',
action_id: input.actionId,
initial_users: input.initial_users,
},
label: {
type: 'plain_text',
text: input.text,
emoji: input.emoji,
},
};
Instead of type: 'multi_users_select' use "type": "multi_conversations_select" with filter as shown below to get only users in your workspace.
You can copy and paste the below code in block-kit builder to test on your own.
https://app.slack.com/block-kit-builder/
{
"title": {
"type": "plain_text",
"text": "Blocker-Bot"
},
"submit": {
"type": "plain_text",
"text": "Submit"
},
"type": "modal",
"callback_id": "custom_time_select",
"private_metadata": "private-data",
"blocks": [
{
"type": "section",
"text": {
"type": "mrkdwn",
"text": "Test block with multi conversations select"
},
"accessory": {
"type": "multi_conversations_select",
"placeholder": {
"type": "plain_text",
"text": "Select conversations",
"emoji": true
},
"filter": {
"include": [
"im"
],
"exclude_bot_users": true
},
"action_id": "multi_conversations_select-action"
}
}
]
}
Update 05-Jul-21
Included various other types of select users without bots/apps
{
"type": "modal",
"title": {
"type": "plain_text",
"text": "My App",
"emoji": true
},
"submit": {
"type": "plain_text",
"text": "Submit",
"emoji": true
},
"close": {
"type": "plain_text",
"text": "Cancel",
"emoji": true
},
"blocks": [
{
"type": "section",
"text": {
"type": "mrkdwn",
"text": "Conversations type Select user"
},
"accessory": {
"type": "conversations_select",
"placeholder": {
"type": "plain_text",
"text": "Select a user",
"emoji": true
},
"filter": {
"include": [
"im"
],
"exclude_bot_users": true
},
"action_id": "users_select-action"
}
},
{
"type": "section",
"text": {
"type": "mrkdwn",
"text": "Multi Conversations type Select users"
},
"accessory": {
"type": "multi_conversations_select",
"placeholder": {
"type": "plain_text",
"text": "Select conversations",
"emoji": true
},
"filter": {
"include": [
"im"
],
"exclude_bot_users": true
},
"action_id": "multi_conversations_select-action"
}
},
{
"type": "input",
"element": {
"type": "multi_conversations_select",
"placeholder": {
"type": "plain_text",
"text": "Select users",
"emoji": true
},
"filter": {
"include": [
"im"
],
"exclude_bot_users": true
},
"action_id": "multi_users_select-action"
},
"label": {
"type": "plain_text",
"text": "Input type Select users",
"emoji": true
}
}
]
}
Currently, filtering is available for conversations select menu or conversations multi select menu.
https://api.slack.com/reference/block-kit/composition-objects#filter_conversations
May be you can write to feedback#slack.com and they can log it for future releases.

How to pre set data in reactjs-form-builder field?

I am using reactjs-form-builder for generating forms in react js my fields object is
this.state = {
id: null,
loading: true,
fields: {
"fields": {
"name": {
'label': "Product Name",
"type": "text",
"required": true,
"placeholder": true,
}
"submit": {
"type": "submit",
"label": "Edit Product",
"color": "btn-primary",
}
}
}
};
How do i set value to field name.
Just add value in you field object.
"name": {
'label': "Product Name",
"type": "text",
"required": true,
"placeholder": true,
"value": "You value here",
}

Angular Schema Form - Require Field if Integer Field is Not Null

I am trying to create a form using the Angular JSON Schema Form. I want one field (dropdown1) to be required when another field (number1) is populated. I am able to get the following form + schema working in the SchemaForm.io Sandbox, but when I put it into my site, the dropdown field is missing.
Here is my schema:
{
"type": "object",
"properties": {
"isChecked": {
"title": "checked?",
"type": "boolean"
},
"text1": {
"title": "text1",
"type": "number",
"minimum": 0,
"maximum": 100,
"condition": "model.isChecked"
},
"number1": {
"title": "number1",
"type": "number",
"minimum": 0,
"condition": "model.isChecked"
},
"dropdown1": {
"title": "",
"type": "string",
"enum": ["Days", "Months", "Years"],
"condition": "model.isChecked"
},
"comment": {"type": "string", "Title": "Comment"}
}
}
Here is my form:
[
"isChecked",
{
"key": "text1",
"type": "decimal",
"validationMessages": {
"maximum": "text1 must be 100 or lower.",
"minimum": "text1 must be 0 or higher.",
"required": "This field is required"
},
"required": false
},
{
"key": "number1",
"type": "number",
"validationMessages": {
"minimum": "number1 must be 0 or higher."
},
"required": false
},
{
"key": "dropdown1",
"required": false,
"condition": "model.number1 === null"
},
{
"key": "dropdown1",
"required": true,
"condition": "model.number1 > 0",
"validationMessages": {
"required": "dropdown1 is required."
}
},
{
"key": "comment",
"type": "textarea"
}
]
You can use the "dependencies" property (https://json-schema.org/understanding-json-schema/reference/object.html#property-dependencies). The example requires billing_address to be present when a credit_card is provided:
{
"type": "object",
"properties": {
"credit_card": {
"type": "number"
},
"billing_address": {
"type": "string"
}
},
"dependencies": {
"credit_card": [
"billing_address"
]
}
}
This implementation supports "dependencies":
https://github.com/dashjoin/json-schema-form
You can check out the online example here:
https://dashjoin.github.io/#/example/dependencies
Here is the solution I found:
"condition": {
"functionBody": "return model.number1 === undefined && model.isChecked"
}

Angular create reactive form with deeply nested json

I am trying to generate Angular reactive forms using json.
my json structure is like this.
{
"name": "NationalInfo",
"field": [
{
"type": "textbox",
"key": "natInfo",
"label": "Nat Info",
"value": "",
"required": false,
"order": 1
},
{
"name": "NatInfo",
"field": [
{
"type": "textbox",
"key": "appNum",
"label": "App Num",
"value": "",
"required": false,
"order": 1
},
{
"type": "textbox",
"key": "brandyPhonetic",
"label": "Brandy Phonetic",
"value": "",
"required": false,
"order": 2
},
{
"type": "textbox",
"key": "cry",
"label": "Cry",
"value": "",
"required": false,
"order": 3
},
{
"type": "textbox",
"key": "natFinalDispDt",
"label": "Nat Final Disp Dt",
"value": "",
"required": false,
"order": 4
},
{
"type": "textbox",
"key": "pTOPhonetic",
"label": "P T O Phonetic",
"value": "",
"required": false,
"order": 5
},
{
"type": "textbox",
"key": "ptoStsCd",
"label": "Pto Sts Cd",
"value": "",
"required": false,
"order": 6
},
{
"name": "NatInfoRejectionCodes",
"field": [
{
"type": "textbox",
"key": "rejectionCode",
"label": "Rejection Code",
"value": "",
"required": false,
"order": 1
}
]
}
]
}
]
}
This is just one object in array of objects, I have multiple object same like above in that array with more nested childs.
Output which I want is like this
this.obj = {
"NationalInfo": new FormGroup({
"natInfo": new FormControl(""),
"NatInfo": new FormGroup({
"appNum": new FormControl(""),
"brandyPhonetic": new FormControl(""),
"cry": new FormControl(""),
"natFinalDispDt": new FormControl(""),
"pTOPhonetic": new FormControl(""),
"ptoStsCd": new FormControl(""),
"NatInfoRejectionCodes": new FormGroup({
"rejectionCode": new FormControl("")
})
})
})
}
this.form = new FormGroup(this.obj);
and then I want to render this in html.
I have tried all solutions available but could not do it.
Will be appreciated any help.
Thanks.

How do I join multiple columns into one in footable?

I have a FooTable that gets a part number returned as 3 separate cells. I'd like to combine them into one cell but I'm unsure of how the formatter and parser work for FooTable. my table html is just an empty table, everything is handledin the javascript. How would I go about doing this?
$(document).ready(function() {
jQuery(function($){
$('.table').footable({
"expandFirst": false,
"columns": [
{ "name": "PartID", "title":"PartID", "visible":false },
{"formatter": function(value){
return //I'm thinking this is where the code would go to join the next 3 columns? in the format ##.###.##
}},
{ "name": "PartCategory", "title": "PC" },
{ "name": "PartNumber1", "title": "PN1" },
{ "name": "PartNumber2", "title": "PN2", },
{ "name": "PartName", "title": "Name", },
{ "name": "DescShort", "title": "Description", },
{ "name": "SupplierName", "title": "Supplier", },
{ "name": "SupplierPartNumber", "title": "Supplier Part #", }
],
"rows": $.getJSON("../dist/scripts/testGetParts.php")
});
});
});
You can simply add data-hide="all" to the first two columns of those three:
{ "name": "", "title": "", data-hide="all"},
{ "name": "", "title": "", data-hide="all"},
{ "name": "Part Info", "title": "Part Information" }
Merge those in php (which you are good at) and just show them in here as one col in your dataset and Voila.
The simpler version if you can change the dataset is to not add those columns at all.
Another option if you cannot/don't want to change your server side code is to get the data and change it js and then bind them to rows afterwards.
var rows = $.getJSON("../dist/scripts/testGetParts.php");
foreach(row in rows) {
//merge those cols here in the third one
}
And then:
jQuery(function($){
$('.table').footable({
"expandFirst": false,
"columns": [
{ "name": "PartID", "title":"PartID", "visible":false },
{ "name": "PartCategory", "title": "PC", data-hide="all" },
{ "name": "PartNumber1", "title": "PN1", data-hide="all"},
{ "name": "Part Info", "title": "Part information" },
{ "name": "PartName", "title": "Name", },
{ "name": "DescShort", "title": "Description", },
{ "name": "SupplierName", "title": "Supplier", },
{ "name": "SupplierPartNumber", "title": "Supplier Part #", }
],
"rows": rows
});
});
Not sure how you do it persay in footable, in kendo you would do it like so.
$(document).ready(function() {
jQuery(function($){
$('.table').footable({
"expandFirst": false,
"columns": [
{ "name": "PartID", "title":"PartID", "visible":false },
{ "title":"PartNumber", formatter: function(data){
return data.PartCategory +"."+ data.PartNumber1 +"." + PartNumber2;
}},
{ "name": "PartName", "title": "Name", },
{ "name": "DescShort", "title": "Description", },
{ "name": "SupplierName", "title": "Supplier", },
{ "name": "SupplierPartNumber", "title": "Supplier Part #", }
],
"rows": $.getJSON("../dist/scripts/testGetParts.php")
});
});
});

Categories

Resources