We Keep Coding

Extend Sitecore insert link functionality

I have an issue which I don't quite know how to approach.
I need to extend the Sitecore Insert link functionality: when I insert a link to a Sitecore Item, a certain icon, based on some logic (I've already created the logic for another user story(*)), needs to appear in the front of the link after "Insert" button is pressed, and of course, finally on the UI.
I was thinking on the following approach: after the item is inserted, the item's ID is sent to the backend via an Ajax call and the response is a mark-up with the values returned by the service I told you above at (*).
The issue is that I don't know where to start on or if my idea is ok.
Any help is welcome.

I found the answer:
In the RichText Commands.js file, I have added the following script which sends the item Sitecore ID to the API:
function scInsertSitecoreLink(sender, returnValue) {
if (!returnValue) {
return;
}
var url = returnValue.url;
var itemId = url.substring(url.indexOf("=") + 1, url.lastIndexOf("&"));
var $ = jQuery.noConflict();
$.ajax({
async: true,
type: "GET",
url: '/sitecore/api/Test/ThisIsTheTestApiCall',
data: JSON.stringify(itemId),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (result) {
alert(result);
}
});
[...]
}
First I have added var $ = jQuery.noConflict(); before the ajax call;
More info here: https://api.jquery.com/jquery.noconflict/
Then I've checked if there are any changes over the routes: RegisterHttpRoutes;
Profit.

You might be better to modify the renderField pipeline, because if you ever need to change these icons later, you're going to have to process every single link on your site.
To do that, you'll want to create a processor and have it run before Sitecore.Pipelines.RenderField.ExpandLinks, Sitecore.Kernel in the renderField pipeline so that you can use the dynamic links (which contain IDs) to figure out what icons you need. From there you can use HtmlAgilityPack.HtmlDocument to find and update the markup when the link is rendered.

Facebook graph - Ajax / JSON showing url 'shares'

I'm very new to using JSON and struggling to get to grips with retrieving data from an object and printing to HTML. The basic requirement is that i retrieve the url share count from facebook which aparently as its public data, i don't need to mess around with access tokens.
My script so far
$.ajax(
{
url: 'http://graph.facebook.com/?ids=http://google.co.uk',
success: function(json)
{
console.log(json);
}
});
Which returns the following as an object in the console.
[object Object] {
http://google.co.uk: [object Object] {
comments: 5,
id: "http://google.co.uk",
shares: 321364
}
}
So i can see the 'shares' data is there but how do i access it and print into a div? I've tried appending it to the 'sharecount' div like this
jQuery(response_container).append('<div id="sharecount">Shares: ' + shares + '</div>');
But i'm just fumbling in the dark and could use some guidance. Most guides on this seem to be out of date and recommend using the old FQL method.
I have a JSBIN here if anyone wants to take pity on me!
http://jsbin.com/qinutanotu/edit?html,console,output
thanks
UPDATE
I've now changed it to this which works
<script>
$.ajax(
{
url: 'http://graph.facebook.com/?ids=http://google.co.uk',
success: function(json)
{
var urlshares = (json['http://google.co.uk'].shares)
$("#sharecount").append(urlshares);
}
});
</script>
<div id="sharecount"></div>
UPDATE #2
graph.facebook.com seems to sometimes not return 'shares' and this might be to do with there being no shares for that url. Rather than returning '0' it returns nothing at all. To fix this i've replaced append with html and given the div a default value of 0 which gets replaced if the url has a share count passed back
<script>
$.ajax(
{
url: 'http://graph.facebook.com/?ids=http://google.co.uk',
success: function(json)
{
var urlshares = (json['http://google.co.uk'].shares)
$("#sharecount").html(urlshares);
}
});
</script>
<div id="sharecount">0</div>

