topic Re: How to create a custom config? in Web AppBuilder Custom Widgets Questions

How to create a custom config?

GregRieck — Tue, 18 Sep 2018 00:49:13 GMT

Hello,

I have several widgets the reference rest end point URL's. I would like to be able to use a config file in the root folder of the WAB site to store the path to these URL's. I have found the config.json file in the root directory. Within the config.json file I have changed the "config": path from "configs/..." path to the root, ie "config": "mycustom.json".

mycustom.json has a reference to a rest end point

{

"myUrl": "'//myportal.com/server/rest/services/SiteName/FeatureServer/SomeNumber'",

additional urls.....

}

Now how do I access mycustom.json within the individual widget.js files?

var myurl = ??. mycustom.json.???myUrl????

If I am off base with this approach please let me know. I didn't want to have a separate config file for each widget as each widget would be using the same URL's in the config file.

Thank You,

Greg

Re: How to create a custom config?

RobertScheitlin__GISP — Sun, 12 Dec 2021 09:36:28 GMT

Greg,

Because it is a custom .json file you will have to use esriRequest to get the file:

var myConfig = esriRequest({
  url: 'mycustom.json',
  content: { f: "json" },
  handleAs: "json",
});
myConfig.then(function(response){
  console.info(response);
}, function(error) {
  console.log("Error: ", error.message);
});‍‍‍‍‍‍‍‍‍‍

Re: How to create a custom config?

GregRieck — Tue, 18 Sep 2018 16:13:31 GMT

Robert,

Thank you for your response. I am still confused on this. I was thinking that by creating my custom config.json in the root path and accessing it via the config.json by changing the config.json's config paths in my widget definitions that my custom widget would be available within the widget.js files. Can you explain why that is not the case.

For example the config.json has a reference to myWidget.

{
"position": {
"left": 57,
"bottom": 70,
"relativeTo": "map"
},
"placeholderIndex": 2,
"id": "_26",
"uri": "widgets//myWidget//Widget",
"icon": "configs\\icon__26.png",
"name": "myWidget",
"config": "configs/myWidget/config__26.json",
"IsController": false,
"version": "0.0.1"
},

Here it references a config file - "config": "configs/myWidget/config__26.json",

This is the current contents of the config file.

{"serviceUrl":"https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer"}

Because I have a total of five widgets that potentially all need access to the same rest endpoint URL I would prefer to list those URL's in one file in the parent root of the directory so all my widgets can use the same file. As opposed to customizing all the config files in the "configs/WidgetName" directory path.

So I have changed the root config.json's myWidget config path as such:

"config": "myconfig.json",

So now my widgets point to myconfig.json in the same parent root directory as the original config.json file.

So why can't this be seen, why do I have to use esriRequest?

My myconfig.json file contains

{
"serviceName": "SERVICENAME",
"oneUrl": "//myPortal/server/rest/services/NAME/FeatureServer/1",
"twoUrl": "//myPortal/server/rest/services/NAME/FeatureServer/2",
"threeUrl": "//myPortal/server/rest/services/NAME/FeatureServer/3",
"fourUrl": "//myPortal/server/rest/services/NAME/FeatureServer/4"
}

So then within my widget.js files I want to be able to access the information in the myconfig.json.

var myconfig = How ever I instantiate my custom config file here;

var serviceName = myconfig.SERVICENAME;

var oneURL = myconfig.oneURL;

Or by just using the reference to myconfig directly in place of individual variables.

SomethingThatNeedsTheONEURLPath = myconfig.oneURL;

I don't understand how to access the information within myconfig.json after following your provided code example. Can you please be more specific. It appears that "myConfig" in your example is instantiated but I don't understand how to access the information contained within the "myConfig" file.

Again, if there is a better, easier way of doing this I am open to suggestions.

Thank You,

Greg

Re: How to create a custom config?

RobertScheitlin__GISP — Sun, 12 Dec 2021 09:36:31 GMT

Greg,

Sorry I forgot that you where changing the main config.json to have the widget use your custom json file. In that case then the widget default config that is loaded is your custom json and you can access it as simple as:

this.config.‍serviceName
//or 
this.config.one‍‍‍Url‍‍‍

Re: How to create a custom config?

GregRieck — Tue, 18 Sep 2018 17:02:15 GMT

Robert,

No problem. See that's what I would of thought as well, this.config.serviceName. However, config is undefined.

this is on "Window" and I couldn't find any reference to my config file.

Thoughts?

Greg

Re: How to create a custom config?

RobertScheitlin__GISP — Tue, 18 Sep 2018 17:30:25 GMT

Greg,

If “this” is referencing window then your scope that you are trying to use this.config in is not hitched to the proper scope. Can you show me the code block that you are calling it from?

Re: How to create a custom config?

GregRieck — Tue, 18 Sep 2018 17:41:23 GMT

Robert,

I'm just inside /widgets/MyWidget/Widget.js

