I'm developing a custom widget for WebApp Builder. The widget calls a Geoprocessing service and the result must be added to map, but when I call a function this.map.addLayer() I receive the error message:
TypeError: this.map.addLayer is not a function
at Widget.js?wab_dv=2.6:839
at Object._successHandler (init.js:2238)
at Object._getResultDataHandler (Geoprocessor.js:11)
at init.js:63
at Object.load (Geoprocessor.js:12)
at init.js:1042
at c (init.js:103)
at d (init.js:103)
at b.Deferred.resolve.callback (init.js:105)
at c (init.js:104) "TypeError: this.map.addLayer is not a function
This is the snippet of my code:
submitGpLr: function (tab1) {
let params = {
json: tab1
};
// lancia il geoprocessing, i callback sono sotto
this.gpLr.submitJob(params, lang.hitch(this, this.gpLrJobComplete), this.gpLrJobStatus, this.gpLrJobFailed);
},
gpLrJobComplete: function (jobinfo) {
this.gpLr.getResultData(jobinfo.jobId, "Output_Layer", function (results) {
console.log(results);
let jsonResult = results.value;
// function addResultToMap
let SR = jsonResult.spatialReference;
let GT = "esriGeometryPolyline";
let layerDefinition = {
"geometryType": GT,
"spatialReference": SR,
"fields": jsonResult.fields
};
let featureCollection = {
layerDefinition: layerDefinition,
featureSet: {
"geometryType": GT,
"spatialReference": SR,
"features": jsonResult.features
}
};
let resultLayer = new FeatureLayer(featureCollection, {
showLabels: true,
spatialReference: SR
});
let sls = new esri.symbol.SimpleLineSymbol(
esri.symbol.SimpleLineSymbol.STYLE_SOLID,
new esri.Color([255, 0, 0]), 3.5
);
this.map.addLayer(resultLayer);
});
},
gpLrJobFailed: function (err) {
console.log("error");
console.log(err);
},
gpLrJobStatus: function () {
}
This is my setEventHandler:
this.own(on(this.gpLr_Submit, "click", () => {
let id = this.selectedMainTabId;
let tabNewStr = JSON.stringify(this.grids[id + '_IN']['_originalData']);
this.submitGpLr(tabNewStr);
}));
How can I fix this error? I don't try the error in my code.
I think, "this" reference to "Window" object. Your this should reference to, your widget class.You should set instance like this when, onstartup event in widget.Then you can use instance.map like this:
startup: function () {
console.log('YourCustomWidget::startup');
YourCustomWidget.SetInstance(this);
}
//Singleton design
YourCustomWidget.Instance = undefined;
YourCustomWidget.GetInstance = function () {
return this.Instance;
}
YourCustomWidget.SetInstance = function (instance) {
AkkrFiltrelemeVeRaporlama.Instance = instance;
}
...
...
...
...
gpLrJobComplete: function (jobinfo) {
var instance = YourCustomWidget.Instance;
//
//
//
instance .map.addLayer(resultLayer);
}
Related
The given class has a method which returns a cached stream but that stream can be triggered by another private hot stream which makes the cached stream emits a new value.
The class
export class SomeClass {
private cache: Observable<number>;
private trigger$ = new Subject();
private multiply = 1;
constructor(private num: number) {}
getNumber(): Observable<number> {
return (
this.cache ||
(this.cache = concat(of(void 0), this.trigger$).pipe(
switchMap(() => of(this.num * this.multiply++)),
shareReplay(1)
))
);
}
trigger(): void {
this.trigger$.next();
}
}
Example: https://stackblitz.com/edit/rxjs-gpyc46?file=index.ts
What is the way to test it?
This try is failed
it("trigger updates", () => {
testScheduler.run(({ expectObservable }) => {
const num$ = someClass.getNumber();
expectObservable(num$).toBe("a", { a: 3 });
someClass.trigger();
expectObservable(num$).toBe("a", { a: 6 });
someClass.trigger();
expectObservable(num$).toBe("a", { a: 9 });
});
});
Example: https://stackblitz.com/edit/rxjs-test-tricky-flow?file=src%2Fsome-class.spec.ts
UPD: so the problem here that seems it is not possible to mock the trigger$ property.
It would look like this
it("trigger updates", () => {
testScheduler.run(({ hot, expectObservable }) => {
spyOnProperty(someClass, 'trigger$', 'get').and.returnValue(hot('^--b--c'));
const num$ = someClass.getNumber();
expectObservable(num$).toBe("a--b--c", { a: 3, b: 6, c: 9 });
});
});
But the trigger$ property must be changed this way
get trigger$() {
return new Subject();
}
Example: https://stackblitz.com/edit/rxjs-test-tricky-flow-x2arxf?file=src%2Fsome-class.ts
I'm trying to bind the data from api which is written in .net core with angular api using ng for i getting the value properly but when i use the check input field my console is full on unstoppable errors
I have tried many examples from stackoverflow non them worked for me
export class UsermanagementComponent {
userDetailsList: any = [];
public userList: any= [];
departmentuser: any = {};
public searchTxt:any;
isActive: boolean = false;
checkuserstatus: boolean;
constructor(private router: Router, private http: HttpClient, private
toastr: ToastrService, private appComponent: AppComponent) {
this.userList
}
private jwtHelper: JwtHelperService = new JwtHelperService();
ngOnInit() {
this.appComponent.startSpinner();
this.getuser();
;
}
edituser(userList: any) {
localStorage.setItem("userList", JSON.stringify(userList));
console.log(userList);
this.router.navigate(["/landingpage/edituser"], userList);
}
lockUnlockUser(userList: any) {
console.log(userList);
this.http.post(environment.apiUrl + "Account/LockUserAccount", userList,
{
}).subscribe(data => {
this.appComponent.stopSpinner();
this.router.navigate(["/landingpage/usermanagement"]);
this.userList = data;
this.checkuserstatus = this.userList.lockoutEnabled;
console.log(this.checkuserstatus);
if (this.checkuserstatus == true) {
let toast = this.toastr.success(MessageVariable.UserLocked);
alert(toast);
} else if (this.checkuserstatus == false) {
let toast = this.toastr.info(MessageVariable.UserUnLocked);
alert(toast);
}
}, (err) => {
this.toastr.error(MessageVariable.ErrorMsg);
});
}
getuser() {
this.appComponent.startSpinner();
var userId = localStorage.getItem('userid');
console.log(userId);
this.http.get(environment.apiUrl + "Account/GetUser", {
}).subscribe(data => {
this.appComponent.stopSpinner();
this.userList = data;
console.log(this.userList);
}, (err) => {
this.toastr.error(MessageVariable.ErrorMsg);
});
}
}
UsermanagementComponent.html:22 ERROR Error: Error trying to diff '[object Object]'. Only arrays and iterables are allowed
at
After fixing alot of erros in the testing, now Karma output is this:
PhantomJS 1.9.8 (Windows 8 0.0.0) Controller: MainCtrl should attach a list of t hings to the scope FAILED
Error: Unexpected request: GET /api/marcas
No more request expected at ....
api/marcas is an endpoint i've created. code for MainCtrl:
'use strict';
angular.module('app')
.controller('MainCtrl', function ($scope, $http, $log, socket, $location, $rootScope) {
window.scope = $scope;
window.rootscope = $rootScope
$scope.awesomeThings = [];
$scope.things = ["1", "2", "3"];
$http.get('/api/things').success(function(awesomeThings) {
$scope.awesomeThings = awesomeThings;
socket.syncUpdates('thing', $scope.awesomeThings);
});
$scope.addThing = function() {
if($scope.newThing === '') {
return;
}
$http.post('/api/things', { name: $scope.newThing });
$scope.newThing = '';
};
$scope.deleteThing = function(thing) {
$http.delete('/api/things/' + thing._id);
};
$scope.$on('$destroy', function () {
socket.unsyncUpdates('thing');
});
$http.get('/api/marcas').success(function(marcas) {
$scope.marcas = marcas;
socket.syncUpdates('marcas', $scope.response);
$scope.marcasArr = [];
$scope.response.forEach(function(value) {
$scope.marcas.push(value.name);
});
$scope.marcaSel = function() {
for (i = 0; i < $scope.response.length; i++) {
if ($scope.selectedMarca == $scope.response[i].name) {
$scope.modelos = $scope.response[i].modelos;
};
};
};
});
until you didn't posted your test-code, I guess that your test doesn't includes the following code:
beforeEach(inject(function () {
httpBackend.expectGET('/api/marcas').respond(function(){
return {/*some status code*/, {/*some data*/}, {/*any headers*/}};
});
}));
if the karma-runner tries to execute your test-code, there are to get-requests to the $http-service, $http.get('/api/marcas') and $http.get('/api/things'). if one of these backend calls is not expected, karma cannot run the testcode successfully.
if you don't want to do special stuff for each but only return a default with success code for both calls, you can write so:
beforeEach(inject(function () {
httpBackend.expectGET(/api/i).respond(function(){
return {/*some status code*/, {/*some data*/}, {/*any headers*/}};
});
}));
I'm having a bit of a problem getting a deferred returned from a method in a widget. The method is itself returns a Deferred as it's an xhrPost. The code is as such (using dojo 1.8)
Calling Code:
quorum = registry.byId("quorumPanel");
var deferredResponse = quorum.updateSelectionCount();
deferredResponse.then(function(data){
console.log("Success: ", data);
}, function(err){
console.log("Error: ", err);
});
and the code in the widget:
updateSelectionCount: function() {
var self = this;
var deferredResponse = xhr.post({
url: "ajxclwrp.php",
content: [arguments here],
handleAs: "json"});
deferredResponse.then(function(response) {
var anotherDeferred = new Deferred();
var _boolA = true;
var _boolB = true;
dojo.forEach(response.result, function(relationshipInfo){
[do a bunch of stuff here too set _boolA and/or _boolB]
});
self._sethasRequiredAttr(_hasRequired);
self._setHasRequestedAttr(_hasRequested);
self.quorumInfo.innerHTML = quorumHtml;
// Below is not working
anotherDeferred.resolve('foo');
return anotherDeferred;
});
}
Do I need to set up another promise and use promise/all. Im confused/frustrated at this point.
TIA.
the .then() method returns another deferred. You just need to put a return statement in.
updateSelectionCount: function() {
var self = this;
var deferredResponse = xhr.post({
url: "ajxclwrp.php",
content: [arguments here],
handleAs: "json"});
return deferredResponse.then(function(response) {
var _boolA = true;
var _boolB = true;
dojo.forEach(response.result, function(relationshipInfo){
[do a bunch of stuff here too set _boolA and/or _boolB]
});
self._sethasRequiredAttr(_hasRequired);
self._setHasRequestedAttr(_hasRequested);
self.quorumInfo.innerHTML = quorumHtml;
return "foo";
});
}
I have made up the custom module as :
YUI.add('util', function(Y) {
Y.namespace('com.myCompany');
var NS = Y.com.myCompany;
NS.val = undefined;
}, '3.3.0', {
requires : []
});
What I am trying to do is share this variable val in the instances where I use this module "util". As in
YUI().use("util","node","event",function (Y) {
Y.namespace('com.myCompany');
var MV = Y.com.myCompany;
var setVal = function(e){
MV.val = 10;
}
Y.on("click", setVal,"#one");
});
Now if I want to get this in other instance I am doing as the following:
YUI().use("util","node","event",function (Y) {
Y.namespace('com.myCompany');
var MV = Y.com.myCompany;
var getVal = function(e){
alert(MV.val);
}
Y.on("click", getVal,"#two");
});
But this does not seem to be working. Is there a way to get this behavior. I am doing this only to split up the code.
In this case, you should only create one sandbox. The correct way to break up your code is to use YUI.add to create the modules and specify their dependencies. One way to do this is to structure your code as follows:
// util.js
YUI.add('util', function (Y) {
var NS = Y.namespace('com.MyCompany');
NS.val = null;
}, 'version', {
requires: ['some', 'dependencies']
});
// one.js
YUI.add('one', function (Y) {
var NS = Y.namespace('com.MyCompany');
Y.on('click', function (e) { NS.val = 23; }, '#one');
}, 'version', {
requires: ['util']
});
// two.js
YUI.add('two', function (Y) {
var NS = Y.namespace('com.MyCompany');
Y.on('click', function (e) { alert(NS.val); }, '#two');
}, 'version', {
requires: ['util']
});
// index.html
<button id="one">Set the value</button>
<button id="two">Get the value</button>
<script>
YUI.use('one, 'two', 'node', 'event', function (Y) {
// main application logic here
});
</script>
This allows you to break up your code into separate modules that share the same YUI sandbox instance.
Note also YUI.namespace returns the namespace in question, so you don't need the extra variables.
The problem is that YUI() is creating a new sandbox with each execution. If you want to reuse it you need to capture its value after the first "use" execution and reuse that value later. There may be a better YUish way to do this but I use a global YUI_MAIN:
var YUI_MAIN = YUI().use("util","node","event",function (Y) {
Y.namespace('com.myCompany');
var MV = Y.com.myCompany;
var setVal = function(e){
MV.val = 10;
};
Y.on("click", setVal,"#one");
});
YUI_MAIN.use(function (Y) {
Y.namespace('com.myCompany');
var MV = Y.com.myCompany;
var getVal = function(e){
alert(MV.val);
};
Y.on("click", getVal,"#two");
});
If you really wanted to share between separate sandboxes and avoid an extra global you could use a closure to create a private variable with something like this:
YUI.add('util', (function () {
var privateUtilNS = {};
return function(Y) {
privateUtilNS['val'] = undefined;
Y.setVal = function(e){
privateUtilNS.val = 10;
};
Y.getVal = function(e){
alert(privateUtilNS.val);
};
};
}()), '3.3.0', {
requires : []
});
YUI().use("util","node","event",function (Y) {
Y.on("click", Y.setVal,"#one");
});
YUI().use("util","node","event",function (Y) {
Y.on("click", Y.getVal,"#two");
});