Writing transformations for chat

Chat web parts use jQuery templates to display their content. This includes on-line users lists, room lists, messages and other elements. In Kentico, the templates are stored as ordinary transformations that have their type set to jQuery.

A jQuery transformation consists of HTML code and template tags that dynamically insert values of the object that is currently being processed. There are also tags that control the flow of the transformation.

On this page

Displaying data

An example transformation could look like this:

<div>
<strong>${Nickname}</strong>: ${MessageText}
</div>

The example can be used to display a chat message. It displays the sender's nickname in bold and the text of the message.

In this example, template tags are used to display data. Tags that display data should always start with a dollar sign ($), followed by the name of the variable that you want to display enclosed in brackets.

Creating conditions

You can also add conditional template tags that will control what content will be displayed based on a true/false condition.

A condition begins with the {{if}} tag. As an argument, you can enter any statement that returns a boolean value (true or false). The following are examples of a valid conditional statement:

IsSystem

Nickname == 'administrator'

! IsCurrentUser

An if condition can have two branches - one that gets rendered when the condition is true, and one indicated by the tag {{else}} that gets rendered when the condition is false. You must always close the body of the condition with the {{/if}} closing tag.

In the following example, we'll add the recipient's nickname in case the message is a whisper. Otherwise, the transformation will display only the standard nickname and text combination.

Inserting action commands

Users can perform actions on objects, provided they have permission to do so. For example, you can allow room administrators to reject messages directly in the list, or you can allow them to disable or delete rooms.

The following example shows how you can insert a command control for the reject message action. You need to insert the action command into the onclick attribute with the same syntax as if you were displaying a variable.

The if condition ensures that the action command will be rendered only if the current chat user has permission to reject the message, i.e., if the user is an administrator or a creator of the room.