Latest Contributions by GavinRehkemper

The Web AppBuilder Widget Generator has hit v3, which brings with it the ability to generate widgets in TypeScript, and the functionality to create a "build" of your apps that you've created. Also, you can enable LiveReload to have your browser automatically refresh when you make a file change, saving you tons of time during development. Full details: Release v3.0.0 · Esri/generator-esri-appbuilder-js · GitHub  Gavin Rehkemper on Twitter: "New version of Web AppBuilder Generator includes #TypeScript support and a way to easily bu…  Questions or comments? Feel free to comment here. Issues? Please create an issue in GitHub. Bonus: George Bochenek‌ and I presented about this and other advanced development topics last week at Dev Summit 2018. The video will be released within a few weeks, but for now you can find the slides and follow the repo to get updates when the video comes out: GitHub - gavinr/web-appbuilder-tools-techniques-dev-summit-2018  ... View more

I recently presented the "widgets" part of the "Extending Web AppBuilder for ArcGIS" GeoDev Webinar. If you missed it, the video is now online. You can also find the completed files of the widget that I build throughout the session on GitHub. There were a few questions that were asked in the session that we did not get time to answer at the end -- those have been posted too. Extending the Web AppBuilder for ArcGIS - YouTube  GitHub - gavinr/web-appbuilder-find-restaurants: Widget to allow user to find restaurants using the Yelp API.  https://community.esri.com/groups/geodev/blog/2018/02/21/questions-answered-extending-web-appbuilder-for-arcgis  ... View more

Thank you everyone for attending the webinar today. Below are some links and resources that we promised we'd provide. The recording of the webinar will be posted soon and Amy Niessen‌ will make a separate blog post here when that goes up. Code for the example widget ("Find Restaurants"): GitHub - gavinr/web-appbuilder-find-restaurants: Widget to allow user to find restaurants using the Yelp API.  Widget Generator Script: GitHub - Esri/generator-esri-appbuilder-js: Yeoman generator to help customize Esri's WebAppBuilder  Code for the example theme ("Sidebar Theme"): SidebarTheme  ... View more

Hi Custom Widgets community, David Martinez‌ and I will be presenting a 1-hour webinar on basic techniques to extend Web AppBuilder - specifically though custom widgets and custom themes. If you're interested and this would benefit you, we hope you'll join us. More information, including registration link, is in Amy's blog post: https://community.esri.com/groups/geodev/blog/2018/01/09/geodev-webinar-series-continues-with-a-welcome-into-the-new-year  Thanks! Gavin ... View more

If you're a JavaScript developer, you may have heard of TypeScript, a typed superset of JavaScript that compiles to plain JavaScript. If you're also creating custom Web AppBuilder widgets, using TypeScript in a widget is a great way to get started with TypeScript. Here are a few notes and tips that I've discovered while using TypeScript within a Web AppBuilder custom widget development workflow. Background My usual Web AppBuilder development workflow is to have my widget code in its own code repository, and use a task runner like Grunt or Gulp to automatically compile and copy my code to the correct places (The stemapp directory and optionally the server directory of the app that I'm currently working on). Within this context, TypeScript fills the "transpiler" role where Babel might currently be in your stack. tsconfig.json file Many aspects of your tsconfig.json file are on a per-project basis, but there are a few things that you do need: "module": "amd" - we choose "amd" because AMD is the module style that Web AppBuilder expects to see when loading a widget into an app. "moduleResolution": "classic" - because we chose "AMD" above "target": "es5" - the ECMAScript JavaScript type that we want the TypeScript compliler to output. We want to target es5 so the code we write in ES6-style JavaScript will be converted down so older browsers will be able to read it. "types": [ "arcgis-js-api", "dojo-typings"] - the names of the type definitions we want to include. "inlineSources" and "inlineSourceMap" - set these to true if you've got a build system that is moving code around, so that your source maps will work when debugging in the browser. Full example here.  Declare Decorator This is the main key to the entire process. It tells the TypeScript compiler how to translate your ES6-style class syntax in your Widget.ts file into the Dojo-style define/declare syntax that Web AppBuilder expects. This bit of code can be obtained from the dojo/typings repository, and included in your widget files. You then import it into your Widget.ts file, and apply the decorator on your Widget class. Note that decorators are experimental right now, so they could potentially be removed from TypeScript in the future, but for now this is a good option that keeps our code clean. Promises I would like to write code as close as possible to true ES6 JavaScript. So I'd like to use the native JavaScript Promise syntax. But when I tried to do this in my widget, I initially got an error, "error TS2693: 'Promise' only refers to a type, but is being used as a value here." To resolve this problem, all I had to do was add the "es6-promise" library to my "lib" property in the "tsconfig.json" file. See the "--lib" line in the TypeScript Compiler Options Table for more information - including a clarification of why I'm including dom, es5, etc, as well as options that you can add other than es2015.promise. ["dom", "es5", "scripthost", "es2015.promise"] Sourcemaps I found it's easiest if you set "inlineSources" and "inlineSourceMap" in your "tsconfig.json" file to true. If not, the path of the sourcemap is often wrong. The TS source shows as a separate file from your main widgets file:   Huh? That's a lot of information, and it's sometimes hard to get all the settings in your project exactly correct, so I've put together an example widget in a GitHub repository that is available for download here: Web AppBuilder Typescript Examples. Note there are 2 examples in there that represent 2 "styles" of project, so please read the README file for clarification on which to use. We're also considering getting a TypeScript option into the Web AppBuilder Custom Widget Generator, and if you have any feedback on what you'd like to see there, please let us know via this GitHub issue. Thanks! Links Web AppBuilder Typescript Examples ArcGIS Ideas: Maintain a Typescript definition file for jimu.js Esri Web AppBuilder Yeoman Generator: TypeScript Support Thanks to developer community members David Wilton, Alex Jones, and Mike Tschudi for help on the code and repository. ... View more

Over the years I have compiled a few tips and troubleshooting tricks for working with the Esri Resource Proxy. I hope you might find them useful: Troubleshooting steps to review and try when you're having problems with the Esri Resource Proxy (https://github.com/Esr…  Do you have other tips/tricks? Leave a comment here or on the GitHub page and I will add it to the list! ... View more

I'm interested to hear from anyone who is developing custom widgets or themes and are working on them with teams: Are you using source code management (GitHub, SVN, TFS, etc)? Are you using any processes/tools (grunt, gulp, etc)? Any other stories/best practices you've found? What are your workflows? ... View more

If you're a cord-cutter like me, YouTube is a big part of where you see content and news. Here are a few of the Esri channels you can subscribe to: Esri - YouTube  The main Esri YouTube channel, featuring interviews, product announcements, and technology information. Great recent video: Introducing Drone2Map for ArcGIS - YouTube  Esri Industries Videos showing how mapping and GIS is applicable to various industries, like local governments, agriculture, military, etc. Great recent video: Esri Case Study: The Shopping Center Group (TSCG) - YouTube  Esri Events Videos from Esri conferences and events.  Tip: check out the playlists to see all the videos for a specific event. Esri Applications Prototype Lab Videos of demonstrations, prototypes and proof of concepts.  Great recent video: Yearly Number of Lethal Heat Days Under a "Business as Usual" Approach to Carbon Emissions - YouTube  Of course E360 is still a great place to find these and many more videos, but subscribing in YouTube is a great way for me to keep up to date on the latest news and information. ... View more