Client Side Rendering with Async dependencies

Yesterday I asked a question on SharePoint StackExchange:

• Client Side Rendering with Async dependencies

I also asked Elio Struyf on Twitter:

Good idea, Elio Estruyf! Now I want to try it out.

Preparations

In this case I’ll be using my example from my blog post yesterday:

Drag and Drop Image using Client Side Rendering

I have created a new list and added a lookup field to my previous list. What I get is a Title of the lookup item, but not my custom field called DragAndDrop. In my test I will try to load the DragAndDrop Image using an ajax call and rendering it after Client Side Rendering is done with my item.

To be complete, I want to show some screenshots for my lookup field:

It will result in this OOTB rendering:

Trying out CSR with async dependencies

While working with jslink, first of all I want to show a loading image instead of an empty html element, to show that something is loading:

Here is the skeletton of the jslink file:

Making an ajax call

Next step is to initiate an ajax call. I am trying to avoid the jQuery dependency. There is so much you can do with the built-in javascript functions. For making an ajax call I am using SP.RequestExecutor.js

Here is the result:

The code should be quite self explaining:

Next steps and further considerations

It seems to work, although I have some considerations:

1. What happens if the data from the ajax call is retrieved before Client Side Rendering is done (then the container is not rendered yet). Even if the risk for that is low, it should be handled properly.
2. It would be good to have a consistent look and feel in the Display form and in the list view. To make it possible, following should be done:
   1. We must create references to html elements (containers) with unique ids, need to implement logic for generating ids and keeping track of the right elements.
   2. Ajax calls should be bundled, otherwise it will hugely impact the performance, even in a list view with 30 items.