Data Sources > Template Content > JavaScript Extension

When using the command builder to create markup for a Data Source record, the Template Content attribute contains default markup explained below.

JavaScript & CSS Files (Above Table HTML)

<link href="/Modules/DataSource/DataTablesJS/Styles.css?v=8.11.112" rel="stylesheet">

[cp:literal:scripting key='RegisterUnmanagedScriptInclude' url='/Integrations/JQuery/Plugins/dataTables/cp_DataSources_Extender.js?v=8.11.112' /]

[cp:literal:scripting key='RegisterUnmanagedScriptInclude' url='/Scripting/ModuleResults/Export/Scripts.js?v=8.11.112' /]

[cp:literal:scripting key='ExtTable' targetId='dataSource_TUGI' bPaginate='true' sPaginationType='two_button' bFilter='true' bSort='true' bInfo='true' bLengthChange='true' iDisplayLength='100' bJQueryUI='false' bProcessing='true' aLengthMenu='10, 25, 50, 100, 250, -1' aaSorting='0,cpsys_Aposdesccpsys_Apos' asStripeClasses='' bAutoWidth='false' sScrollY='' hasSearchableColumns='1' skippedSearchableColumns='0' /]

[cp:literal:scripting key='DataSourceExportButton' id='ExcelXml' type='ExcelXml' imagePath='/Integrations/Centralpoint/Resources/Icons/Microsoft_Excel.png' linkText='Export to Excel Xml Format' /]

• The <link> tag registers default styles for the UI created from the Data Source.
• The RegisterUnmanagedScriptInclude CpScripts register system JavaScript plugin files to the page. These extend functionality of the source plugin via DataTables.js
• The ExtTable CpScript registers the DataTables.js source plugin files.
• The DataSourceExportButton outputs a button that downloads the results from the Data Source into a XML file that can be imported into Microsoft Excel.

Table HTML

<table id="dataSource_XBMN" align="left" style="max-width: none;">
  <thead>
    <tr>
      <th><input type="checkbox" class="select-all"></th>
      <th>StartDate</th>
      <th>Title</th>
      <th>DataId</th>
      <th>AutoNumber</th>
    </tr>
  </thead>
  <tbody>
    [cp:literal:placeholders key='ItemContent' /]
  </tbody>
</table>

• The number of columns has been reduced here and will reflect the relational columns in the table selected.
• The first column will always contain the checkbox input. This allows users to select rows and download files referenced in the record's attributes or use the selected values for other purposes.
• The CpScript, [cp:literal:placeholders key='ItemContent' /], is where the dynamic content from the Item Content attribute is inserted.

Search Taxonomy HTML (Below Table)

<div class="cp-dtjs overlay">
  <div data-filter="taxonomy">
    <h2>File Types</h2>
    [cp:literal:scripting key='FormRadioButtonList' id='TaxonomyList1' selectionmode='Multiple' repeatlayout='Flow' repeatColumns='4' tablename='cpsys_Taxonomy' filter='cpsys_Taxonomy.ParentTaxonomyId = cpsys_Apos8982210e-0447-47d6-9c09-4ad5014e30c6cpsys_Apos' valuefield='SystemName' textfield='Name' /]
    <hr>
    <h2>Document Types</h2>
    [cp:literal:scripting key='FormRadioButtonList' id='TaxonomyList2' selectionmode='Multiple' repeatlayout='Flow' repeatColumns='4' tablename='cpsys_Taxonomy' filter='cpsys_Taxonomy.ParentTaxonomyId = cpsys_Apos10ef4b4d-f913-4447-94fd-11dc71a4b157cpsys_Apos' valuefield='SystemName' textfield='Name' /]
    <hr>
    <h2>Terms</h2>
    [cp:literal:scripting key='FormRadioButtonList' id='TaxonomyList3' selectionmode='Multiple' repeatlayout='Flow' repeatColumns='4' tablename='cpsys_Taxonomy' filter='cpsys_Taxonomy.ParentTaxonomyId = cpsys_Apos39421aa9-99ad-4dfe-8931-3f95ab57b74ccpsys_Apos' valuefield='SystemName' textfield='Name' /]
  </div>
  <button type="button" class="srch-tbl">Search Table</button>
</div>

• This HTML provides users a means to filter the table by Taxonomy.
• To complete the setup, the FormRadioButtonList CpScripts need updated with Taxonomy in the site that is associated to data being queried.
• This requires that a QueryStringTaxonomyFilter CpScript is included in the SQL query via the Select Command attribute in the Data Source. When using the Select Command builder, this is provided in the SQL by default.
• The default example provides users three tiers of taxonomy that when used would filter results by File Types, Document Types, and Terms. Records that match the taxonomy items selected will be returned.
• When this setup is implemented properly, there will be a clickable element labeled Other Filters that users may click that will show the taxonomy search controls.

