Best answer

Creating dynamic input fields with line items

  • 26 February 2024
  • 2 replies
  • 96 views

Hey guys, first post here and hopefully someone can help me.

 

I have an input field which I am using to make a request to and get a response that looks like so:

{
"StatusId": 1,
"StatusDescription": "Success",
"DetailedDescription": "",
"FunctionName": "api/v2/WhatsApp/GetTemplate",
"RequestId": ",wWYuJXZ05WauUncvZmbp5CMxkGchNWPl1WYOR3cvhkJyMTQzUSM1E0MlETMrYjMtIDMtQjMwITPw1WY0NVZtlGVmEzNyAzNwETPklkclNXV",
"Data": {
"TemplateId": 150351,
"TemplateName": "תבנית שיווקית בסיסית משופעת כפתורים (5)",
"MessageText": "שלום [#1#],\r\nתודה על קנייתך. \r\nאנו בטוחים שתהנה מ[#2#] החדש שלך.\r\nלהלן מידע חיוני לשימוש במוצר.\r\nשמחנו לסייע. ואנו זמינים לכל שאלה.\r\n\r\nבברכה,\r\nKirBi\r\n\r\nלהסרה השב הסר",
"TemplateParameters": [
"[#1#]",
"[#2#]"
],
"ApprovalStatus": 5,
"ApprovalStatusDescription": "New",
"Category": "UTILITY"
}
}

 

What I want to do is iterate over Data.TemplateParameters and create inputs accordingly..
I thought I was doing this correctly using the code editor and ended up with this code:

const options = {
url: 'https://capi.inforu.co.il/api/v2/WhatsApp/GetTemplate',
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json'
},
body: {
"Data": {
'TemplateId': bundle.inputData.TemplateId
}
}
};

return z.request(options)
.then((response) => {
response.throwForStatus();
const results = response.content;
var res = JSON.parse(results);
var data = [
{
"key": "TemplateParameters",
"children": []
}
];
res.Data.TemplateParameters.forEach(param => {
data[0].children.push(
{
key: param,
children: [
{
key: "Type",
label: "Type",
choices: ['Text','Contact','Custom'],
type: 'string'
},
{
key: "Value",
label: "Value",
type: 'string'
}
]
}
);
});
return data;
});

The result of my push is:
 

[
{
"key": "TemplateParameters",
"children": [
{
"key": "[#1#]",
"children": [
{
"key": "Type",
"label": "Type",
"choices": [
"Text",
"Contact",
"Custom"
],
"type": "string"
},
{
"key": "Value",
"label": "Value",
"type": "string"
}
]
},
{
"key": "[#2#]",
"children": [
{
"key": "Type",
"label": "Type",
"choices": [
"Text",
"Contact",
"Custom"
],
"type": "string"
},
{
"key": "Value",
"label": "Value",
"type": "string"
}
]
}
]
}
]

 

I suspect this scheme is wrong because my end result is:
 



Can you spot what im doing wrong ?

Any help would be appreciated!

icon

Best answer by Osas 26 February 2024, 18:30

View original

2 replies

Userlevel 2
Badge +2

Hi @EyalCallbox,

The code you provided is attempting to create nested line-item fields (‘children’ inside another ‘children’ property) and that is not supported.

You would have to create a line item group for each value in Data.TemplateParameters by using the below code (starting from the return statement):

 

return z.request(options)
.then((response) => {
response.throwForStatus();
const results = response.content;
var res = JSON.parse(results);
var data = [];
res.Data.TemplateParameters.forEach(param => {
data.push(
{
key: param,
children: [
{
key: "Type",
label: "Type",
choices: ['Text','Contact','Custom'],
type: 'string'
},
{
key: "Value",
label: "Value",
type: 'string'
}
]
}
);
});
return data;
});

Note that the above code would not work yet but I would come to that later.

Each ‘param’ in Data.TemplateParameters would have to be unique because each line item group would need to have unique keys for this to work.

Now, to why I said the code would not work yet. At the moment each line item field in each group would have the same keys (“Type”, and “Value”). Each line item field is available at the top-level via bundle.inputData.child_key (so bundle.inputData.Value, and bundle.inputData.child_Type) due to hoisting. Because of this, only one line item group would be rendered in the editor because the fields in all the groups would have the same keys, and only the last ones in the data array would be rendered. To prevent this, in the Data.TemplateParameters.forEach method, you would need to concatenate the child field keys with something (or use some unique values as the key for each ‘children’ property) so that each line item field in each ‘children’ has unique key values.

I know this seems like a lot but I hope this helps.

Cheers,

thanks @Osas !

I understand now, this will require me to manipulate the bundle data so I could format the request accordingly but I get it.

 

Reply