This is a large js widget - I've only include the top portion where I am trying to define and access myConfig file. I suspected a scope issue as well. But I'm not sure how to access variables outside the current /widgets/MyWidget scope.

If you need the enitre file I can do that but would prefer to send it securely.

define([
'dgrid/OnDemandGrid',
'dgrid/Selection',
'dgrid/extensions/ColumnResizer',
'dgrid/extensions/ColumnHider',
'dijit/Menu',
'dijit/MenuSeparator',
'dijit/MenuItem',
'dijit/PopupMenuItem',
'dojo/_base/declare',
'dojo/_base/lang',
'dojo/_base/array',
'dojo/store/Memory',
'dojo/dom',
'dojo/on',
'dojo/dom-construct',
'dojo/parser',
'dojo/mouse',
'esri/Color',
'esri/graphic',
'esri/request',
'esri/tasks/query',
'esri/layers/FeatureLayer',
'esri/symbols/SimpleLineSymbol',
'esri/symbols/PictureMarkerSymbol',
'esri/layers/GraphicsLayer',
'esri/tasks/query',
'esri/tasks/QueryTask',
'esri/geometry/mathUtils',
'esri/map',
'esri/SpatialReference',
'esri/geometry/Polyline',
'esri/geometry/Point',
'esri/geometry/geometryEngine',
'esri/tasks/GeometryService',
'esri/tasks/ProjectParameters',
'esri/geometry/webMercatorUtils',
'esri/symbols/SimpleMarkerSymbol',
'jimu/dijit/LoadingShelter',
'jimu/SelectionManager',
'jimu/BaseWidget'
], function (
Grid, Selection, ColumnResizer, ColumnHider,
Menu, MenuSeparator, MenuItem, PopupMenuItem,
declare, lang, arrayUtils, Memory, DOM, on, domConstruct, parser, mouse,
Color, Graphic, esriRequest, Query, FeatureLayer, SimpleLineSymbol, PictureMarkerSymbol,
GraphicsLayer, Query, QueryTask, mathUtils, Map, SpatialReference, Polyline, Point, geometryEngine,
GeometryService, ProjectParameters, webMercatorUtils, SimpleMarkerSymbol,
LoadingShelter, SelectionMgr, BaseWidget
) {
parser.parse();
var pl;
var lineLength;
var SVG = "M23.963,20.834L17.5,9.64c-0.825-1.429-2.175-1.429-3,0L8.037,20.834c-0.825,1.429-0.15,2.598,1.5,2.598h12.926C24.113,23.432,24.788,22.263,23.963,20.834z";
var posAlong = new Graphic();
var oneUrl = this.myConfigFileNameHere.oneUrl;

Re: How to create a custom config?

RobertScheitlin__GISP — Tue, 18 Sep 2018 19:03:11 GMT

Greg,

That code looks a little strange. Normally I would see

return declare([BaseWidget], {

Before where you have parser.parse(); (which is should really never be used inside a widget). If you have dijits/widget inside your widget then you need:

return declare([BaseWidget, _WidgetsInTemplateMixin], {

Next thing that is off is you have all these vars after parser.parse(); Normally in widget development you have vars like:

baseClass: 'jimu-widget-identify',

mySpecialVar: null,

Next based on widget lifecycle you need to be getting the this.config.oneUrl; inside a function like postCreate or startup.

Re: How to create a custom config?

GregRieck — Tue, 18 Sep 2018 20:44:45 GMT

Robert,

Yes, I do have return declare([BaseWidget], { further down. The parser is used for SVG.

When I attempt to get my custom config file from "this" inside the postCreate: function I see a "config:" and when expanded I see the data within my custom json file. So, it's not using my custom name but rather "config:". But when I try to access "this.config" it is undefined.

If you need to see the entire widget.js file I would need a secure way of sending it to you. I do not feel comfortable placing the entire contents here.

Greg

Re: How to create a custom config?

RobertScheitlin__GISP — Tue, 18 Sep 2018 20:52:05 GMT

Greg,

I would not be trying to use your custom name as you have told the widget that it's default config variable is suppose to point to your custom json file in the apps root (because you made that change in the main config.json). So forget about any notion of your custom widget config having some other name as it will juts be config.

Re: How to create a custom config?

GregRieck — Tue, 18 Sep 2018 21:21:12 GMT

Robert,

this.config.oneUrl is not defined in postCreate but it is available and accessible in the startup function. Thank you for the help on this.

Greg

Re: How to create a custom config?

GregRieck — Thu, 20 Sep 2018 01:19:38 GMT

Robert,

I found another location where it would be helpful to be able to use the name value pair from my config file. It's in a FeatureAction in a couple of my widgets. Do you know how I can get access to "this.config" within a FeatureAction?

Greg

Re: How to create a custom config?

RobertScheitlin__GISP — Thu, 20 Sep 2018 12:53:55 GMT

Greg,

A FeatureAction does not have any tie back to a widget so there is no access to a widget config by default. The only way to get this would be to find the widget using WidgetManager getWidgetsByName function and then you could get the widgets config.