Your first template script

Create a template from scratch based on the data of the preloaded demo.

  1. Go to Data modelCompaniesTemplate scriptCreate script.

  2. Name the script Tutorial.

  3. Set Type to template.

  4. Paste the following code:

    const { DataRecord, DataModelEntity, Relation } = sirenapi;
    
    /**
     * Common function for data fetching and calculations.
     */
    async function fetchRecordData({ source, record, dataModelEntity }) {
      // We can ask for a label straight away with the "getLabel()" method.
      const companyName = await record.getLabel();
    
      // Raw field values are immediately available in the "source" parameter.
      const location = source.countrycode ?
        `${source.city} (${source.countrycode})` : source.city;
    
      // We can fetch linked records using the "getLinkedRecords()" method of
      // the record instance. 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,
        location,
        raisedAmount
      };
    }
    
    /**
     * A "view" perspective rendering function.
     *
     * The input parameter has all the necessary data about a document to
     * render the view.
     *
     * Returns the rendered view as a React node.
     */
    async function reactView(input) {
      const computedData = await fetchRecordData(input);
    
      return (
        <>
          <h1>{computedData.companyName}</h1>
          <div>Location: {computedData.location}</div>
          <div>Total raised amount: {computedData.raisedAmount}$</div>
        </>
      );
    }
    
    /**
     * A "binary" perspective rendering function.
     *
     * Like "view" perspectives, the "binary" perspectives receive an input
     * object with the document data you can use to build the download.
     *
     * Binary perspectives return an object representing the downloadable
     * static resource.
     */
    async function buildJsonDownload(input) {
      const computedData = await fetchRecordData(input);
    
      const json = JSON.stringify(computedData, null, 2);
      return { filename: 'data.json', content: json };
    }
    
    /**
     * "registerPerspectives()" is called to register the "perspectives".
     *
     * The "view" property declares a list of registered "view" perspectives
     * which is used to display the record in the user interface.
     *
     * The "binary" property declares a list of registered "binary"
     * perspectives which are used to download the record representation.
     *
     * "render" is the function that builds the perspective output.
     */
    context.registerPerspectives({
      view: {
        Tutorial: {
          render: reactView
        }
      },
      binary: {
        'Json report': {
          render: buildJsonDownload
        }
      }
    });
  5. Click Save and go to the previous browser tab.

  6. Refresh the page.

  7. Click the Template scripts tab.

  8. Click Add perspectives and add the Tutorial perspective created before.

  9. Click Save.

  10. From the list, select the script name.

The name of a company and the total raised amount from the dataset is displayed.

Template script preview

Next steps

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