Editar recurso fora do mapa usando formulário

Question

<\/HEAD>Sou muito novo no ESRI - e espero encontrar *alguma* forma de puxar este formulário para uma página com endereço único para que possa ser rapidamente editado\/triado pela equipe: (mais abaixo) <\/P> ...não funciona para mim ter este formulário disponível SOMENTE clicando em um ícone depois que você está em um web-map... pode haver dezenas de ícones em um mapa, e a equipe precisa ser levada diretamente para editar o item específico assim. <\/P> Agradeço muito qualquer sugestão. <\/P> Contexto:<\/P> Implementamos o "Crowdsource Reporter" para submissões públicas. Essas submissões, de 8 categorias diferentes ("domains", acredito) são extraídas do AGOL via FME (um ETL), depois enviadas\/consolidadas em uma *única* lista em nosso Intranet (lista do sharepoint 2013). Fizemos isso, ao invés de usar o "crowdsource manager" porque os domains públicos não correspondem igualmente aos nossos 13 departamentos internos que gerenciam as questões - então criamos webmaps que filtram as várias camadas para adaptá-las especificamente aos problemas específicos de cada departamento (tipos de problema) desses domains.<\/P> Gostaria que cada problema\/item na lista do sharepoint intranet (que os categoriza todos para a equipe como "novo" "pendente" e "concluído") tivesse um campo\/coluna que fosse uma URL dinâmica que levaria um funcionário diretamente à visualização de edição daquele problema específico. Agradeço antecipadamente por quaisquer sugestões. Meu melhor palpite é que o GlobalID precisará ser colocado em uma URL... Também sou iniciante na API. Dicas são bem-vindas.<\/P> Dados do Sharepoint do problema acima:<\/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