Latest Contributions by GavinRehkemper

We have received a few questions over the past few months about how to use "Custom ArcGIS API for JavaScript widgets" (like the Custom Recenter Widget) from within an Experience Builder widget. These are the current instructions on how to do that. There may be better or different ways - if you learn of one, please let us know! Note: Last updated 2020-07 for ArcGIS JS API 4.16 and Experience Builder Developer Edition v1.1. 1. Build the JavaScript API Widget Follow the instructions in the documentation for the ArcGIS API for JavaScript to Create a Custom Widget and then create the Custom Recenter Widget. These guides do not use webpack to package the files - they are only using the TypeScript compiler ( tsc ) to convert the *.tsx files to *.js files. After you've run the tsc command to convert the tsx files to js files one last time, copy the JS file ( Recenter.js ) and move on - we will copy this into our custom Experience Builder widget in the next step. 2. Create a Custom Experience Builder widget Create a new custom Experience Builder widget. The easiest way to get going quickly is probably to copy the simple widget. Since the JS API Widget interacts with a Map View, your Experience Builder widget will need the infrastructure to reference a Map View widget within the same Experience app. The easiest way to do this is to create an Experience, add your widget, then go to the config for your working app ( server\src\public\apps\Z\resources\config ) and set "useMapWidgetIds": ["widget_ZZ"], in the widget config. In your widget manifest.json , include the jimu-arcgis dependency by adding: "dependency": ["jimu-arcgis"],‍‍‍‍ Copy the JS file that you had from step 1 ( Recenter.js ) into your widget files, at the same level as widget.tsx (within src/runtime ). Within widget.tsx , import the file: import Recenter = require("./Recenter");‍‍‍‍ Then utilize the Recenter widget within the callback of JimuMapViewComponent or anywhere you have an instance of the Map View: render() { return ( <div className="widget-demo jimu-widget m-2"> {this.props.hasOwnProperty("useMapWidgetIds") && this.props.useMapWidgetIds && this.props.useMapWidgetIds.length === 1 && ( <JimuMapViewComponent useMapWidgetIds={this.props.useMapWidgetIds} onActiveViewChange={(jmv: JimuMapView) => { if (jmv) { jmv.view.when(function () { const recenter = new Recenter({ view: jmv.view, initialCenter: [-100.33, 43.69], }); jmv.view.ui.add(recenter, "top-right"); }); } }} /> )} <p>Simple Widget</p> </div> ); }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ For the above code to work, you'll need to import JimuMapViewComponent and JimuMapView at the top of your widget like this: import { JimuMapViewComponent, JimuMapView } from "jimu-arcgis";‍ If successful, you'll see the info box in the top-right corner of the map when you add your widget to an Experience (and configure it manually to reference a map): Next Steps The next logical step would probably be to modify the widget to have the text inside the Experience Builder widget instead of on the map. I'll leave that up to you, and also please feel free to post other widgets and widget ideas you are building! ... View more

