7.4 Embedding a Published Project in an APEX Application

You can load the Spatial Studio web component in an APEX Application and render the map visualization.

1. Sign in to your APEX workspace (see Signing In to Your Workspace).
2. Create a target application (see Creating Applications) into which you want to embed the Spatial Studio web component.
3. Add a Static Content region to the target application and edit its content to include the web component as shown by the following code:

   <script src="https://<host_name>:4040/spatialstudio/api/v1/embeddable.js?ex=kobinding"></script>
   
   <div style="width:100%; height: 50vh;">
       <spatial-studio-project 
           id="spatial-studio-project-1"
           server-url="https://<host_name>:4040/spatialstudio/"
           project-id="d241e77f3e46420a8509ce86ba44f00b"
           token="eyJ0eXAiOiJz..."
           project-header="off"
           layers-list="on">
       </spatial-studio-project>
   </div>
   
   // Setup css variables that conflict between APEX and Studio
   <style>
       body {
           --sgtech-bg: var(--rbr-blue);
           --oj-heading-text-color: white;
   
           --ut-region-header-text-color: white;
           --ut-region-border-color: white;
           --ut-footer-text-color: white;
   
           max-width: 100%;
   
           --oj-core-spacing-3x: 0px;
           --ut-region-body-padding-y: 0px;
           --ut-region-body-padding-x: 0px;
       }
   
       div.sgtech-home-container {
           max-height: 100%;
       }
   </style>

   Since the APEX environment already has a KnockoutJS mechanism running, ensure to use the query parameter ?ex=kobinding to exclude the own execution of KnockoutJS.

   The following figure show the static content region wrapped with the preceding HTML Code in the APEX application.

   Figure 7-1 Static Content Configuration

   
   

   
   Description of "Figure 7-1 Static Content Configuration"

   
   
4. Optionally, you can add an interactive code inside a script block next to the <spatial-studio-project> code for the same Static Content type region:

   <script>
       const studioProjectElement = document.getElementById('spatial-studio-project-1');
   
       studioProjectElement.addEventListener('features_selected', (event) => {			
           const selectionObjects = event.detail.value;
           console.log(JSON.stringify(selectionObjects));
       }
   </script>

5. Optionally, you can add a Dynamic Action to an Interactive Grid table with an executable JavaScript code.
   The following script shows an example to obtain the selected records from an interactive grid with id TABLEREGION and filter the corresponding features in the map.

   const spatialStudioProjectElement = document.getElementById('spatial-studio-project-1');
   
   const grid = apex.region('TABLEREGION').widget().interactiveGrid('getViews', 'grid');
   const model = grid.model;
   const selectedRecords = grid.getSelectedRecords();
   
   const COLUMN_NAME = 'REP_NAME';
   const LAYER_ID = 'c61ad9c582a8e173a83765e1ccb261fe';
   
   if (selectedRecords.length > 0){
       const selectedRepNames = selectedRecords.map(currentSelectedRecord => {
           return model.getValue(currentSelectedRecord, COLUMN_NAME)
       });
   
       const VALUES = selectedRepNames;
   
       spatialStudioProjectElement.filterFeatures(LAYER_ID, COLUMN_NAME, VALUES);
   } else {
       spatialStudioProjectElement.clearFilters && spatialStudioProjectElement.clearFilters(LAYER_ID);
   }

   The following figure show the preceding script JavaScript code wrapped to a Dynamic Action in the APEX application.

   Figure 7-2 Dynamic Actions Configuration

   
   

   
   Description of "Figure 7-2 Dynamic Actions Configuration"

   
   

   The following figure show the resulting map visualization using the Spatial Studio web component in the APEX application.

   Figure 7-3 Map Visualization in APEX

   
   

   
   Description of "Figure 7-3 Map Visualization in APEX"