When a user clicks Add to Wishlist, it should display a progress indicator and create a record in the Enrollments list

Question

Right now, the button just pulls up the Enrollment form. Instead, I am trying to get a single click enrollment button. When a user clicks Add to Wishlist, it should display a progress indicator and create a record in the Enrollments list. Then display Enrolled. Please help code below

(function () {
if (typeof SPClientTemplates === 'undefined')
    return;

var wishlistCtx = {};

wishlistCtx.Templates = {};
//associate the various templates with rendering functions for our field.
//when a list view is returned to the user, SharePoint will fire the function associate with 'View'.
//when a list item is in New, SharePoint will fire the function associated with NewForm, etc.
wishlistCtx.Templates.Fields = {
    //Recipekpi is the Name of our field
    'Add_x0020_to_x0020_Wishlist': {
        'View': wishlistView,
        'DisplayForm': wishlistDisplay,
        'EditForm': wishlistNewEdit, //using the same function for New and Edit, but they could be different
        'NewForm': wishlistNewEdit
    }
};

//register the template to render our field
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(wishlistCtx);


function wishlistNewEdit(ctx){
    return "Save Topic First";
}


function wishlistDisplay(ctx) {
var id = getParameterByName("ID");
    var url = "../sapiensEnrollments/NewForm.aspx?TopicID=" + id;

return "<button><a href='" + url + "'>Enroll</a></button>";
}

//function called when our field is shown in a View
function wishlistView(ctx) {

    var url = ctx.listUrlDir + "../../sapiensEnrollments/NewForm.aspx?TopicID=" + ctx.CurrentItem.ID;

return "<button><a href='" + url + "'>Enroll</a></button>";
}

function getParameterByName(name, url) {
    if (!url) {
      url = window.location.href;
    }
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}

})();

score 0 · Answer 1 · edited Apr 13 '17 at 12:41

First of all,

(Switch to Chrome and)
install the Cisar Chrome Extension so you can do WYSIWYG CSR/JSLink editing

I don't understand the Progress Indicator

You can present a Modal Dialog with the Enrollment Form

Easiest might be to (in the callback) just replace the button with a text 'Enrolled'

But you do need code OR a Workflow (on your Enrollment list) to set the Add_x0020_to_x0020_Wishlist value to Enrolled, so it doesn't display the Button again

There is no need to define a getParameterByName function

SharePoint has at least 4 Functions you can use:

What does this code getQueryStringParameter do?

And the CSR 'View' function definition actually gets 4 parameters (which no-one uses, but do shorten your code)

'View': function (ctx, CurrentFieldSchema, CurrentItem, ListSchema){
    var name = CurrentFieldSchema.Name;
    var value = CurrentItem[name];
    var ID = CurrentItem.ID;
}

When a user clicks Add to Wishlist, it should display a progress indicator and create a record in the Enrollments list

1 Answers1