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 record template.

  4. Paste the following code:

    const { DataRecord, DataModelEntity, Relation } = sirenapi;
    
    /**
     * Common function for data fetching, used by all views/downloads.
     */
    async function fetchRecordData(record, dataModelEntity) {
      // 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. It's responsible for:
     *
     *  1. Fetching all necessary data to display for the input record
     *  2. Building a React-based view of the fetched data
     *
     * This input object has the following properties:
     * - record: DataRecord instance for the displayed record
     * - dataModelEntity: DataModelEntity instance for the data model entity that prompted the record display
     * - render: A function that we can use to progressively render the record view
     * - cancelPromise: A promise that gets rejected when execution should be stopped (the user changes record or closes the Record Viewer)
     *
     * The returned value is the final React node rendered in the Record View > Overview tab.
     */
    async function buildRecordView({ record, dataModelEntity }) {
      const recordData = await fetchRecordData(record, dataModelEntity);
      return (
        <>
          <h1>{recordData.companyName}</h1>
          <div>Total raised amount: {recordData.raisedAmount}$</div>
        </>
      );
    }
    
    /**
     * A download function.
     *
     * Like to the record view, download functions receive an input object with a record and data model entity that
     * prompted the download.
     *
     * The download function will not return anything - it just needs to start a download of the record's data.
     */
    async function buildJsonDownload({ record, dataModelEntity }) {
      const recordData = await fetchRecordData(record, dataModelEntity);
      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.