Your first template script

In this section we’ll build a template from scratch based on the data of the Preloaded demo.

  1. Go to Data modelCompaniesTemplate scriptCreate script.

  2. Enter Tutorial as the name of the script.

  3. Set Type to sirenapi.

  4. Paste the following code:

    const version = 1;
    const type = 'template';
    
    const { DataRecord, DataModelEntity, Relation } = sirenapi;
    
    /**
    * Common function for data fetching, used by all views/downloads.
    */
    async function fetchRecordData(record, search) {
      // We can ask for a label straight away with the getLabel() method.
      const companyName = await record.getLabel();
       // We can fetch linked records using the getLinkedRecords() Record method. We should always supply
      // the maximum number of records to return, plus the sorting order for the returned records.
      const securedInvestmentsRelation = (await sirenapi.Relation.getRelationsByLabel('secured'))[0];
      const investments = await record.getLinkedRecords(securedInvestmentsRelation, {
        size: 1000,
        orderBy: { field: 'raised_amount', order: 'desc' }
      });
    
      // Now, given our investments we can calculate the total raised amount.
      let raisedAmount = 0;
      for (const investment of investments) {
        const amount = (await investment.getFirstRawFieldValue('raised_amount')) || 0;
        raisedAmount += amount;
      }
    
      return {
        companyName,
        raisedAmount
      };
    }
    
    /**
    * View function for the Record Viewer.
    *
    * This function will receive the following parameters:
    * - record: DataRecord instance for the record being displayed
    * - search: DataModelEntity instance for the search that prompted the record display
    * - render: A function that will render a React node in the Record Viewer, used for partial updates
    *
    * The returned value is the final React node that will be rendered in the Record View > Overview
    * tab.
    */
    async function buildRecordView(record, search, render) {
      const recordData = await fetchRecordData(record, search);
      return (
        <>
          <h1>{recordData.companyName}</h1>
          <div>Total raised amount: {recordData.raisedAmount}$</div>
        </>
      );
    }
    
    /**
    * A download function.
    *
    * Similarly to the record view, download functions receive a DataRecord and a DataModelEntity the
    * record is viewed from.
    *
    * The download function will not return anything - it just needs to start a download of the
    * record's data.
    */
    async function buildJsonDownload(record, search) {
      // Finally, we return the compiled data
      const recordData = await fetchRecordData(record, search);
      const json = JSON.stringify(recordData, null, 2);
      sirenapi.Reporting.downloadString(json, 'data.json', 'application/json');
    }
    
    /**
    * Call registerTemplate() to enable the views and downloads available in the script.
    * The "recordView" property declares the view used in the Record Viewer's Overview tab.
    * The "download" property associates a file type to the associated download function.
    */
    context.registerTemplate({
      recordView: buildRecordView,
      download: {
        json: buildJsonDownload
      }
    });
  5. Click on Save and go to the previous browser tab.

  6. Refresh the page.

  7. Click on the Template scripts tab.

  8. Click on Add scripts and add the Companies script created before.

  9. Click on Save.

  10. Click on the script name in the list.

You should see the name of a company followed by the total raised amount from the dataset.

Template script preview

Next steps

After creating your first script you can customize its output using EUI components.