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')

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

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, " "));


1 Answer 1


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:

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;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.