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

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",
}

Related

After load form and the first running function in the 'events > change' in the select field the validation stops work

Guys I need your help in resolve the issue, please. I use for build form Alpaca JS I have the simple form...
$(document).ready(function() {
var data = {
"actionReal": "One or Two",
"firstName": "First Name",
"lastName": "Last Name"
};
var schema = {
"title":"Form title",
"type":"object",
"properties": {
"actionReal": {
"type": "string",
"required": true,
"default": "none"
},
"firstName": {
"required": true
},
"lastName": {
"required": true
}
}
};
var options = {
"fields": {
"actionReal": {
"type": "select",
"label": "Your action",
"noneLabel": "Select action...",
"dataSource": [
{
"value": "one",
"text": "Action One"
},
{
"value": "two",
"text": "Action Two"
}
],
"events": {
"change": function() {
var firstName = this.parent.childrenByPropertyId["firstName"],
lastName = this.parent.childrenByPropertyId["lastName"];
actionReal = this.getValue();
if (actionReal === 'one') {
firstName.options.label = "First Name Action One";
lastName.options.label = "Last Name Action One";
} else {
firstName.options.label = "First Name Action Two";
lastName.options.label = "Last Name Action Two";
}
firstName.refresh();
lastName.refresh();
}
},
"removeDefaultNone": false,
"validate": true
},
"firstName": {
"type": "text",
"label": "First Name Action Two",
"validate": true
},
"lastName": {
"type": "text",
"label": "Last Name Action Two",
"validate": true
}
},
};
$("#form").alpaca({
"data": data,
"schema": schema,
"options": options,
"type": "create"
});
});
When I selected in the field Your action the value Action one the validation stops work, but when I selected in the field Your action another value then the validation works well... Can someone tell me what is wrong in my form? I do not understand what is wrong...
I need corrected work..
Guys I need your help in resolve the issue, please.

How add a custom property to SurveyJs question and read its value when answered

I'm trying to add a custom property that will hold a boolean for check if a response change should display a popup.
This is a part of my survey.json:
{
"type": "radiogroup",
"name": "q1",
"title": {
"default": "Question number one?"
},
"displayAlert": true,
"isRequired": true,
"choices": [
{
"value": "yes",
"text": {
"default": "Yes"
}
},
{
"value": "no",
"text": {
"default": "No"
}
}
]
}
As you can see there is a displayAlert property.
I want to read this property when there is a change in that answer:
this.userSurvey.onValueChanging.add((survey: any, change: any) => {
console.log('alert?', change.question.displayAlert);
});
I've also set this but it don't work:
Serializer.addProperty('itemvalue', {
name: 'displayAlert',
category: 'general',
});
Thanks in advance.
You need to add a property not to itemValue, but to the question type.
Survey.Serializer.addProperty("question",
{
name: 'displayAlert',
category: 'general',
}
)
var json = {
"pages": [
{
"name": "page1",
"elements": [
{
"type": "radiogroup",
"name": "q1",
"title": "Question number one?",
"displayAlert": true,
"isRequired": true,
"choices": [
{
"value": "yes",
"text": {
"default": "Yes"
}
},
{
"value": "no",
"text": {
"default": "No"
}
}
]
}
]
}]
};
...
survey.onValueChanging.add(function(survey, change) {
console.log('alert?', change.question.displayAlert);
});
Try this example: https://plnkr.co/edit/ggW5NkqCWdoSHfZ6.

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.

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"
}

It is possible to make dynamic html from json ionic

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>`
}
});

Categories

Resources