I am attempting to add a Visual Studio Team Services (VSTS) Multivalue Combo Control in a custom tfs dashboard widget's configuration page. I am able to get the widget to appear and I can dynamically add values to it. But I am unable to "Save" the value. Below is the Javascript I am using to attempt to create and save this control's values. I recieve the error from the browsers console of "Uncaught TypeError: Cannot read property 'notify' of undefined" from line 34 (my "change" function inside my multiselect. I have attenpted to put the logic inside of the "load" function as that is genrally where you put the logic for the widget, but then i receive a error specifying that "create" is undefined in my var multiValueCombo = Controls.create(Combos.Combo, CustomContainer, multiValueOptions); line.
With how the current code stands. The "save button" does not enable when I make a change to the value in my control. I believe this is due to the "notify" function not firing.
VSS.require(["TFS/Dashboards/WidgetHelpers", "TFS/DistributedTask/TaskAgentRestClient", "VSS/Controls", "VSS/Controls/Combos"], function (WidgetHelpers, TFS_TaskAgentRestClient, Controls, Combos) {
VSS.register("DeploymentReports.Configuration", function () {
var CustomContainer = $("#custom-combo-container");
//Creating the Multiselect Control
var multiValueOptions = {
type: "multi-value",
width: 250,
source: [
"Ford"],
change: function () {
//What it does when you change the value of the multiselect
var customSettings = { data: JSON.stringify({ iteration: this.getText() }) };
var eventName = WidgetHelpers.WidgetEvent.ConfigurationChange;
var eventArgs = WidgetHelpers.WidgetEvent.Args(customSettings);
widgetConfigurationContext.notify(eventName, eventArgs); //I get an error for this line "Uncaught TypeError: Cannot read property 'notify' of undefined"
}
}
$("<label />").text("Select the supported languages:").appendTo(CustomContainer);
var multiValueCombo = Controls.create(Combos.Combo, CustomContainer, multiValueOptions);
var commandArea = $("<div style='margin:auto' />").appendTo(CustomContainer);
return {
load: function (widgetSettings, widgetConfigurationContext, Controls, Combos) {
//adding items to the multiselect drop down
multiValueOptions.source.push("Volvo");
multiValueOptions.source.push("Jeep");
return WidgetHelpers.WidgetStatusHelper.Success();
},
//Clicking the Save Button
onSave: function() {
var customSettings = {
data: JSON.stringify({
cars: multiValueOptions.getText()
})
};
return WidgetHelpers.WidgetConfigurationSave.Valid(customSettings);
}
}
});
VSS.notifyLoadSucceeded();
});
According to your description, seems you want to save the data in the combo control. VSTS extensions have the ability to store user preferences and complex data structures directly on Microsoft-provided infrastructure.
There are two ways to interact with the data storage service: REST APIs or a Microsoft-provided client service available as part of the VSS SDK. It is highly recommended that extension developers use the provided client service APIs, which provide a convenient wrapper over the REST APIs.
Take a look a the concept about Data storage. This ensures your user's data is secure and backed up just like other account and project data. It also means for simple data storage needs, you (as the extension provider) are not required to setup or manage (or pay for) third-party data storage services.
The service is designed to let you store and manage two different
types of data:
Settings: simple key-value settings (like user preferences)
Documents: collections of similar complex objects (documents)
More details about how to set storage please refer official tutorial.
Related
I'm using OData v4 to load data from my backend to my frontend (developed with SAP UI5) and I am using a form to display a detail page. When I click the "edit" button I'm able to edit the data. My implementation is similar to this example: https://sapui5.hana.ondemand.com/explored.html#/sample/sap.ui.layout.sample.Form354/code/Page.controller.js
When editing something, the data is directly edited at the model and, therefore, updated at the backend. However, I want to be able to choose if I want to save the changes or if I want to cancel the edit before it is updated at the backend.
I read on other questions that one can copy the ODataModel to a JSONModel and use that copy instead, by doing something like:
var oModel = this.getView().getModel();
var oModelJson = new sap.ui.model.json.JSONModel();
oModel.read("/Data", {
success: function(oData, response) {
oModelJson.setData(oData);
sap.ui.getCore().setModel(oModelJson, "oJSONModel");
alert("Success!");
},
error: function(response) {
alert("Error");
}
});
However, the read method seems not to be available for OData v4. the code of my controller where the data is loaded looks like following:
onInit: function() {
this.oModel = new ODataModel({
groupId : "$direct",
synchronizationMode : "None",
serviceUrl : '/odata/'
});
this.getView().setModel(this.oModel, 'oModel');
var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
oRouter.getRoute("details").attachPatternMatched(this._onObjectMatched, this);
this._showFormFragment("display");
},
_onObjectMatched: function (oEvent) {
this.getView().bindElement({
path: "/Data(" + oEvent.getParameter("arguments").dataPath + ")",
model: "oModel"
});
//I want to copy the data from the ODataModel to the JSONModel here
},
What's the best way to accomplish this? And how to do it with OData v4?
I suppose you want to resetChanges in case user cancels the save.
For V2 ODataModel, there is deferedGroup concept which you can use to resetChanges or submitChanges.
I have not much experience with V4. Though from the documentation, it is possible.
Please try to pass a updateGroupId in the constructor. Then you can choose resetChanges or submitBatch by group Id.
mParameters.updateGroupId? The group ID that is used for update requests. If no update group ID is specified, mParameters.groupId is used. Valid update group IDs are undefined, '$auto', '$direct' or an application group ID, which is a non-empty string consisting of alphanumeric characters from the basic Latin alphabet, including the underscore.
Thank you!
I have successfully implemented The basic search source setup as outlined in the setup on the Github README for Arunoda's Meteor Package. I am now attempting to add filters to work with the search. These filter options are found on a separate search page and consist of checkboxes that can be checked on or off. I have come up with the following server method I call with the event handler.
searchFilter: function (option) {
var selectorCity = {
city: 'Queens'
};
var selectorCategory = {
category: 'Apparel'
};
console.log(selectorCategory);
var query = Listing.find({ $and:[ selectorCategory, selectorCity ] }).fetch();
console.log(query);
return query;
}
The query executes successfully and finds and logs (in the console) the single document I am testing with. It however does not change the output on the page to that query. I believe I may have to use SearchSource's getData() method but I am not sure how.
What options are available for rendering the content on to the page?
So I saw this app for rally on Github:
https://github.com/RallyApps/DefectSummaryMatrix
And I am trying to make the same thing, except for test cases and user stories, instead of defects. How would I go about doing this? I am pretty new into the rally SDK and kind of lost to be honest, so anything you guys can say would help.
I've been looking at the App.html for this, and I think this part is the part I need to pay attention to cause this is where it gets the information about the defects:
var defectQuery = function() {
var selected = releaseDropdown.getSelectedName();
var releaseQuery = '(Release.Name = "' + selected + '")';
var queryObject = [];
queryObject[0] = { key: 'defectStates', type: 'Defect', attribute: 'State' };
queryObject[1] = { key: 'defectPriorities', type: 'Defect', attribute: 'Priority' };
queryObject[2] = {
key: 'defects',
type: 'Defect',
query: releaseQuery,
fetch: 'FormattedID,Name,State,Priority,ScheduleState,ObjectID,Description,owner,DisplayName,LoginName'
};
rallyDataSource.findAll(queryObject, populateTable);
};
How do I modify this to get information about user stories? I think the type field would be called userStory or something like that, but then what would the key and attributes be? I can't find any documentation on this.
See Rally object model in Web Services API documentation.
User stories are called "HierarchicalRequirement" in the WS API. Click on HierarchicalRequirement object in the object model to go over the attributes.
I suggest that you do not use the DefectSummaryMatrix as a starting point. It is a legacy app that is using legacy AppSDK1. Use AppSDK2 instead. There is an example of multi-type object grid here.
I am using the latest versions of Angular, breeze, EF.
I am constructing a complex object on a client called a Quote which is added to a job. This has a QuoteMeasure added to it. One of the properties of QuoteMeasure is a navigation property called measure:
var quote = em.createEntity("Quote", { id: breeze.core.getUuid() }),
quoteMeasure,
measure;
measure = _getMeasureFromLookups(4);
quoteMeasure = em.createEntity("QuoteMeasure", { id: breeze.core.getUuid(), quoteId: quote.id });
I have tried the following which executes a query to the server
quoteMeasure.measureId = measure.id;
quoteMeasure.entityAspect.loadNavigationProperty("measure").then(function () {
console.log(quoteMeasure.measure);
});
quote.quoteMeasures.push(quoteMeasure);
job.quotes.push(quote);
to url /Breeze/Data/Measure?$filter=Id%20eq%204&
which does not exist. I would ideally like to set the navigation property manually as it is static data and previously obtained from a breeze query lookups on the server:
[HttpGet]
public object Lookups()
{
var measures = UnitOfWork.MeasureRepository.Get(null, q => q.OrderBy(m => m.Ordinal)).ToList();
return new { measures = measures };
}
This is what the function _getMeasureFromLookups does, it looks up the previously stored measure. I would like to do assign it this way:
quoteMeasure.measure = measure;
But I get the following meaningless error on the client:
Error: A is undefined M#//llhst/X/Scripts/breeze.min.js:1 d/f.set#//llhst/X/Scripts/breeze.min.js:5 _createNewQuote#//llhst/X/Scripts/app/services/jobService.js:76
This I assume is because a full tree of objects has been downloaded via the lookup rather than an individual measure entity. In http://www.breezejs.com/documentation/navigation-properties there is a section on 'Omitting navigation properties' but then it neglects to tell you how to do this.
So my question is what is best practise for loading navigation property data offline? How can I modify the sample above so that it works?
If I understand your requirement correctly, you should be able to construct your quote and quoteMeasure entities as follows:
var quote = em.createEntity("Quote", { id: breeze.core.getUuid() });
//the assignment quoteId: quote.id is the same as quote.quoteMeasures.push(quoteMeasure)
//you don't need to add it again to the collection
var quoteMeasure = em.createEntity("QuoteMeasure", { id: breeze.core.getUuid(), quoteId: quote.id });
var measure = _getMeasureFromLookups(4);
quoteMeasure.measure = measure;
//or
//quoteMeasure.measureId = measure.id
//your _getMeasureFromLookups should look something like this
function _getMeasureFromLookups(measureId) {
//getEntityByKey will look up Measure from client cache
return em.getEntityByKey('Measure', measureId);
}
Calling loadNavigationProperty will initiate a query to the server.
The 'Omitting navigation properties' section actually tells you how you can omit the principal side of the association. So for example, to apply it to your EF model, if you don't want a Quote to be able to navigate to all QuoteMeasures, you can do the following:
//EF Model on Server
public class Quote {
//Simply remove or comment this collection navigation property
//public virtual ICollection<QuoteMeasure> QuoteMeasures { get; set; }
}
Hope this helps.
Seems the problem was the ommission of these statements:
Configuration.ProxyCreationEnabled = false;
Configuration.LazyLoadingEnabled = false;
Not having this caused the preloading of not only the navigation properties but all of theirs as well which caused the obscure error I noted above. No other modifications were required to get the code working.
EntityAspect.loadNavigationProperty() always makes a request to the server. If you want properties be loaded without making a separate request, do Eager loading with EF.
If you have several properties which are null when breeze fetches them, and you don't want to make several loadNavigationProperty calls, use EntityQuery.expand() method. You can list any properties you need to be loaded
I've used the webOS Ares tool to create a relatively simple App. It displays an image and underneath the image are two labels. One is static, and the other label should be updated with new information by tapping the image.
When I tap the image, I wish to obtain a JSON object via a URL (http://jonathanstark.com/card/api/latest). The typcial JSON that is returned looks like this:
{"balance":{"amount":"0","amount_formatted":"$0.00","balance_id":"28087","created_at":"2011-08-09T12:17:02-0700","message":"My balance is $0.00 as of Aug 9th at 3:17pm EDT (America\/New_York)"}}
I want to parse the JSON's "amount_formatted" field and assign the result to the dynamic label (called cardBalance in main-chrome.js). I know that the JSON should return a single object, per the API.
If that goes well, I will create an additional label and convert/assign the "created_at" field to an additional label, but I want to walk before I run.
I'm having some trouble using AJAX to get the JSON, parse the JSON, and assign a string to one of the labels.
After I get this working, I plan to see if I can load this result on the application's load instead of first requiring the user to tap.
So far, this is my code in the main-assistant.js file. jCard is the image.
Code:
function MainAssistant(argFromPusher) {}
MainAssistant.prototype = {
setup: function() {
Ares.setupSceneAssistant(this);
},
cleanup: function() {
Ares.cleanupSceneAssistant(this);
},
giveCoffeeTap: function(inSender, event) {
window.location = "http://jonathanstark.com/card/#give-a-coffee";
},
jcardImageTap: function(inSender, event) {
//get "amount_formatted" in JSON from http://jonathanstark.com/card/api/latest
//and assign it to the "updatedBalance" label.
// I need to use Ajax.Request here.
Mojo.Log.info("Requesting latest card balance from Jonathan's Card");
var balanceRequest = new Ajax.Request("http://jonathanstark.com/card/api/latest", {
method: 'get',
evalJSON: 'false',
onSuccess: this.balanceRequestSuccess.bind(this),
onFailure: this.balanceRequestFailure.bind(this)
});
//After I can get the balance working, also get "created_at", parse it, and reformat it in the local time prefs.
},
//Test
balanceRequestSuccess: function(balanceResponse) {
//Chrome says that the page is returning X-JSON.
balanceJSON = balanceResponse.headerJSON;
var balanceAmtFromWeb = balanceJSON.getElementsByTagName("amount_formatted");
Mojo.Log.info(balanceAmtFromWeb[0]);
//The label I wish to update is named "updatedBalance" in main-chrome.js
updatedBalance.label = balanceAmtFromWeb[0];
},
balanceRequestFailure: function(balanceResponse) {
Mojo.Log.info("Failed to get the card balance: " + balanceResponse.getAllHeaders());
Mojo.Log.info(balanceResponse.responseText);
Mojo.Controller.errorDialog("Failed to load the latest card balance.");
},
//End test
btnGiveCoffeeTap: function(inSender, event) {
window.location = "http://jonathanstark.com/card/#give-a-coffee";
}
};
Here is a screenshot of the application running in the Chrome browser:
In the browser, I get some additional errors that weren't present in the Ares log viewer:
XMLHttpRequest cannot load http://jonathanstark.com/card/api/latest. Origin https://ares.palm.com is not allowed by Access-Control-Allow-Origin.
and
Refused to get unsafe header "X-JSON"
Any assistance is appreciated.
Ajax is the right tool for the job. Since webOS comes packaged with the Prototype library, try using it's Ajax.Request function to do the job. To see some examples of it, you can check out the source code to a webOS app I wrote, Plogger, that accesses Blogger on webOS using Ajax calls. In particular, the source for my post-list-assistant is probably the cleanest to look at to get the idea.
Ajax is pretty much the way you want to get data, even if it sometimes feels like overkill, since it's one of the few ways you can get asynchronous behavior in JavaScript. Otherwise you'd end up with code that hangs the interface while waiting on a response from a server (JavaScript is single threaded).