How to create a custom config?

[GregRieck]

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

[RobertScheitlin__GISP]

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);
});‍‍‍‍‍‍‍‍‍‍

[GregRieck]

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 

[RobertScheitlin__GISP]

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‍‍‍

[GregRieck]

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

[RobertScheitlin__GISP]

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?

[GregRieck]

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;

[RobertScheitlin__GISP · Accepted solution]

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.

[GregRieck]

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

[RobertScheitlin__GISP]

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.