Extra section

To add an extra section to the slice (eg. user defined goals config for Lollipop)

1. Create an underscore.js template and paste it into the Templates section of your slice in the admin. Let's take a look at a typical template:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

<script type="text/template" id="my-goals-template">
   <!--  button that will toggle extra section content, use `data-toggle-target` to point to a target that will be toggled-->
   <button data-toggle-target="goals-content">Open/close content</button>

    <!--  this is the content that will be toggled, initially set to `display:none;`
      Important: `data-name` of this element should match the `data-toggle-target` value in the button to enable toggling -->
   <div data-name="goals-content" style="display:none;">
     <!-- the template is given the `options` object, which is returned from the chart data service result.extraOptions -->
     {{ _.each(options, function(option, i) { }}
       <div class="{{=option.classed}}" value="{{=option.value}}">{{=option.label}}</div>
       <input type="text" value="{{=option.value}}" data-validation="{{=option.type}}" data-min="{{=option.min}}" data-max="{{=option.max}}">
     {{  }) }}
     <!--  button that will save changes to the service, make sure `data-submit-url` is defined in order for submit to work-->
     <button data-submit-url="/api/v1/goalService">Save Goals</button>
   </div>
 </script>

2. Pay attention to some key properties in the template:

• data-toggle-target: data attribute that will trigger the toggle on the targeted element, typically an attribute of a button; use it if you need toggle
• data-name: data attribute which data-toggle-target targets to toggle (both values should match), typically an attribute of the togglable content; use it if you need toggle
• {options: ...} is the object passed to the template. options is derived from chart data API's response.extraOptions
• template allows some form validation features: we currently support number and number-range (from-to) validation with min, max optional parameters. The data attributes of those options are data-validation, data-min and data-max, respectively. Validation is performed on any change in the element (listens thru $.keyup).
• add data-submit-url attribute to a submit button if you want to persist content changes. The form will send the values in a map object, where key is the option.id and value is the value on the input field (probably changed by the user).

3. Make sure your data service for this slice is returning extraOptions in the response if you are using options in your template

4. Make sure the service specified in data-submit-url accepts HTTP POST.

5. Note that the extra section is considered a dynamic content (may change with every chart data API result), so it is re-rendered on every response from data API (just like a chart, legend, etc)