Here you will do the following:

• Create a new type of component in edgeCore
• Use JavaScript in an HTML Template Visualization
• Implement a Show Record Details action

In this exercise, you are going to use an HTML Template Visualization to create a new type of component in edgeCore. The List Visualization that you created earlier allows a user to scroll through a list and click on an item. Sometimes it may be preferable to have a “quick-select” list that drops down a list of items for selection. In this type of selector, the user can also type to filter the list. Moreover, you will also see a simple example of how to implement JavaScript as part of the HTML Template configuration.

Create an HTML Template Visualization

You will create an HTML Template Visualization that will generate a quick-select component.

Perform the following steps to create an HTML Template Visualization:

1. In the previously created National Park Summary CSV Feed box, click the gear icon button and then select + > New Visualization > HTML Template.
2. In the Configure tab, in Name, provide a name (for example, Park Quick Select).
3. In the Renderer tab, do the following:
   a) In HTML, enter the following code:

   <div id="parks-dropdown__container">
     <mat-form-field appearance="fill" class="w__100">
       <mat-label>Select a park</mat-label>
       <mat-select [(ngModel)]="selectedPark.selectedRow" (selectionChange)="onSelectionChange()">
         <mat-option *ngFor="let row of rows; index as i" [value]="i">{{<a href="http://row.Name" title="http://row.Name" data-renderer-mark="true" class="css-1rn59kg">row.Name}}</mat-option>
       </mat-select>
     </mat-form-field>
   </div>
   

   * For version 4.6.x, paste the following code:

   <div id="parks-dropdown__container">
     <mat-form-field appearance="fill" class="w__100">
       <mat-label>Select a park</mat-label>
       <mat-select [(ngModel)]="selectedPark.selectedRow" (selectionChange)="onSelectionChange()">
         <mat-option *ngFor="let row of rows; index as i" [value]="i">
           <a href="http://row.Name" title="http://row.Name" data-renderer-mark="true" class="css-1rn59kg">{{row.Name}}</a>
         </mat-option>
       </mat-select>
     </mat-form-field>
   </div>

   b) In JavaScript, enter the following code:

   component.selectedPark = { selectedRow: null };
   component.onSelectionChange = () => {
     var row = component.rows[component.selectedPark.selectedRow];
     console.log("ROW: ", row);
     if (row) {
      component.fireRowClickEvent(row);
     }
   };
   

   c) In LESS/CSS, enter the following code:

   #parks-dropdown__container{
     height: 100%;
     padding: 20px;
   }
   .w__100{
     width: 100%;
   }
   

4. Go to Preview, where you can observe the HTML component showing a drop-down selector pre-populated with park names.
5. Click Save and Close.
6. Go to the National Parks page and add the HTML visualization you have just created. Place it wherever you see fit and save the page.

 

Create a Show Record Details Action

To complete this exercise, you will attach an action to the quick-select HTML visualization that will show a pop-up with various details for the selected park.

Perform the following steps:

1. In the Park Quick Select HTML Visualization, click the three dots and select Edit Actions.
   A pop-up is displayed.
2. In the pop-up, click + Add > Click Row > Show Record Details.
   A new page is displayed.
3. In Action Name, enter Show Park Details.
4. (Optional) Enable the Always Show In Menu toggle switch to see the action in the menu once it is created. As a result, the action will be shown upon clicking the item.
5. In Field Visibility, do the following:
   – Click >> next to Displayed Fields to move all of the fields from Displayed Fields to Hidden Fields.
   – Click each of the following fields to move them back to Displayed Fields: Description, Name, State.
6. Click Next.
   No changes are needed in Conditions or Permissions.
7. Click Save and Close.
   The action is displayed in the pop-up. Close the pop-up.
   To validate the Show Record Details Action, click to select any park in the Park Quick Select dropdown. Information about the selected park is shown.
8. Close the pop-up.