create line graphic in WAB

TerryGustafson · ‎08-26-2015

I'm wondering if anyone has generated a simpleLine Symbol in WAB. I'm wanting to pass a start and end location offset and return a line symbol from the entered values. does anyone know of an example out there to look at?

TIA

RobertScheitlin__GISP · ‎09-01-2015

Terry,

So it comes down to basic programming syntax issues. You don't seem to be paying attention to your use of a comma vs. a semicolon. All the errors are in the executeGP function. I will point them out and try to explain what the issue is.

executeGP: function (rs) {
                this.shelter.show();
                this.map.graphics.clear();
                var lineSymbol = new SimpleLineSymbol(
                    SimpleLineSymbol.setColor(new Color([255, 255, 0, 0.5]); SimpleLineSymbol.setWidth(2)));
                                                                           ^Problem 1                      ^Problem 2
                graphic = new Graphic(rs.mapSegment, lineSymbol),
                    features = [graphic],
                    featureSet = new FeatureSet(),
                                                 ^Problem 3
                    featureSet.features = features,
                                                  ^Problem 4
                    var params = {

                        "Route_Points": featureSet,
                        "Route_Points_Events1 ": {
                            "esriGeometryPolyline": true,
                            "HasZ": "false",
                            "HasM": "true"
                        },
                        "Keep_only_the_closest_route_location": false
                    };

                this.gp.submitJob(params, lang.hitch(this, this.processGP));
            },

Each problem number is detailed below:

You have a semicolon inside a object constructor and a semicolon is a code line terminator to before the code can get to the SimpleLineSymbol you are terminating. Actually your whole coding for the lineSymbol var is strange and unconventional. See my Note 1 on how you would do this conventionally.
You have a semicolon here and this would be OK if you did not continue to define a new variable on line 7 without using the var keyword. If you were to change this to a comma the line 7 not have the keyword var would be fine line 4 has it and you won't have any semicolon terminators that tell the IDE you are done declaring vars (assuming you fix problem 1 by replacing the semicolon with a comma).
Now that you are done declaring your vars you should have a semicolon here to terminate
There is no reason to use a comma here as you should not be trying to concatenate or add this line to a previous line of code. This line is independent and thus should terminate with a semicolon.

Note 1:

Here is how I would replace your lines 4 and 5 by just supplying all the SimpleLineSymbol properties in the constructor:

var lineSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255, 255, 0, 0.5]), 2),

TerryGustafson · ‎09-01-2015

Ok that mas sense as well.. So I created this function to execute when the "returnseg" button is click. I set a break point at line 2 but when I run the widget it does not seem to get there. I was expecting to see the value from the CorridorTextBox. Is my syntax for that .get('value'), correct? Do you use the debugging console through brackets or just run the application?

_onreturnsegClicked: function () {
                var Corridor = this.CorridorTextBox.get('value'),
                    FromOffset = this.fromOffsetTextBox.get('value'),
                    ToOffset = this.toOffsetTextBox.get('value'),
                    RouteSeg = new RouteSeg(Corridor, FromOffset, ToOffset),
                    rs = {
                        mapSegment: RouteSeg
                    };
                this.executeGP(rs);
            },

TerryGustafson · ‎09-01-2015

The other question I forgot to ask was by are my buttons different? I don’t see anything in the html that defines the color or style of the button.

RobertScheitlin__GISP · ‎09-01-2015

Terry,

Just run the application after you are finished making modifications to your widget (ensuring that your browsers cache is cleared).
You never call the _bindEvents function so the buttons are not bound to any event.
In your case you can just use "var Corridor = this.CorridorTextBox.value"
You have several other issues in your coding and based on you programming experience level you would probably be much better off using the GeoProccessing widget in WAB then trying to develop your own widget. (I just tested your GP in the Geoprocessing widget and it does not work well as your input is a gprecordset).
This line of code: RouteSeg = new RouteSeg(Corridor, FromOffset, ToOffset), what is a RouteSeg? You are calling a new constructor and your code does not know how to create a new RouteSeg as it does not know what a RouteSeg is.
In your executeGP you are trying to create graphic = new Graphic(rs.mapSegment, lineSymbol) but rs.mapSegment is not a geometry that the Graphic constructor is expecting.

TerryGustafson · ‎09-01-2015

I have a couple other widgets like this and was hoping I could limp my way to creating this one and learn from it. When I try and call the _bindEvents function I get the following.

TypeError: Unable to set property 'src' of undefined or null reference TypeError: Unable to set property 'src' of undefined or null reference

