Documentation

Javascript API

Custom card variables

portletId: The unique id of the portlet.
portletConfig: the value from the custom portlet editor config field.
portletConfigurationId: A unique for this portlet instance. Can be used for storing data.
portletCss:  the value from the custom portlet editor CSS field. For page template custom portlets, this automatically added to the page on render.
portletServerResponse: the result the the server (C#) code defined on this portlet. For page template custom portlets, this value is automatically rendered to the page. Global portlets will need to manually add it using the API methods below.

Example usage:

var uniqueKey = 'customDataKey_' + portletConfigurationId;

ctx.customPortlets.setData(portletId, uniqueKey, 'my-custom-data-value');


Replace view function replaceView

This function should only be used for ReactJS custom cards where there is no Server side (C#) content. This function will replace all the current html for the card. 

Example usage: 

var HelloThoughtFarmer = React.createClass({
    displayName: "HelloThoughtFarmer",
    render: function render() {
        return React.createElement(
            "div",
            null,
            React.createElement(
                "h2",
                null,
                "Hello ThoughtFarmer!"
            )
        );
    }
});

replaceView(React.createElement(HelloThoughtFarmer, {classNames: 'my-awesome-portlet'}));


Context (ctx) object and available methods

Within the Client side (JavaScript) portion of the custom card editor you will have access to the ctx object. This is an all encompassing ThoughtFarmer core object that should not be tampered with as they may break site functionality. However, within it resides some useful methods that you can utilize when developing custom cards. 

ctx.customPortlets.getUser()

Returns a plain object containing information about the current user.

Example response:
{
    userId: 1,
    name: 'Bort Simpson',
    firstname: 'Bort',
    culture: 'en',
    profileImageUrl: '/profileimage/34679100000/2217/44x44/True/0,0,0,0/profileimage.jpg',
    isGuest: false,
    inAdminMode: false,
    allowedInAdminMode: true,
    archivedContentEnabled: true,
}

Usage:

var user = ctx.customPortlets.getUser();

$('#customCardUserDiv').append('<h2>{0}</h2>'.format(user.name));

NOTE: The string.format method is a ThoughtFarmer extension available for global use. It takes in an args list and simply replaces all instances of numerical tokens in the format {index}. It works exactly like string.Format in C#. 

ctx.customPortlets.getPage()

Returns a plain object containing key properties of the current page.

Example response:
{
    contentId: 1,
    pageType: 1,
    treePath: [1, 2, 3],
    title: 'I am a page',
    tags: [{tagId: 1, name: 'some-tag'}, ...],
    updateDate: '2015-12-23T16:44:50Z',
    publishedDate: '2015-12-23T16:44:50Z'
}

Example usage:

var page= ctx.customPortlets.getPage();

if(Date.parse(page.publishedDate) < Date.parse('31-01-2015') ) {

 $('#customCardInfoDiv').append('&lt;h2&gt;This page was published before Dec 31, 2015&lt;/h2&gt;');

}

 

ctx.customPortlets.getData(portletId, key, callback)

Retrieves data previously stored under the given key. The callback receives two props, key and value. Value is always a string.

Example usage:

var page = ctx.customPortlets.getPage(),
    key = 'customKey_{0}',
    customPortletId = '20160903',
    customCardList = $('#customCardListId'),
    data = [];

ctx.customPortlets.getData(customPortletId, key.format(page.contentId), function(key, value){ if(value){ data = JSON.parse(value); // assuming value is an array of objects

      $.each(data, function(index, item) {
           customCardList.append('&lt;li&gt;Item title: {0}; item value: {1}&lt;/li&gt;'.format(data.title, data.value));
      });
 }

});

 

ctx.customPortlets.setData(portletId, key, value)

Stores some data server side for the card under the given key. Values will be converted to a string when saving. This data is not unique to the current user.
Note: This does not auto serialize objects into JSON. If you want to store an object, you must serialize it first.

Example usage:

var page = ctx.customPortlets.getPage(),
  key = 'customKey_{0}', 
  customCardTitleField = $('#customCardTitleId'), //assuming these are text inputs in the HTML for the portlet
  customCardValueField = $('#customCardValueId'),
  data = [];

//Can initialize the data variable using the ctx.customPortets.getData call as in the example above $('#submitButton').on('click', function(e){ e.preventDefault();

 var newData = {
      title: customCardTitleField .val(),
      value: customCardValueField .val()
 };

 data.push(newData);
 ctx.customPortlets.setData(portletId, key.format(page.contentId), JSON.stringify(data));

});

 

ctx.customPortlets.getUserState(key, callback)

Retrieves data for the currently logged in user previously stored under the given key. The callback receives two props, key and value. Value is always a string.

Example usage:

ctx.customPortlets.getUserState('HasClickedCustomButton', function(key, value){
     if(value && value.toLowerCase !== 'true') {
          alert('You should really click the custom button. \r\n Everyone is doing it!!');
     }
});
 

ctx.customPortlets.setUserState(key, value)

Stores some data server side for the currently logged in user under the given key. Values will be converted to a string when saving.

Note: This does not auto serialize objects into JSON. If you want to store an object, you must serialize it first.

Usage:

$('#customCardButton').on('click', function(e){
  e.preventDefault();
  ctx.customPortlets.setUserState('HasClickedCustomButton', true);
});