About Zapier Community
New to our Community? Get to know more about our space and how to make the most of your time here.

Code of Conduct Community FAQ's Zapier Common Questions What to Expect

Get Started With Zapier
New to Zapier? We have got you covered with our Zapier 101 Resources.

Zapier Essentials

Get Support
Have a question? Let's get you an answer!

How Do I...? Troubleshooting Code & Webhooks Developer Zone

Other Help Resources
Wait, there's more! Check out these Community sourced spaces for additional resources.

Zapier Help Center Hire an Expert

Zapier Products
Learn more about Zapier's new products.

Zapier Tables Zapier Interfaces

Zapier Reading
All of our best learning resources can be found here.

Featured Articles Show & Tell AI Hub Zapier Tools Hub

Learning Groups
Excited to meet other builders? Check out our interest areas full of doers, dreamers, and in-betweeners.

User Groups

Other Learning Resources
Some of our favorite additional ways to upskill your Zapier knowledge.

Zapier Learn Zapier Blog Zapier Webinars

Product Updates
Check out what is new and upcoming with Zapier with our regular product updates.

Product Updates

Early Access Program
Want to join Early Access? Learn more here.

Best answer

Creating dynamic input fields with line items

  • 26 February 2024
  • 2 replies
  • 113 views
E

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

O
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,

E

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


Terms & Conditions