at postCreate (http://mdthlnisdp264.mdthq.mt.ads:3344/webappbuilder/apps/2/jimu.js/dijit/LoadingShelter.js:42:7)

at n (http://js.arcgis.com/3.13/init.js:106:75)

at postCreate (http://mdthlnisdp264.mdthq.mt.ads:3344/webappbuilder/apps/2/widgets/CreateRouteSegment/Widget.js:53:14)

at create (http://js.arcgis.com/3.13/init.js:1123:343)

at postscript (http://js.arcgis.com/3.13/init.js:1122:94)

at Anonymous function (http://js.arcgis.com/3.13/init.js:108:190)

at createWidget (http://mdthlnisdp264.mdthq.mt.ads:3344/webappbuilder/apps/2/jimu.js/WidgetManager.js:285:11)

at Anonymous function (http://mdthlnisdp264.mdthq.mt.ads:3344/webappbuilder/apps/2/jimu.js/WidgetManager.js:105:21)

at Anonymous function (http://js.arcgis.com/3.13/init.js:177:287)

at k (http://js.arcgis.com/3.13/init.js:199:425)

{

: ,

__proto__: {

: ,

__proto__: { },

message: "",

name: "TypeError"

},

description: "Unable to set property 'src' of undefined or null reference",

message: "Unable to set property 'src' of undefined or null reference",

name: "TypeError",

number: -2146823281,

stack: "TypeError: Unable to set property 'src' of undefined or null reference

at postCreate (http://mdthlnisdp264.mdthq.mt.ads:3344/webappbuilder/apps/2/jimu.js/dijit/LoadingShelter.js:42:7)

at n (http://js.arcgis.com/3.13/init.js:106:75)

at postCreate (http://mdthlnisdp264.mdthq.mt.ads:3344/webappbuilder/apps/2/widgets/CreateRouteSegment/Widget.js:53:14)

at create (http://js.arcgis.com/3.13/init.js:1123:343)

at postscript (http://js.arcgis.com/3.13/init.js:1122:94)

at Anonymous function (http://js.arcgis.com/3.13/init.js:108:190)

at createWidget (http://mdthlnisdp264.mdthq.mt.ads:3344/webappbuilder/apps/2/jimu.js/WidgetManager.js:285:11)

at Anonymous function (http://mdthlnisdp264.mdthq.mt.ads:3344/webappbuilder/apps/2/jimu.js/WidgetManager.js:105:21)

at Anonymous function (http://js.arcgis.com/3.13/init.js:177:287)

at k (http://js.arcgis.com/3.13/init.js:199:425)"

}

"TypeError: Unable to set property 'src' of undefined or null reference

at postCreate (http://mdthlnisdp264.mdthq.mt.ads:3344/webappbuilder/apps/2/jimu.js/dijit/LoadingShelter.js:42:7)

at n (http://js.arcgis.com/3.13/init.js:106:75)

at postCreate (http://mdthlnisdp264.mdthq.mt.ads:3344/webappbuilder/apps/2/widgets/CreateRouteSegment/Widget.js:53:14)

at create (http://js.arcgis.com/3.13/init.js:1123:343)

at postscript (http://js.arcgis.com/3.13/init.js:1122:94)

at Anonymous function (http://js.arcgis.com/3.13/init.js:108:190)

at createWidget (http://mdthlnisdp264.mdthq.mt.ads:3344/webappbuilder/apps/2/jimu.js/WidgetManager.js:285:11)

at Anonymous function (http://mdthlnisdp264.mdthq.mt.ads:3344/webappbuilder/apps/2/jimu.js/WidgetManager.js:105:21)

at Anonymous function (http://js.arcgis.com/3.13/init.js:177:287)

at k (http://js.arcgis.com/3.13/init.js:199:425)"

RobertScheitlin__GISP · ‎09-01-2015

Terry,

startup: function () {

this.inherited(arguments);

this._bindEvents();

},

TerryGustafson · ‎09-01-2015

I though the _bindEvent went i nthe postCreate: function like this?

function () {

this.inherited(arguments);

this.gp = new Geoprocessor("https://app.mdt.mt.gov/arcgis/rest/services/LRS/ReturnRouteSegment/GPServer/ReturnRouteSegment");

this._bindEvents();

RobertScheitlin__GISP · ‎09-01-2015

Terry,

Adding it to postCreate is fine. You must issues with your ordering of requires and vars.

if you have:

define(['dojo/_base/declare',

'jimu/BaseWidget',

Then you MUST have

function (declare, BaseWidget

In that same exact order. You have a couple of things off in yours.

TerryGustafson · ‎09-01-2015

Oh ok. Thank you for clarifying that..

TerryGustafson · ‎09-01-2015

Its a snails pace but think I'm making progress.. I can get it o return and pass the data to the service but I see to get a url error..

function (rs) {

var RP ={

"displayFieldName": "",

"fields": [

"name": "OBJECTID",

"type": "esriFieldTypeOID",

"alias": "OBJECTID"


"name": "Corridor",

"type": "esriFieldTypeString",

"alias": "Corridor",

"length": 8

"name": "from_offset",

"type": "esriFieldTypeSingle",

"alias": "from_offset"


"name": "to_offset",

"type": "esriFieldTypeSingle",

"alias": "to_offset"


"features": [{ "attributes":{

"OBJECTID": 1,

"Corridor": rs.Corridor,

"from_offset": rs.FromOffset,

"to_offset": rs.ToOffset

"exceededTransferLimit": false


var params = {

"Route_Points": RP,

this.gp.submitJob(params, lang.hitch(this, this.processGP));

function () {

var Corridor = this.CorridorTextBox.value,

this.fromOffsetTextBox.value,

this.toOffsetTextBox.value,

"Corridor":Corridor,

"FromOffset":FromOffset,

"ToOffset":ToOffset

this.executeGP(rs);