I am trying to configure the porperties for my DataTable in js for Google Charts. I am already configuring this, and it is working but it broke on me a few times the past month and I had to update my method call.
var data = google.visualization.arrayToDataTable([]);
The first way I used to do this is with the code below which worked until recently (I tested it it yesterday, but haven't looked at it for a couple weeks before):
// Check if column title includes Projection.
if(**data.Sf[i]**["label"].indexOf('Projection') > -1 )
{
//Do Action
}
else
{
//Do else action
}
Once the above code broke, I moved on to change the data.Sf to data.pg with no other code changes. This fixed the problem. My concern is that this way of going about things can possibly break again, and I am wondering if there is safer or more consistent way to go about looking at the title for each column in the data table.
there are several helper methods
you shouldn't need to access the objects directly
to get the column label, use...
dataTable.getColumnLabel(colIndex)
Related
I've been doing some work on Sharepoint Online/365 and have got stuck trying to set the value of a lookup or choice column in NewForm.aspx
Narrowed my problem down to not being able to set lookup/Choice Columns
I have simplified a code on my page down to
//Phase being a Choice Column & Closure a case sensitive valid option
$("select[title='Phase']").val("Closure");
//ProjectName being a Lookup Column & Test2 a case sensitive valid entry in the list
$("select[title='ProjectName']").val("Test2");
I have no problem setting text fields as the following code works fine on a text field I created
$("input[title='TextField']").val("Test2");
I have used the following Jquery libraries 1.7.2/min.js and 1.11.3
Not sure whether you used _spBodyOnLoadFunctionNames.push() method for your logics. Usually you have to wait all SharePoint DOM objects are loaded and then to execute your jQuery code. If you used SharePoint JavaScript library, you probably needs to call ExecuteOrDelayUntilScriptLoaded() to make sure your call is called after curtain SharePoint .js files are loaded.
First Thanks "Verona Chen" and " DIEGO CARRASCAL" because of who i've learnt a few other tricks in SharePoint which will help with other projects.
My original script before the question was trying to use a query string to populate a field in newform.aspx (which i have done on sharepoint 2013 with code i have found here on)
Unforuntaly with sharepoint online/365 This code was no longer working.
This code has fixed my issue (though it does change how a few previous pages are constructed)
Appologies if this doesn't directly answer the above question (as this was me trying to breakdown the overall issue i was having into something simpler and easier to address based on me narrowing down the issue in my original code) however as I am now up and running, it seems only polite to post the outcome.
Prior to code, i have a projects list with a "ProjectName" field. I was sending the field name into a URL and querystring to get mylist/newform.aspx?ProjectName=Test2
I was then trying to pull that Test2 into the lookup field (liked to the project list) "ProjectName" in the list "MyList"
But even when loading the function for my old script with _spBodyOnLoadFunctionNames.push() it wasn't working.
After playing with this for a while and after some looking around i found this peice of code
<script type="text/javascript">
(function () {
var ctx = {};
ctx.Templates = {};
ctx.Templates.Fields = {
'ProjectName': {
'NewForm': renderTaskCategory
}
};
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(ctx);
})();
function renderTaskCategory(ctx) {
//extract cat parameter from a query string
var GetProjID = GetUrlKeyValue('ProjID');
//set lookup field value
ctx.CurrentFieldValue = GetProjID;
//default template for rendering Lookup field control
return SPFieldLookup_Edit(ctx);
}
</script>
This means that i have to change my previous url builds to create mylist/newform.aspx?ProjID=2
This script then finds item ID 2 (which happens to be test2 in this case) and puts the title of item 2 in my lookup field ProjectName
Thanks again to those that helped earlier.
And apologies again if this doesn't directly answer the question i originally asked.
Okay, so I'm learning front-end dev with javascript/jquery/bootstrap through FreeCodeCamp. This is not a core part of the project, but I don't understand it and it's distracting me too much. In this code pen here:
http://codepen.io/JDenman6/pen/zqeGwp/ --
I have an array of Twitch.tv usernames that I check through an API and build divs to display them based on the JSON object comes back from the API call.
The weird thing is that every time I refresh the page, I get the divs in a different (apparently random) order. I'm guessing that the API calls are going out asynchronously and the divs are appearing in the order that the API calls finish.
When I Googled for other people having problems with divs in random order I found many solutions for causing random display order, but nothing on preventing it. So then I went looking for a solution to sorting divs and found this post, Ordering DIVs based on class name using Javascript/Jquery, which led me to this bit of code:
$(function(){
var elem = $('#twitcherList').find('div').sort(sortMe);
$('#twitcherList').append(elem);
});
function sortMe(a, b) {
return a.className < b.className;
}
Only I haven't been able to get it to work. I forked off my original codepen to do some poking around here: http://codepen.io/JDenman6/pen/MeYOJP.
The list of divs in the twitcherList in the html tab is from inspecting the twitcherList after rendering the original code. I thought it might be easier to sort them if they're hard coded, rather than coming in from the API call. I also added a little test div and inserted some code into the sort function to 1) check that it was running and 2) double check that a.classname and b.classname were returning what I thought they were, which they are.
I feel like I'm missing something massive, fundamental, and possibly quite obvious. Any thoughts?
You need to return -1, 0 or 1 based on the condition for proper sorting.
function sortMe(a, b) {
return a.className.localeCompare(b.className);
}
For better browser support use,
function sortMe(a, b) {
return a.className < b.className ? 1 : -1;
}
I am trying to use ngGrid to make somewhat of a "tree-control" which I can build dynamically by calling API's. ngGrid allows for grouping on rows, yet the nature of it requires that all rows be present at the beginning. This is unfortunate for the fact that an API to pull back all generation data for a File Integrity Monitoring system would be insanely slow and stupid. Instead, I wish to build the "tree" dynamically on the expansion of each generation.
I am trying to inject children (ngRows) into a group-row (ngAggregate) on a callback, yet I do not think that I am calling the correct constructor for the ngRows for the fact that the rows are ignored by the control
Through the use of the aggregateTemplate option on the gridOptions for ngGrid, I have been able to intersept the expansion of a group quite easily.
(maybe not easily, but still)
I've replaced the ng-click of the default template:
ng-click="row.toggleExpand()"
with:
ng-click="$parent.$parent.rowExpanded(row)"
I know that it's a bit of a hack, but we can get to that later. For now, it gets the job done.
The way that I discovered how to work my way up the $scope to my rowExpanded function was by setting a breakpoint in ngGrid's "row.toggleExpand" function and calling it from the template as so:
ng-click="row.toggleExpand(this)"
Once I retrieve the group I want, I call an API to get the children for said group. I then need to make the return as children of the row. I decided to do this by calling ngGrid's ngRow factory:
row.children = [];
for(var i = 0; i < childData.length; i++)
{
row.children[row.children.length] = row.rowFactory.buildEntityRow(childData[i], i);
}
row.toggleExpand();
... yet this does not appear to be working. The rows are not showing up after I do the expand! Why won't my rows show up?
Here's my current Plunker!
By the way
I've placed a debugger statement within the group-expand callback. As long as you have your debugger open, you should catch a breakpoint on the expansion of a group.
Thanks everybody!
I found my answer, I'm an idiot....
I got this control working, and then realized that it was a total hack, that I could have used the control the way it was meant to be used and it would have worked much better, had much better work-flow, and it would have saved me an entire day of development. If you are wondering how you use the control this way, the answer is that you don't.
I got the stupid thing to work by updating my data structure after the round trip and forcing the grid to refresh, pretty obvious. I had to set the grid options so that groups were always expanded and I had to control the collapser icon logic myself, outside of ngGrid. I never called row.toggleExpand. I also hid any rows with null values by a function call within an ng-if on my rowTemplate. After all that was said and done, I put my foot in my mouth.
I am new to NVD3. And i am trying to get the data from Matrix report in sales-force and display that data in Line plus bar chart. seems like i am getting the chart with no data . On hover tool tip at a particular place it is displaying NAN. So i think i am not able to frame data correctly in the report. so do any of you have suggestion on that and if possible can you paste the code also.
Thanks in advance.
i am taking this as a refernce and tried.
http://nvd3.org/examples/linePlusBar.html
As you said in the comments, with test data everything works properly. Then, the problem must be with the way you are parsing the data. Also, you have some problems in how you use nvd3.
A quick look at your code shows some problems:
The following line is writing '+matrixReportId' in every request:
$.ajax('/services/data/v29.0/analytics/reports/+matrixReportId', {
I think you probably want to write the contents of matrixReportId, right? So you need to do it like this:
$.ajax('/services/data/v29.0/analytics/reports/' + matrixReportId, {
You are doing a chartData.push() on an empty values array. You should do that only after adding the elements to the array:
$.each(response.groupingsDown.groupings, function(di, de) {
var values = [];
$.each(response.groupingsAcross.groupings, function(ai, ae) {
values.push({"x": ae.label, "y": response.factMap[de.key+"!"+ae.key].aggregates[0].value});
});
chartData.push({"key":de.label, "values": values});
});
You should not recreate the chart everytime the data changes. You should only change the datum and then update the chart.
You are forgetting to call nv.utils.windowResize().
I edited the jsfiddle to incorporate these changes. Please test it:
https://jsfiddle.net/egLgaxc4/5/
Also, you probably are better off not using jquery at all, as d3+jquery can get quite heavy. D3 has its own ajax (look at d3.xhr), foreach and selection methods. You really don't need jquery here.
Here, I created an example using only d3: https://jsfiddle.net/fwuzk3y6/5/
I have a working JSTree based on JSON data, and the checkbox plugin displays boxes next to each item -- so far so good. Now I want to get which nodes the user has checked, so I can do something with the data.
Unfortunately I haven't found a way to do it through the documentation or web searches. A few answers on SO say to use a get_checked method, but either I'm really missing something or my version of JSTree doesn't have that (i.e. that string doesn't appear anywhere in the project files). I'm on version 3.0.0, which is the latest right now.
Could someone please point me either to a) how to get the checked items, or b) how to access some iterable representation of the tree so I can grab them myself?
(I should mention I'm pretty new to Javascript.)
Here is how I set up the tree, which is based on the documentation on the website:
var treeInit = { core: { data : [
/* all my data */
]
}};
treeInit.plugins = ["checkbox"];
$('tree_div').jstree(treeInit);
I have also faced the same problem with jstree version 3.0.0 . I found a simple solution after hours of surfing. Hope it help others.
var result = $('#your_tree').jstree('get_selected');
This line returns an array of selected values.
I found an answer. By calling $('#tree').jstree('get_json'), you can get a JSON representation of the whole tree. From there it's pretty straight forward to recurse through the tree nodes and grab all the checked ones. Again, this is for version 3.0.0 (since it seems that the API has changed a lot across versions).
Using 3.3.8 version of jsTree, my prefered way of getting it as below using get_selected:
Please remember, it only counts those nodes that are selected, it won't count any indeterminate nodes. For complete and working sample code, you can have view https://everyething.com/Example-of-jsTree-to-get-all-checked-nodes
$('.btnGetCheckedItem').click(function(){
var checked_ids = [];
var selectedNodes = $('#SimpleJSTree').jstree("get_selected", true);
$.each(selectedNodes, function() {
checked_ids.push(this.id);
});
// You can assign checked_ids to a hidden field of a form before submitting to the server
});