Editar característica fuera del mapa usando formulario

Question

<\/HEAD>Soy muy nuevo en ESRI - y espero encontrar *alguna* manera de extraer este formulario a una página con dirección única para que el personal pueda editarlo\/clasificarlo rápidamente: (más abajo) <\/P> ...no me funciona que este formulario esté disponible SÓLO al hacer clic en un icono una vez que estás en un web-map... puede haber docenas de iconos en un mapa, y el personal necesita ser llevado directamente para editar el ítem específico como este. <\/P> Agradezco mucho cualquier sugerencia. <\/P> Antecedentes:<\/P> Hemos implementado "Crowdsource Reporter" para envíos públicos. Esos envíos, de 8 categorías diferentes ("domains", creo) se extraen de AGOL vía FME (un ETL), luego se empujan\/consolidan en una *única* lista en nuestro Intranet (lista de sharepoint 2013). Hicimos esto, en lugar de usar "crowdsource manager" porque los domains públicos no se corresponden igual con nuestros 13 departamentos internos que gestionan los problemas - así que hemos creado webmaps que filtran las diversas capas para adaptarlas específicamente a los problemas específicos (tipos de problema) de cada departamento desde esos domains.<\/P> Me gustaría que cada problema\/ítem en la lista intranet de sharepoint (que los categoriza a todos para el personal como "nuevo" "pendiente" y "completado") tenga un campo\/columna que sea una URL dinámica que lleve a un empleado directamente a la vista de edición de ese problema específico. Gracias de antemano por cualquier sugerencia. Mi mejor suposición es que el GlobalID tendrá que ser puesto en una URL... También soy novato en la API. Se agradecen indicaciones.<\/P> Datos de Sharepoint del problema anterior:<\/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