Your first template script
In this section we’ll build a template from scratch based on the data of the Preloaded demo.
-
Go to Data model → Companies → Template script → Create script.
-
Enter Tutorial as the name of the script.
-
Set Type to sirenapi.
-
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 } });
-
Click on Save and go to the previous browser tab.
-
Refresh the page.
-
Click on the Template scripts tab.
-
Click on Add scripts and add the Companies script created before.
-
Click on Save.
-
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.
Next steps
After creating your first script you can customize its output using EUI components.