Skip to content

Commit

Permalink
Merge pull request #1 from EsriPS/using-arcgis-feature-table
Browse files Browse the repository at this point in the history 
First attempt at using feature table component
  • Loading branch information
@jpeterson
jpeterson authored Oct 31, 2024
2 parents fec2b60 + 7e6b985 commit 7c3b944
Show file tree
Hide file tree
Showing 5 changed files with 169 additions and 200 deletions.
33 changes: 4 additions & 29 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@
<link rel="icon" href="data:;base64,=" />

<!-- Calcite -->
<script type="module" src="https://js.arcgis.com/calcite-components/2.13.0/calcite.esm.js"></script>
<link rel="stylesheet" type="text/css" href="https://js.arcgis.com/calcite-components/2.13.0/calcite.css" />
<script type="module" src="https://js.arcgis.com/calcite-components/2.13.2/calcite.esm.js"></script>
<link rel="stylesheet" type="text/css" href="https://js.arcgis.com/calcite-components/2.13.2/calcite.css" />

<!-- Load app styles -->
<link rel="stylesheet" href="main.css" />
Expand All @@ -36,34 +36,9 @@
<calcite-tooltip placement="bottom" reference-element="update-attributes">Save updates</calcite-tooltip>
</calcite-action-bar>

<!-- Editor Component -->
<arcgis-editor reference-element="arcgis-map" class="hidden"></arcgis-editor>

<!-- <calcite-stepper numbered layout="vertical">
<calcite-stepper-item heading="Add info" selected>
<calcite-notice width="full" open>
<div slot="title">Step 1 content</div>
</calcite-notice>
</calcite-stepper-item>
<calcite-stepper-item heading="Edit Permit">
<arcgis-editor reference-element="arcgis-map"></arcgis-editor>
</calcite-stepper-item>
<calcite-stepper-item heading="Add images">
<calcite-notice width="full" open>
<div slot="title">Step 3 content</div>
</calcite-notice>
</calcite-stepper-item>
<calcite-stepper-item heading="Review">
<calcite-notice width="full" open>
<div slot="title">Step 4 content</div>
</calcite-notice>
</calcite-stepper-item>
</calcite-stepper> -->


<!-- <calcite-accordion selection-mode="single" icon-type="chevron" scale="l">
<calcite-accordion-item expanded description="" heading="Review Incoming Permits" icon-start="embark">
</calcite-accordion-item>
</calcite-accordion> -->
</calcite-panel>
<calcite-panel id="panel-map" heading="Britz">
<arcgis-map id="arcgis-map" item-id="7394ffe718474dddb1946d16ca939ff1">
Expand All @@ -73,7 +48,7 @@
</arcgis-basemap-toggle>
</arcgis-map>
<calcite-panel id="panel-table">
<!-- table placeholder -->
<arcgis-feature-table related-records-enabled return-geometry-enabled></arcgis-feature-table>
</calcite-panel>
</calcite-panel>
</div>
Expand Down
7 changes: 6 additions & 1 deletion main.css
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/* Calcite Dev Summit 2024 Demo Template */
/* Demo template supporting styles */

@import 'https://js.arcgis.com/4.30/@arcgis/core/assets/esri/themes/light/main.css';
@import 'https://js.arcgis.com/4.31/@arcgis/core/assets/esri/themes/light/main.css';

html,
body,
Expand All @@ -28,6 +28,11 @@ calcite-action-pad {
margin-inline-end: 0.5rem;
}

arcgis-feature-table {
width: 100%;
height: 100%;
}

