POST
|
Hi, I have tried to write a simple HTML form to add a new record/feature as well as Image Attachment upload into a hosted table layer in ArcGIS Online using ArcGIS JS API, the code as follow: <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Feature Form</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.21/esri/themes/light/main.css">
<style>
body {
margin: 0;
padding: 0;
}
#form-container {
padding: 16px;
}
#form-container label {
display: block;
margin-bottom: 8px;
}
#form-container input[type="text"],
#form-container input[type="number"],
#form-container textarea {
width: 100%;
padding: 8px;
margin-bottom: 16px;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
}
#form-container input[type="file"] {
margin-top: 16px;
}
#form-container button[type="submit"] {
background-color: #4CAF50;
color: white;
padding: 8px 16px;
border: none;
border-radius: 4px;
cursor: pointer;
float: right;
}
#form-container button[type="submit"]:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<div id="form-container">
<form id="feature-form">
<label for="id" class="input-label">ID Rusun:</label>
<input type="text" id="id" name="id" value="JTGRSN22-04" readonly><br>
<label for="total_wakt">Total Waktu:</label>
<input type="text" id="total_wakt" name="total_wakt"><br>
<label for="file-input">Attach Image:</label>
<input type="file" id="file-input" name="file-input">
<button type="submit" id="submit-button">Submit</button>
</form>
</div>
<!-- ArcGIS JavaScript API -->
<script src="https://js.arcgis.com/4.9/"></script>
<!-- Your JavaScript code goes here -->
<script>
require([
"esri/layers/FeatureLayer",
"esri/Graphic",
"esri/widgets/Popup",
"esri/PopupTemplate",
"esri/widgets/FeatureForm",
"dojo/dom",
"dojo/domReady!"
], function (
FeatureLayer,
Graphic,
Popup,
PopupTemplate,
FeatureForm,
dom
) {
// Create a new feature layer for the hosted table with attachments enabled
const featureLayer = new FeatureLayer({
url: "https://services-ap1.arcgis.com/p2UXWyaOSPcjxuJd/arcgis/rest/services/progres_tes/FeatureServer/1",
outFields: ["*"],
visible: false,
supportsAttachments: true
});
// Create a new popup template for the feature layer
const popupTemplate = new PopupTemplate({
title: "{id}",
content: [
{
type: "fields",
fieldInfos: [
{ fieldName: "id", label: "ID Rusun" },
{ fieldName: "total_wakt", label: "Total Waktu" }
]
},
{
type: "attachments"
}
]
});
// Attach the popup template to the feature layer
featureLayer.popupTemplate = popupTemplate;
// Create a new feature form to handle form inputs
const featureForm = new FeatureForm({
container: "form",
layer: featureLayer
});
// Handle form submission
const submitButton = dom.byId("submit-button");
submitButton.addEventListener("click", function (event) {
event.preventDefault(); // Prevent form submission
// Get the feature form's values
const values = featureForm.getValues();
// Create a new graphic with the form values
const graphic = new Graphic({
geometry: null,
attributes: values
});
// Add the graphic to the feature layer
featureLayer.applyEdits({
addFeatures: [graphic]
}).then(function (addResults) {
// Get the object ID of the newly added feature
const objectId = addResults[0].objectId;
// Get the file input element and the selected file
const fileInput = dom.byId("file-input");
const file = fileInput.files[0];
// Use the addAttachment method to add the attachment to the feature
featureLayer.addAttachment(objectId, file).then(function () {
alert("Feature added successfully");
}).catch(function (error) {
alert("Error adding attachment: " + error.message);
});
}).catch(function (error) {
alert("Error adding feature: " + error.message);
});
});
});
</script>
</body>
</html> When I tried to run the code, I got error message: : "The table feature service type is not yet supported" in the browser console, I am not sure if the operation performed in the code is really not supported because I can edit the feature and upload image attachment directly inside the ArcGIS Online Map Viewer, any helps or hints would be appreciated, thank you so much.
... View more
03-21-2023
12:28 AM
|
0
|
0
|
294
|
POST
|
Thank you Zachary, exactly like you have been explained, after a thorough inspection by local ESRI Staffs in my country, the problem is I have not enable the HTTPS only configuration in the portal settings.
... View more
10-01-2020
07:22 PM
|
1
|
0
|
1242
|
POST
|
Hello, Currently I manage an ArcGIS Enterprise Deployment, and recently my users complaint about they cant publish Survey123 Forms using Survey123 Connect App for Windows, All of the users includes me the main administrator has this problem. Problem that we had is we failed to publish form using Survey123 Connect Apps, we got Error 301 Moved Permanently (Error message Attached), The strange thing is the Survey Folder and The hosted feature services actually successfully created inside the portal, but the form is failed to upload. But the problem is not happens if we create the Forms using Survey123 Website connected to our portal. I dont know if this problem is related to the CORS implementation in the server, So I have added the survey123 website URL to allowed CORS in the REST Handlers of server administrative directory. And this problem is started to happen after I upgraded the portal to 10.8.1 from 10.7.1 Any helps and solution are welcomed thank you so much
... View more
09-24-2020
12:17 AM
|
0
|
4
|
1292
|
POST
|
I just try it few hours ago (when I write this message), look at the last part of the discussion, I am using arcgis enterprise 10.7.1 , you can edit the oauth2.js from the portal installation, basically you just need to edit the html text element, and not editing the javascript syntax. here is attachment of my portal login page at this moment that I have just edited few hours ago
... View more
04-22-2020
08:11 PM
|
1
|
2
|
1121
|
POST
|
it is already discussed, check this https://community.esri.com/thread/200287-is-it-possible-to-customize-the-login-page-in-portal-for-arcgis
... View more
04-22-2020
12:47 PM
|
0
|
4
|
1121
|
Title | Kudos | Posted |
---|---|---|
1 | 04-22-2020 08:11 PM | |
1 | 10-01-2020 07:22 PM |
Online Status |
Offline
|
Date Last Visited |
12-27-2023
11:05 PM
|