Hi,
I am building a custom component with a template prop. When I pull in the value of the prop/attribute I am getting the merge syntax instead of the merged values. So if in the template prop the user puts in {{{sumEstimatedHoursc}}} I would expect to get the merged value of whatever the data returns via xmlDef.attr(“valueTemplate”). Instead, I am simply getting the merged syntax back i.e.“{{{sumEstimatedHoursc}}}”.
Is there a way I can get the merged value instead of just the syntax? Or is there an API I can use for getting the merged value by passing in a model and merge syntax?
Question
custom component: How to get value of template property
+4This topic has been closed for replies.
+13You’re looking for the merge API.
The Merge API can output plain text, or HTML elements, depending on what you’re looking for. If you’re doing a custom component, you probably want to output HTML elements, which is the default for the regular merge API method. There’s a lot of different Merge API methods you can use and a lot of permutations, but
Here are some docs:
https://docs.skuid.com/latest/en/skuid/merge-syntax/#using-templates-from-javascript
https://docs.skuid.com/latest/en/skuid/api/skuid_utils.html#skuid.utils.merge
One of the benefits of returning HTML elements, instead of text, is that you get automatic data-binding, meaning that if the associated Model / Row get updated, the data will change automatically.
So you could do something like this:
skuid.componentType.register("my_awesome_component", function(element, xmlDef, component) {<br> var model = skuid.model.getModel(xmlDef.attr("model"));<br> var row = myModel.getFirstRow();<br> var valueTemplate = xmlDef.attr("valueTemplate");<br> element.append(skuid.utils.merge( 'row', valueTemplate, null, model, row ));<br>});
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.