arcgis-editor {
/* position: absolute;
bottom: 0;
Expand Down
117 changes: 53 additions & 64 deletions main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,10 @@

// Map Components
import '@arcgis/map-components/dist/components/arcgis-map';
import '@arcgis/map-components/dist/components/arcgis-editor';
import '@arcgis/map-components/dist/components/arcgis-feature-table';
import '@arcgis/map-components/dist/components/arcgis-legend';
import '@arcgis/map-components/dist/components/arcgis-search';
import '@arcgis/map-components/dist/components/arcgis-editor';
import '@arcgis/map-components/dist/components/arcgis-expand';
import '@arcgis/map-components/dist/components/arcgis-zoom';
import '@arcgis/map-components/dist/components/arcgis-basemap-toggle';
Expand All @@ -19,72 +20,55 @@ import { setAssetPath } from '@esri/calcite-components/dist/components';
setAssetPath(location.href);
// #endregion Imports

// Obtain the Map and Editor components
// Obtain the Map, Editor, and FeatureTable components
const arcgisMap = document.querySelector('arcgis-map');
const editor = document.querySelector('arcgis-editor');
const filterNeedsReview = document.getElementById('filter-review');
const stepper = document.querySelector('calcite-stepper');
const table = document.querySelector('arcgis-feature-table');
// const stepper = document.querySelector('calcite-stepper');

console.log(stepper);
// Custom workflow handles
const filterNeedsReview = document.getElementById('filter-review');

arcgisMap.addEventListener('arcgisViewReadyChange', async (event) => {
// Find the inspection zones layer and set it in the global context

await reactiveUtils.whenOnce(() => !arcgisMap.view.updating);

const buildingsLayer = arcgisMap.map.layers.find((layer) => {
return layer.title === 'Buildings';
});

const buildingsLayerView = await arcgisMap.view.whenLayerView(buildingsLayer);
console.log(buildingsLayerView);
await reactiveUtils.whenOnce(() => buildingsLayer.loaded);

// Initialize FeatureTable
const featureTable = new FeatureTable({
container: document.getElementById('panel-table'),
view: arcgisMap.view,
layer: buildingsLayer,
relatedRecordsEnabled: true,

actionColumnConfig: {
label: 'Go to feature',
icon: 'zoom-to-object',
callback: (params) => {
// Todo: figure out why feature.geometry is null here...
// view.goTo(params.feature.geometry.extent.expand(1.5));

view.goTo(params.feature);
},
},

tableTemplate: {
columnTemplates: [
{
type: 'field',
fieldName: 'UID',
label: 'ID',
flexGrow: 0,
width: '170px',
},
{
type: 'field',
fieldName: 'STATUS',
label: 'Permit Status',
},
{
type: 'field',
fieldName: 'BEZGFK',
label: 'Building Type',
},
{
type: 'field',
fieldName: 'NAMLAG',
label: 'Address',
},
],
// Initialize FeatureTable Component
table.view = arcgisMap.view;
table.layer = buildingsLayer;
table.actionColumnConfig = {
label: 'Go to feature',
icon: 'zoom-to-object',
callback: (params) => {
view.goTo(params.feature.geometry.extent.expand(1.5));
},
});
};
table.tableTemplate = {
columnTemplates: [
{
type: 'field',
fieldName: 'UID',
label: 'ID',
flexGrow: 0,
width: '170px',
},
{
type: 'field',
fieldName: 'STATUS',
label: 'Permit Status',
},
{
type: 'field',
fieldName: 'BEZGFK',
label: 'Building Type',
},
],
};

window.subTableTemplate = {
columnTemplates: [
Expand All @@ -105,31 +89,32 @@ arcgisMap.addEventListener('arcgisViewReadyChange', async (event) => {
label: 'Edit Record',
icon: 'pencil',
callback: (params) => {
console.log(params);
editor.classList.remove('hidden');
editor.startUpdateWorkflowAtFeatureEdit(params.feature);
stepper.goToStep(2);
// stepper.goToStep(2);
},
};

// Configure "permits" related table
reactiveUtils.when(
() => featureTable.relatedTable,
() => table.relatedTable,
(relatedTable) => {
console.log('Related Table Loaded');
// relatedTable.tableTemplate = window.subTableTemplate;
relatedTable.tableTemplate = window.subTableTemplate;
relatedTable.actionColumnConfig = window.subActionColumnConfig;
relatedTable.relatedRecordsEnabled = false;
}
);

// Stash these in the window for now
window.buildingsLayer = buildingsLayer;
window.buildingsLayerView = buildingsLayerView;
window.featureTable = featureTable;
window.featureTable = table;
window.editor = editor;
window.map = arcgisMap;
window.view = arcgisMap.view;
});

// #region Custom workflow steps
filterNeedsReview.addEventListener('click', () => {
const query = buildingsLayer.createQuery();
query.where = "STATUS = 'Needs Review'";
Expand All @@ -141,17 +126,20 @@ filterNeedsReview.addEventListener('click', () => {

const features = results.features;
if (features.length > 0) {
// Todo: Better for the demo to set objectIds or highlightIds?
// featureTable.highlightIds.removeAll();
// featureTable.highlightIds.addMany(
// features.map((feature) => feature.attributes.OBJECTID)
// );
// Highlight the features where Permit Status is Needs Review
featureTable.highlightIds.removeAll();
featureTable.highlightIds.addMany(
features.map((feature) => feature.attributes.OBJECTID)
);

// Filter the table by features with STATUS = Needs Review
featureTable.objectIds = features.map(
(feature) => feature.attributes.OBJECTID
);

// Add filter-by-selection-enabled to the table element
featureTable.filterBySelectionEnabled = true;

const unionedGeometries = geometryEngine.union(
features.map((feature) => feature.geometry)
);
Expand All @@ -165,3 +153,4 @@ filterNeedsReview.addEventListener('click', () => {
console.error('Error querying features:', error);
});
});
// #endregion Custom workflow steps
Loading

0 comments on commit 7c3b944

Please sign in to comment.