I have to build an Angular application that has a single task: It receives JSON data that describe a form structure, e.g.:
{
"textbox": {
"type": "string",
"name": "name",
"maxlength": 30,
"description": "Full Name"
},
"textbox": {
"type": "string",
"name": "email",
"maxlength": 40,
"description": "Email"
},
"date": {
"name": "birthdate",
"description": "Birthdate"
},
"checkbox": {
"name": "subscribe",
"options": [
"Yes",
"No"
],
"default": "No",
"description": "Subscribe?"
},
"button": {
"type": "submit",
"description": "Send"
}
}
And it should display it: (All forms are different with varying elements.)
I'm relatively new to Angular and my initial approach would be to create a simple template that has an ngFor in it, and inside many ngIfs (one for text fileds, one for text area, another for radio button, and so on...) that examine for the "type" of the given form element, and if there is a match, it gets displayed with its attributes written in the JSON.
Is it a good idea to start like this, or should I first learn some more Angular to be able to come up with a more professional solution?
Are things like dynamic and reactive forms in Angular for this purpose, or which part of Angular should I have a deeper understanding in for this task?
Related
I am trying to create an adaptive card with a fact set. However, I can't seem to get the actual facts to display. Even the example at https://adaptivecards.io/designer/ is not working. Instead of pulling in the data from the properties element as specified, it just shows ${key} and ${value} as the pair. You can see the output and the full JSON at the link above, but here are the relevant sections for my issue/query:
Adaptive card specification
{
"type": "FactSet",
"facts": [
{
"$data": "${properties}",
"title": "${key}:",
"value": "${value}"
}
]
}
Data object
"properties": [
{
"key": "Board",
"value": "Adaptive Cards"
},
{
"key": "List",
"value": "Backlog"
},
{
"key": "Assigned to",
"value": "Matt Hidinger"
},
{
"key": "Due date",
"value": "Not set"
}
]
As this or similar questions came up multiple times recently. You have to make sure to use the "Preview" button
Elements bound to any array in JSON are not rendered during design time or only when the specific array element is referenced with array[x].xx. Dynamically generated elements currently are only rendered in preview mode when working in the web editor version https://adaptivecards.io/designer
If you need a design time experience for array bound elements you can use Adaptive Cards Studio the Visual Studio Code Extension for card authoring.
I'm trying to use adaptive cards on MS Teams to capture some user input text before they click on submit. One of the things I would like to have is that I want the user to input some non-empty string before the Action.Submit is allowed to go through.
Is that an existing support feature?
Thanks!
This feature, called Input Validation, is part of the upcoming v1.3 release, which will be available in Teams in the next few months. Here is a same that uses the "required" property to indicate something must be entered.
{
"type": "AdaptiveCard",
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.3",
"body": [
{
"type": "Input.Text",
"id": "name",
"placeholder": "First, last",
"label": "Please enter your name",
"isRequired": true,
"errorMessage": "Name is required"
}
],
"actions": [
{
"type": "Action.Submit",
"title": "Save"
}
]
}
You can learn about it here. https://developer.microsoft.com/en-us/office/blogs/adaptive-cards-community-call-july-2020/
I have the following adaptive card JSON code that has three Input.Toggle's. Is there a way to throw an error when the user clicks "Submit" and all three Input.Toggle's are not set to true? I saw in the Schema Explorer (Schema Explorer Input.Toggle) that they have Inherited properties called "fallback" and "requires", is that what I need? If so, how do I implement "fallback" and "requires" into this JSON code?
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.2",
"body": [
{
"placeholder": "1.1 Business Office Coordinator - RFQ Receipt",
"type": "Input.Text",
"id": "Title"
},
{
"text": "Quote ##{body('Get_response_details')?['b194cde8837234ccc80fu5017c1b0f869']} ",
"type": "TextBlock",
"id": "textBlock1"
},
{
"type": "Input.Toggle",
"title": "Customer Acknowledgement",
"valueOn": "custYes",
"valueOff": "custNo",
"id": "Customer"
},
{
"type": "Input.Toggle",
"title": "Create RFQ Log Number and Enter Information into RFQ Log",
"valueOn": "RFQYes",
"valueOff": "RFQNo",
"id": "RFQ"
},
{
"type": "Input.Toggle",
"title": "Populate Quote Folder with Customer Data",
"valueOn": "PopulateYes",
"valueOff": "PopulateNo",
"id": "Populate"
}
],
"actions": [
{
"type": "Action.Submit",
"title": "Submit",
"data": {
"id": "9876543210"
}
}
]
}
this is part of input validation which as of today is not available yet.
I'm afraid what you're asking for is not possible right now but will hopefully be soon.
You can follow the feature request here: https://portal.productboard.com/adaptivecards/1-adaptive-cards-features/c/21-input-validation-and-evolution , add your own vote to it aswell if you want to.
Depending on where you use the card however, you can get this working. In MS Teams you could verify the card submission in your own code and return an error. Its not client side but that way you can still do the check.
I need to create a form with controls dynamically from JSON using Angular 2.0.
I'm very new to Angular 2.0 and Typescript. I'm totally clueless, where to start with the development.
Any help is much appreciated.
Below is the sample JSON
"General": {
"None": [
{
"FieldName": "100",
"DisplayName": "Mapping Name",
"ClassSize": "col-sm-6 col-xs-12",
"Field": [
{
"ControlType": "TextBox",
"FieldClass": "col-sm-6 col-xs-12",
"Required": "True",
"MaxLength": "10",
"RegularExpression": ""
}
]
},
{
"FieldName": "101",
"DisplayName": "Select Target File Type",
"ClassSize": "col-sm-6 col-xs-12",
"Field": [
{
"ControlType": "Dropdown",
"FieldClass": "col-sm-6 col-xs-12",
"Required": "True",
"Options": [
{
"Description": "--Please select--",
"ID": 0
},
{
"Description": "Row Per Day",
"ID": 1
},
{
"Description": "Row Per Week",
"ID": 2
},
{
"Description": "Row Per Transaction",
"ID": 3
}
]
}
]
}
]
}
Create dynamic form group and loop through the json and create respective element, where forms input type and its related attributes(like name, value, placeholder,type,required,pattern etc) were varying as per resource's attributes. So render the forms at run time.
Reference information
Creating forms in angular 2 using json schema at run time
You will need to import a FormBuilder from #angular/forms. Then create a FormGroup.
public form: FormGroup;
private _buildForm() {
let obj = {};
General['None'].forEach(val => {
obj[val.fieldname] = new FormControl('', Validators.required);
});
_fb.group(obj);
}
On the template you will need loop through the form controls and and create the form based on the type.
This answer may not be give you all the answers you need but it's an eye opener on what you can do.
You may want to use FormArrays depending on how you'd want to implement.
Read through the angular2 documentation on forms. Also watch this video.
Angular 2 Forms | Kara Erickson - YouTube
Forms - ts - GUIDE - Angular
I have a json file simular to this:
[{
"name": "testReport",
"type": "Intern",
"description": "Test report for extjs",
"query": "select DATE(sa.startTime)",
"queryFields": [{
"name": "name",
"type": "STRING",
"format": null,
"many": false
}, {
"name": "from",
"type": "DATE",
"format": "yyyyMMdd",
"many": false
}, {
"name": "to",
"type": "DATE",
"format": "yyyyMMdd",
"many": false
}]
In a grid i show the name, type and description. When you click on a button i want to open a new window what is working. But what i need is to open the window and generate a form based on the queryFields. So when i click on the testreport i need to have a textfield(name), a datefield(from) and a datefield(to). Is this possible? And how do i do this :$
Use a SelectionModel (maybe a CheckBoxSelectionModel). The user will select the row they want by checking the check boxes of the rows. Then when they click the display reports button you can use the SelectionModel to find all the selected records and pass the records on to your form which which you can use to create the form or fill the forms fields in whichever you need.
My advice is to look at the API for
GridPanels
SelectionModels
Record
Then design it when you have an understanding of these concepts.