Modifier une fonctionnalité en dehors de la carte en utilisant un formulaire

Question

<\/HEAD>Je suis très nouveau chez ESRI - et j'espère trouver *une* manière d'intégrer ce formulaire dans une page adressable de manière unique afin qu'il puisse être rapidement modifié\/trié par le personnel : (plus d'informations ci-dessous) <\/P> ...il ne me convient pas que ce formulaire soit disponible UNIQUEMENT en cliquant sur une icône une fois que vous êtes sur une web-map... il pourrait y avoir des dizaines d'icônes sur une carte, et le personnel doit être dirigé directement pour modifier l'élément spécifique comme celui-ci. <\/P> J'apprécie vraiment toutes suggestions. <\/P> Contexte:<\/P> Nous avons mis en place "Crowdsource Reporter" pour les soumissions publiques. Ces soumissions, provenant de 8 catégories différentes ("domains", je crois) sont extraites d'AGOL via FME (un ETL), puis poussées\/consolidées dans une *liste* unique sur notre Intranet (liste sharepoint 2013). Nous avons fait cela, plutôt que d'utiliser "crowdsource manager" car les domains publics ne correspondent pas équitablement à nos 13 départements internes qui gèrent les problèmes - donc nous avons créé des webmaps qui filtrent les différentes couches pour les adapter spécifiquement aux problèmes spécifiques de chaque département (types de problèmes) issus de ces domains.<\/P> Je voudrais que chaque problème\/élément dans la liste intranet sharepoint (qui les catégorise tous pour le personnel comme "nouveau" "en attente" et "terminé") ait un champ\/colonne qui est une URL dynamique qui amènerait un employé directement à la vue d'édition de ce problème spécifique. Merci d'avance pour toutes suggestions. Mon meilleur pari est que le GlobalID devra être intégré dans une URL... Je suis aussi novice avec l'API. Tous conseils sont les bienvenus.<\/P> Données Sharepoint du problème ci-dessus:<\/P> <\/P><\/BODY><\/HTML>

RobertScheitlin__GISP · Answer

Jake, You could consider using the JS API 4.x FeatureForm to do this. FeatureForm | API Reference | ArcGIS API for JavaScript 4.10 Here is a sample: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"> <title>Update Feature Attributes - 4.10</title> <link rel="stylesheet" href="https://js.arcgis.com/4.10/esri/css/main.css"> <script src="https://js.arcgis.com/4.10/"></script> <style> html, body, #update { height: 100%; width: 100%; margin: 0; padding: 0; } #update { padding: 6px; } #form{ background: #fff; } /* replaces esri-widget--panel */ .scroller { overflow-x: hidden; overflow-y: auto; } </style> <script> require([ "esri/widgets/FeatureForm", "esri/layers/FeatureLayer" ], function( FeatureForm, FeatureLayer) { let highlight, editFeature; const featureLayer = new FeatureLayer({ portalItem: { id: "449887ea7d60429fbf6f0c67881f2758" } }); featureLayer.load(); function getUrlVars() { var vars = {}; var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) { vars[key] = value; }); return vars; } // Add a new feature form with grouped fields const form = new FeatureForm({ container: "form", groupDisplay: "sequential", // only display one group at a time layer: featureLayer, fieldConfig: [{ // autocastable to FieldGroupConfig label: "Inspector information", // Inspector group description: "Field inspector information", // individual field configurations within the group fieldConfig: [{ // autocastable as FieldConfig name: "inspector", label: "Name" },{ name: "inspemail", label: "Email address" },{ name: "insp_date", label: "Date of inspection" }] },{ // Contact group label: "Contact information", description: "The insured's contact information", fieldConfig: [{ // autocastable as FieldConfig name: "placename", label: "Business name" },{ name: "firstname", label: "First name" },{ name: "lastname", label: "Last name" },{ name: "workphone", label: "Work telephone number" }] },{ // Insurance coverage group label: "Insurance coverage", description: "Structure and contents coverage", fieldConfig: [{ // autocastable as FieldConfig name: "strinsur", label: "Structure insured" },{ name: "continsur", label: "Contents insured" }] },{ // Insurance type group label: "Insurance type information", description: "Type of insurance coverage", fieldConfig: [{ // autocastable as FieldConfig name: "rentinsur", label: "Renter's" },{ name: "floodinsur", label: "Flood" },{ name: "fireinsur", label: "Fire" }] }] }); featureLayer.watch("loaded", function(){ var vars = getUrlVars(); if(vars.hasOwnProperty('oid')){ selectFeature(parseInt(vars.oid)); } }); // Highlight the clicked feature and display // its attributes in the featureform. function selectFeature(objectId) { // query feature from the server featureLayer.queryFeatures({ objectIds: [objectId], outFields: ["*"], returnGeometry: true }).then(function(results) { if (results.features.length > 0) { editFeature = results.features[0]; // display the attributes of selected feature in the form form.feature = editFeature; } }); } // Listen to the feature form's submit event. form.on("submit", function() { if (editFeature) { // Grab updated attributes from the form. const updated = form.getValues(); // Loop through updated attributes and assign // the updated values to feature attributes. Object.keys(updated).forEach(function(name) { editFeature.attributes[name] = updated[name]; }); // Setup the applyEdits parameter with updates. const edits = { updateFeatures: [editFeature] }; applyAttributeUpdates(edits); } }); // Call FeatureLayer.applyEdits() with specified params. function applyAttributeUpdates(params) { document.getElementById("btnUpdate").style.cursor = "progress"; featureLayer.applyEdits(params).then(function(editsResult) { // Get the objectId of the newly added feature. // Call selectFeature function to highlight the new feature. if (editsResult.addFeatureResults.length > 0) { const objectId = editsResult.addFeatureResults[0].objectId; selectFeature(objectId); } document.getElementById("btnUpdate").style.cursor = "pointer"; }) .catch(function(error) { console.log("==============================================="); console.error("[ applyEdits ] FAILURE: ", error.code, error.name, error.message); console.log("error = ", error); document.getElementById("btnUpdate").style.cursor = "pointer"; }); } document.getElementById("btnUpdate").onclick = function() { // Fires feature form's submit event. form.submit(); } }); </script> </head> <body> <div id="update" class="esri-widget"> <div id="form" class="scroller esri-component"></div> <input type="button" class="esri-button" value="Update assessment" id="btnUpdate"> </div> </body> </html> ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ The url has to have the parameter "oid" matching and ObjectId in the featureLayer RohanOprisko_1-1626198753536.png