custom component: How to get value of template property

  • 1
  • Question
  • Updated 2 years ago
  • Answered

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? 
Photo of Tim Wilson

Tim Wilson

  • 504 Points 500 badge 2x thumb

Posted 2 years ago

  • 1
Photo of Zach McElrath

Zach McElrath, Employee

  • 56,134 Points 50k badge 2x thumb
You'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:

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) {
    var model = skuid.model.getModel(xmlDef.attr("model"));
    var row = myModel.getFirstRow();
    var valueTemplate = xmlDef.attr("valueTemplate");
    element.append(skuid.utils.merge( 'row', valueTemplate, null, model, row ));
Photo of Tim Wilson

Tim Wilson

  • 504 Points 500 badge 2x thumb
Zach thank you very much for the fast response! The merge API is exactly what I was looking for.