nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Sketch Widget API in Experience Builder Developer Edition not displaying graphics output

Henry_PeleshBW

Hello all,

I am working to create a custom widget with the JS API Widget Wrapper by importing the Sketch widget into the "client/your-extensions/widgets" folder of my ArcGIS Experience Builder Application. The widget is working correctly, however, the resulting graphic is not visible when finishing a Sketch. A selection box is highlighted in my Map view but the physical graphic is not visible and cannot be rotated or modified (Image attached below). Please let me know of any possible solutions to this issue.

Sketch output not showing graphic in custom Experience Builder widget.

Thanks,

Henry

Finde mehr Beiträge mit dem Tag

Accepted answers

GavinRehkemper

Hi Henry Pelesh, It looks like you've added a line:

const layer = new GraphicsLayer();

that is correct, it creates a GraphicsLayer, but you have not added that layer to the map. After that line you should add:

jmv.view.map.add(layer);

After you add that line, the drawn shape will stay visible on the map after you draw it.

All comments

RenattoAttiêLima

Good afternoon GavinRehKemper.

Can you help me ?

I needed implement this code and I wrote this code with your clue.

But the widget does not show on the screen and doesn't return error.

Henry_PeleshBW

Gavin Rehkemper‌,

Thank you very much! I must have missed that line of code. I appreciate your help! Problem solved!

Regards,

Henry

GavinRehkemper

Hi Henry Pelesh, It looks like you've added a line:

const layer = new GraphicsLayer();

that is correct, it creates a GraphicsLayer, but you have not added that layer to the map. After that line you should add:

jmv.view.map.add(layer);

After you add that line, the drawn shape will stay visible on the map after you draw it.

Henry_PeleshBW

Gavin Rehkemper‌ has there been any progress on this? I appreciate you taking the time to help. Please let me know if there is anything more I can provide you with to help solve my issue.

Thanks,

Henry

Henry_PeleshBW

Gavin Rehkemper‌

Here is my widget.tsx file:

/** @jsxjsx */

import { AllWidgetProps, BaseWidget, jsx, React } from "jimu-core";

import { IMConfig } from "../config";

import { JimuMapViewComponent, JimuMapView } from "jimu-arcgis";

import Sketch = require("esri/widgets/Sketch");

import GraphicsLayer = require("esri/layers/GraphicsLayer");

import { any } from "prop-types";

interface IState {

jimuMapView: JimuMapView;

currentWidget: Sketch;

}

export default class Widget extends BaseWidget<AllWidgetProps<IMConfig>, any> {

private myRef = React.createRef<HTMLDivElement>();

constructor(props) {

super(props);

this.state = {

jimuMapView: null,

currentWidget: null

};

}

activeViewChangeHandler = (jmv: JimuMapView) => {

if (this.state.jimuMapView) {

// we have a "previous" map where we added the widget

// (ex: case where two Maps in single Experience page and user is switching

// between them in the dropdown) - we must destroy the old widget in this case.

if (this.state.currentWidget) {

this.state.currentWidget.destroy();

}

if (jmv) {

this.setState({

jimuMapView: jmv

});

if (this.myRef.current) {

// since the widget replaces the container, we must create a new DOM node

// so when we destroy we will not remove the "ref" DOM node

const container = document.createElement("div");

this.myRef.current.appendChild(container);

const layer = new GraphicsLayer();

const sketch = new Sketch({

layer: layer,

view: jmv.view,

container: container,

creationMode: "update"

});

// Save reference to the "Current widget" in State so we can destroy later if necessary.

this.setState({

currentWidget: sketch

});

} else {

console.error('could not find this.myRef.current');

}

};

// activeViewChangeHandler is not called in the builder when "None" is selected

// for the map, so we must cleanup here:

componentDidUpdate = evt => {

if (this.props.useMapWidgetIds.length === 0) {

// "None" was selected in the "Select map widget" dropdown:

if (this.state.currentWidget) {

this.state.currentWidget.destroy();

}

};

render() {

// If the user has selected a map, include JimuMapViewComponent.

// If not, show a message asking for the Experience Author to select it.

let jmc = <p>Please select a map.</p>;

if (

this.props.hasOwnProperty("useMapWidgetIds") &&

this.props.useMapWidgetIds &&

this.props.useMapWidgetIds.length === 1

) {

jmc = (

<JimuMapViewComponent

useMapWidgetIds={this.props.useMapWidgetIds}

onActiveViewChange={this.activeViewChangeHandler}

);

}

return (

<div

className="widget-js-api-widget-wrapper jimu-widget"

style={{ overflow: "auto" }}

{jmc}

</div>

);

}

Thank you,

Henry

GavinRehkemper

Henry, could you please post your widget code that is not working so we can load it up to replicate your issue? Thanks!

Nimm an der Unterhaltung teil

Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.

Schnellzugriffe

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.