Using Elastic UI components in scripts

This document describes the usage of version 1 of Template scripts which is deprecated. For step-by-step instructions on how to create templates with version 2 see Templating and reporting.

It is possible to use React components from the Elastic UI in template scripts.

The Elastic UI version included in Siren Investigate is 34.6.0.

You can modify the script created in the previous section to show a company name with a colored icon:

const { DataRecord, DataModelEntity, Relation } = sirenapi;

// EUI imports
const { EuiText, EuiTextColor, EuiIcon } = Eui;
async function buildRecordView({ record, dataModelEntity }) {
  const recordData = await fetchRecordData(record, dataModelEntity);
  // EUI usage
  return (
   <>
     <EuiText>
       <h1>
         <EuiTextColor color="success"><EuiIcon type="cheer" /> {recordData.companyName}</EuiTextColor>
       </h1>
       <p>Total raised amount: {recordData.raisedAmount}$</p>
     </EuiText>
   </>
 );
}

EUI components

Improving formatting with conditional output

You can use conditional output to provide more informative messages as opposed to plain numbers as shown in the following examples.

Plain number:

Plain number

Informative message:

Informative message

To implement the message above, add a Javascript function to return it when the number is 0.

The example below shows this approach by modifying the buildRecordView function implemented in the previous sections:

async function buildRecordView({ record, dataModelEntity }) {
  const recordData = await fetchRecordData(record, dataModelEntity);

  function currencyString(value) {
    // Conditional output implementation
    switch (value) {
      case undefined: return <i>{loading}</i>;
      case null: return <i>No data</i>;
      case 0: return <i>No investments</i>;
      default: return `${value} $`;
    }
  }
   return (
    <>
      <EuiText>
        <h1>
          <EuiTextColor color="success"><EuiIcon type="cheer" /> {recordData.companyName}</EuiTextColor>
        </h1>
        <p>Total raised amount: {currencyString(recordData.raisedAmount)}</p>
      </EuiText>
    </>
  );
}

Next steps