Step 3: Add external resources

In the CDE Layout perspective, on the Layout Structure toolbar, click the Add Resource icon.
In the Add Resource dialog box, enter the following data:
- For Resource Type, select Javascript.
- For Resource Source, select External File. Click Ok.
In the Properties pane, click in the Value column to the right of the Name property and enter addins. Press Tab or Enter.
Click the caret ('^') button to the right of the Resource file property and navigate to public > demoDashboard > files. Click Ok.
In the Create File dialog box, enter addins and click Ok.
You have now created the addins.js file, which will contain the JavaScript code to execute within the dashboard components. Note that the name you give to the JS file is how the file itself will be referenced within the dashboard.

To enter content in the addins.js file, select the addins resource in the Layout Structure pane. Locate the Resource file property and click the ellipse ('...') button to open the Edit window. Enter the following content for this file:

define([
  "cdf/AddIn",
  "cdf/Dashboard.Clean",
  "cdf/Logger",
  "cdf/lib/jquery"
], function(AddIn, Dashboard, Logger, $) {
  Dashboard.registerGlobalAddIn("Table", "colType", new AddIn({
    name: "customArrow",
    label: "customArrow",
    defaults: {},
    implementation: function(tgt, st, opt) {
      if(typeof st.value !== "number") {
        Logger.warn("customArrow add-in invalid value: " + st.value);
        return;
      }
      var trend = st.value > 0 ? "up" : "down";
      $(tgt).empty()
            .append($('<ul><span class="glyphicon glyphicon-arrow-'
              + trend +'"></span>&nbsp<span>'+ st.value +'%'+'</span></ul>'));
    }
  }));
});

Lines 2 to 5 specify the dependencies needed for the add-in, which are then registered for use in the function.
Line 7 registers the add-in, which is then available to the table component.

Press the Save button and then press the Close button.
Following steps 2 through 5, add a second JavaScript external resource named title and save a new file named title.js in the public > demoDashboard > files folder. The dashboard will have a title and a subtitle which are provided by the text components created in Step Five. These components will fetch the displayed value from an object returned by the AMD module defined in the title.js file.
To enter content in the title.js file, in the Layout Structure pane select the title resource and then select the Resource file property. Click the ellipse ('...') button to open the Edit window. Enter the following content for this file:
```
define(function() {
  return {
    option1: 'CDE Dashboard',
    option2: 'Using a Table with a custom add-in and a CCC Bar Chart',
  };
});
```
In this file, an AMD module is defined which returns an object with two properties. This object will be accessible to the text components, using the same name as the one used for the Name property of the JavaScript external resource, and its properties will be used as the title and subtitle.
Press the Save button and then press the Close button.