Your first template script
Create a template from scratch based on the data of the preloaded demo.
-
Go to Data model → Companies → Template script → Create script.
-
Name the script Tutorial.
-
Set Type to template.
-
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 } } });
-
Click Save and go to the previous browser tab.
-
Refresh the page.
-
Click the Template scripts tab.
-
Click Add perspectives and add the Tutorial perspective created before.
-
Click Save.
-
From the list, select the script name.
The name of a company and the total raised amount from the dataset is displayed.
Next steps
After you create your first script, you can customize its output using EUI components.