Embedded JavaScript in HTML (Very Bottom)

<script type="text/javascript">

$('#dataSource_XBMN').cp_DataSourcesExtTable({
  onInitComplete: function () { },
  searchTermsLabel: "Search for:",
  taxonomy: {
    hasSearch: true,
    queryStringVariableName: "tax",
    modalTriggerHtml: '<strong>Other Filters:</strong> <img src="/Integrations/Centralpoint/Resources/Icons/Hierarchy.png" alt="filters">',
    resetButton: "Remove Filters",
    noneSelectedMessage: "Please select at least one taxonomy item."
  },
  dates: {
    hasSearch: true,
    from: "From:",
    to: "To: ",
    placeholder: "mm/dd/yyyy",
    searchButton: "Search",
    resetButton: "Reset"
  },
  download: {
    columnIndex: 0,
    buttonHtml: 'Download Files',
    attributes: ["FileUpload1", "FileUpload2", "FileUpload3", "FileUpload4", "FileUpload5", "Image", "Document"],
    fileName: "Attachments",
    selectedRowsControl: {
      hasControl: true,
      unfilteredButtonHtml: "View Selected Rows",
      filteredButtonHtml: "Clear Selected Filter"
    },
    onChange: function (selectedIds) { },
    onLoadSelectedIds: function() { return []; }
  }
});

</script>

cp_DataSourcesExtTable Configurable Properties

• onInitComplete: function () callback after the extender plugin has found the table and finished initialization
• searchTermsLabel when using the taxonomy search, the names of the searched items will be rendered above the table. This allows the bolded language to be changed in the following example: Search for: TaxonomyName1, TaxonomyName2

Taxonomy Properties

• hasSearch setting this to false will ensure the taxonomy search feature does not render. If this is set to true and the modalTriggerHtml does not render, it likely means that there are no checkboxes in the Search Taxonomy HTML. This feature prevents providing users an overlay with no options to search.
• queryStringVariableName should match the names used in the QueryStringTaxonomyFilter CpScript of the SQL query. This base name tax stored in the JavaScript property expects the names in the CpScript to be tax1, tax2, tax3 etc. Meaning the names in the CpScript are required to start at 1 and each subsequent name needs to be incremented by 1 as produced in the defaults explained here.
• modalTriggerHtml is the clickable HTML that triggers the search controls overly.
• resetButton is the text within the button HTML tag. This button shows after a user has filtered results by taxonomy.
• noneSelectedMessage is the alert presented to the user when they try to search within the overlay and no taxonomy is selected.

Date Properties

• hasSearch setting this to false will ensure the date search feature does not render.
• from the label text for the first date input.
• searchButton the text for the search button
• resetButton the text for the reset button. This buttons shows after a user has executed a date search

*IMPORTANT This feature requires QueryString CpScripts in the SQL with name='' values of fromDate and toDate. The Command Builder default SQL provides this.

Download Properties

• columnIndex the zero-based index of the column that holds the checkbox for rows in the table. Set this to -1 to disable this feature when the table is does not have a checkbox column. The defaults use the first column which is an index of 0 and allows users to move the checkbox to other columns if desired; which requires updating this value.
• buttonHtml is the text within the button HTML tag.
• attributes this defines the attribute system names within each selected record that contain file paths. These are the files included in the ZIP file downloaded to the user.
• fileName this is the name of the downloaded ZIP for the user when the button is clicked.
• selectedRowsControl.hasControl boolean property that determines if the selected rows filter button is rendered to the page. The default is false.
• selectedRowsControl.unfilteredButtonHtml inner HTML of the button tag the renders when the table is not filtered by selected rows.
• selectedRowsControl.filteredButtonHtml inner HTML of the button tag the renders when the table is filtered by selected rows.
• onChange: function (selectedIds) this is a callback function that occurs each time a checkbox is changed. This is commonly used to pass the DataIds to a hidden input. An example is below.
• onLoadSelectedIds: function () this is a callback function that occurs a single time when the plugin is initialized and provides a means to set selected DataId values. The system use for this is to ensure values are maintained when the plugin is used in a form as users may get stuck on a validator during postback. An example is below.

*IMPORTANT This value attribute within checkbox HTML of the table rows is required to use the DataId column. The HTML in this column should look like: <input type="checkbox" value="e2ec3c7f-fc71-f011-807a-0050b6c0caf2" class="cp-file-download">

Callback Examples

onChange: function (selectedIds) { 
  $('#cpsys_FormItem_cpsys_DefaultGroup_SelectedDataIds').val(selectedIds.join(', '));
}

onLoadSelectedIds: function() {
  return $('#cpsys_FormItem_cpsys_DefaultGroup_SelectedDataIds')?.val()?.split(/[,\s]+/);
}