Facebook uses the URL as key here, so you need json['http://google.co.uk'] first to access the inner object, and then json['http://google.co.uk'].shares to access the shares value.
(http://google.co.uk contains characters that make it impossible to use the dot notation to access the property using that key, therefor the ['http://google.co.uk'] has to be used here.)

CRM 2011 API call for a view GUID by name

I'm trying to pull back the GUID of a view to set a default lookup value in javascript. The rest of my code works if I hard code the variables, but that's not good development practice (though, pulling back a unique identifier by querying on a non-unique identifier isn't great either, but its better). I'm not sure how to form the ajax call though.
Here is a shell of what I am working with, I just don't know what to put at the end of /CRMServices/2011/OrganizationData.svc/ to get the proper record from the API. The Views are savedquery entities, so /savedquerySet makes sense but I'm not sure how to tell it to look up by name. I've not used this API a lot, and the documentation is confusing for me.
var b = Xrm.Page.context.getServerUrl() + "/XRMServices/2011/OrganizationData.svc/savedquerySet (<something here not sure what>)";
$.ajax({
type: "GET",
datatype: "json",
url: b,
beforeSend: function (a) {
a.setRequestHeader("Accept", "application/json")
},
success: function (a) {
var b = a.d;
SetGuid(b.SavedQueryIdUnique); // defined function
}
})
the field I am trying to query on is Name.
Help is very appreciated. This is in CRM 2011 UR 8 or so

Your REST query should look something like this:
/SavedQuerySet?$select=SavedQueryId&$filter=Name%20eq%20'YOUR VIEW NAME HERE'
The SavedQuerySet name is case sensitive, as well as the attribute name in the select (and filter) clause.
See the MSDN documentation on the ODATA endpoint for details.

Using JSON to store multiple form entries

I'm trying to create a note taking web app that will simply store notes client side using HTML5 local storage. I think JSON is the way to do it but unsure how to go about it.
I have a simple form set up with a Title and textarea. Is there a way I can submit the form and store the details entered with several "notes" then list them back?
I'm new to Javascript and JSON so any help would be appreciated.

there are many ways to use json.
1> u can create a funciton on HTML page and call ajax & post data.
here you have to use $("#txtboxid").val(). get value and post it.
2> use knock out js to bind two way.and call ajax.
here is simple code to call web app. using ajax call.
var params = { "clientID": $("#txtboxid") };
$.ajax({
type: "POST",
url: "http:localhost/Services/LogisticsAppSuite.svc/Json/GetAllLevelSubClients",
contentType: 'application/json',
data: JSON.stringify(params),
dataType: 'json',
async: false,
cache: false,
success: function (response) {
},
error: function (ErrorResponse) {
}

I have written a lib that works just like entity framework. I WILL put it here later, you can follow me there or contact me to get the source code now. Then you can write js code like:
var DemoDbContext = function(){ // define your db
nova.data.DbContext.call(this);
this.notes=new nova.data.Repository(...); // define your table
}
//todo: make DemoDbContext implement nova.data.DbContext
var Notes = function(){
this.id=0; this.name="";
}
//todo: make Note implement nova.data.Entity
How to query data?
var notes = new DemoDbContext().notes.toArray(function(data){});
How to add a note to db?
var db = new DemoDbContext();
db.notes.add(new Note(...));
db.saveChanges(callback);

Depending on the complexity of the information you want to store you may not need JSON.
You can use the setItem() method of localStorage in HTML5 to save a key/value pair on the client-side. You can only store string values with this method but if your notes don't have too complicated a structure, this would probably be the easiest way. Assuming this was some HTML you were using:
<input type="text" id="title"></input>
<textarea id="notes"></textarea>
You could use this simple Javascript code to store the information:
// on trigger (e.g. clicking a save button, or pressing a key)
localStorage.setItem('title', document.getElementById('title').value);
localStorage.setItem('textarea', document.getElementById('notes').value);
You would use localStorage.getItem() to retrieve the values.
Here is a simple JSFiddle I created to show you how the methods work (though not using the exact same code as above; this one relies on a keyup event).
The only reason you might want to use JSON, that I can see, is if you needed a structure with depth to your notes. For example you might want to attach notes with information like the date they were written and put them in a structure like this:
{
'title': {
'text':
'date':
}
'notes': {
'text':
'date':
}
}
That would be JSON. But bear in mind that the localStorage.setItem() method only accepts string values, you would need to turn the object into a string to do that and then convert it back when retrieving it with localStorage.getItem(). The methods JSON.stringify will do the object-to-string transformation and JSON.parse will do the reverse. But as I say this conversion means extra code and is only really worth it if your notes need to be that complicated.

how to use JSON for an error class

Hey all. I was fortunate enough to have Paolo help me with a piece of jquery code that would show the end user an error message if data was saved or not saved to a database. I am looking at the code and my imagination is running wild because I am wondering if I could use just that one piece of code and import the selector type into it and then include that whole json script into my document. This would save me from having to include the json script into 10 different documents. Hope I'm making sense here.
$('#add_customer_form').submit(function() { // handle form submit
The "add_customer_form" id is what I would like to change on a per page basis. If I could successfully do this, then I could make a class of some sort that would just use the rest of this json script and include it where I needed it. I'm sure someone has already thought of this so I was wondering if someone could give me some pointers.
Thanks!
Well, I hit a wall so to speak. The code below is the code that is already in my form. It is using a datastring datatype but I need json. What should I do? I want to replace the stupid alert box with the nice 100% wide green div where my server says all is ok.
$.ajax({
type: "POST",
url: "body.php?action=admCustomer",
data: dataString,
success: function(){
$('#contact input[type=text]').val('');
alert( "Success! Data Saved");
}
});

Here is the code I used in the last question, minus the comments:
$(function() {
$('#add_customer_form').submit(function() {
var data = $(this).serialize();
var url = $(this).attr('action');
var method = $(this).attr('method');
$.ajax({
url: url,
type: method,
data: data,
dataType: 'json',
success: function(data) {
var $div = $('<div>').attr('id', 'message').html(data.message);
if(data.success == 0) {
$div.addClass('error');
} else {
$div.addClass('success');
}
$('body').append($div);
}
});
return false;
});
});
If I am right, what you are essentially asking is how you can make this piece of code work for multiple forms without having to edit the selector. This is very easy. As long as you have the above code included in every page with a form, you can change the $('#add_customer_form') part to something like $('form.json_response'). With this selector we are basically telling jQuery "any form with a class of json_response should be handled through this submit function" - The specific class I'm using is not relevant here, the point is you use a class and give it to all the forms that should have the functionality. Remember, jQuery works on sets of objects. The way I originally had it the set happened to be 1 element, but every jQuery function is meant to act upon as many elements as it matches. This way, whenever you create a form you want to handle through AJAX (and you know the server will return a JSON response with a success indicator), you can simply add whatever class you choose and the jQuery code will take over and handle it for you.
There is also a cleaner plugin that sort of does this, but the above is fine too.

Based on your question, I think what you want is a jQuery selector that will select the right form on each of your pages. If you gave them all a consistent class you could use the same code on each page:
HTML
<form id="some_form_name" class="AJAX_form"> ... </form>
Selector:
$('form.AJAX_form")