A method of writing a widget that can be used both within Experience Builder or a regular React app. When building a custom widget for Experience Builder, if your primary goal is to use the widget within Experience Builder, building it directly using the standard workflows is the best and quickest way to success. But what if you need to create a widget that works in both a plain React app and within Experience Builder? With a little bit of extra work on top of the standard workflows, you can write a React component (widget) that can be included in both places! One method to do this is: Use TSDX to create and develop a React Component. npm install the Component into the client folder of Experience Builder. Create a new custom Experience Builder widget. Within this widget, import and use the React Component you've created. Pretty simple in theory. In practice, it can get a little complex, so I'll step through the details below. 1. Use TSDX to Create a React Component TSDX is a "zero-config CLI that helps you develop, test, and publish modern TypeScript [React components] with ease." Create a new directory and in a terminal, run: npx tsdx create my-widget cd my-widget npm start Make sure you choose "react" for your template. This will give you a folder structure of supporting files -- which is the infrastructure where you can build out your widget functionality as a React Component. Check out the TSDX documentation for more details on how to develop your component. TSDX comes with a "playground" React app under the example folder that you can use to see your component within the context of an example application during development. During development you will typically be running npm start in both the root directory (to build the widget) and also npm start within the example directory to run the app to see the component output. Recommended Change - Default Export By default, the template exports a React component named Thing . The first change I make is to export the component as the default export so importing is a bit more clean later on. So make these changes to my-widget\src\index.tsx and my-widget\example\index.tsx . Then after running npm start in both the root directory and the example directory, and browse to http://localhost:1234, you should be able to see your working component (just a single line of text): 2. npm install the Component into Experience Builder Now you have a React Component that is running in a React App (that's what's running at http://localhost:1234 above), so let's move on to showing our Component within Experience Builder. First, install Experience Builder per the instructions here. Then open a terminal and browse to the client directory in the Experience Builder unzipped files. Run npm install <PATH> where <PATH> is the local path to your React component. For example if you run the npm tsdx create ... command at C:\code\my-widget , you'll run npm install C:\code\my-widget . (Tip: include --no-audit in the npm install... command to skip auditing all of Experience Builder's files) 3. Create an Experience Builder Widget Now that it's installed, you can include this Component in any custom Experience Builder widgets. If you don't yet have a widget, you can copy the simple widget from client/sample-widgets/simple to client/your-extensions/widgets to start. Within client\your-extensions\widgets\simple\src\runtime\widget.tsx , import your component by inserting an import statement near the top of the file: import MyWidget from 'my-widget';‍‍‍‍‍‍‍ You can then use that component in the JSX near the bottom of the file. Replace the render() function with this: render() { return ( <div className="widget-demo jimu-widget m-2"> <MyWidget></MyWidget> </div> ); }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ Remember to make sure npm start is running in the client directory so Experience Builder will re-build your widget and make it available. After these changes, go into Experience Builder and add the Simple Widget to an Experience, and your component is now visible! Done! Now you have a React Component that is working with the context of a React app and Experience Builder. This is a basic example - the next step is how to use widget configuration options and map modules. I'll dig into that in the next post - go here: https://community.esri.com/people/GRehkemper-esristaff/blog/2020/07/01/the-one-widget-part-2  ... View more

My colleague Jacob and I have really been enjoying using the Svelte JavaScript Framework while building mapping web apps with the ArcGIS API for JavaScript. Here are a few links and resources that I've collected: Svelte with the ArcGIS API for JavaScript - Rene at odoe.net eats JavaScript libraries for breakfast and was one of the first to try out the Svelte framework with the ArcGIS API for JavaScript. esri-svelte-example - A sample web app that I put together that shows how to use esri-loader to load a map. esri-svelte-example CodeSandbox - if you want to get tinkering quickly, just click here then “Fork” and you're instantly coding in Svelte. esri-svelte-basemaps-example - A sample web app that Jacob put together that shows how to create a Map component and use it multiple times within a page. ... View more

A new version of the Yeoman Web AppBuilder Widget Generator has been released: Release v4.5.0 · Esri/generator-esri-appbuilder-js · GitHub  With help from the community, you now have the option to generate the widget files only (no infrastructure). We've also updated to the latest Typescript version. ... View more

Someone asked me recently: "how do I push the address search widget up above the zoom buttons?" They were adding a Search widget to their application like this: var searchWidget = new Search({   view: view }); view.ui.add(searchWidget, "top-left");‍‍‍‍‍‍‍‍ and they were getting a map that looks like: I did a bit of searching, and found out that the JavaScript API has an option for this - in the second parameter of "view.ui.add()", instead of passing a string like "top-left", pass an object - and in that object you can control the "index" of where to place the component relative to other components: view.ui.add(searchWidget, {   position: "top-left",   index: 0 });‍‍‍‍‍‍‍‍ So you'll get something that looks a little cleaner: Full example is here - happy coding! ... View more

This is a demo widget I've been keeping up to date that lets you search for any term in wikipedia and then maps any of the article results that have locations attached to them. Demo application: ArcGIS Web Application  Download the widget here: http://www.arcgis.com/home/item.html?id=3aece72355ea4106a1770e52efc7bc92  Source code here: GitHub - gavinr/wab-wikipedia-search: A demo widget that shows basic Wikipedia search / location display.  ... View more