$template Object

The $template object serves as the central hub for all hooks and functions related to the current template.

Methods

1. $template.ready(callback)

   This method is akin to the document.ready function. It executes as soon as the document is loaded and the template is ready for execution. It is recommended to encapsulate your JavaScript code inside the $template.ready(callback) function.

   Example:

   /** JavaScript */
   $template.ready(async () => {
       console.log('The template is ready');
   });
   
   

Hooks

1. $template.useView()

   This is an asynchronous/promise-based method that returns view hooks to be used within the Template JavaScript Section.

   • Methods:
     • view.showLoading() - Displays a loading overlay on the Template View.
     • view.hideLoading() - Hides the loading overlay on the Template View.

   Example:

   /** JavaScript */
   $template.ready(async () => {
       const view = await $template.useView();
       view.showLoading(); // Displaying loading on the template view
       setTimeout(() => {
           view.hideLoading(); // Hiding the loading
       }, 1000);
   });
   

2. $template.useContext()

   This is an asynchronous/promise-based method that returns the current context object containing information about the current item, board, document, etc.

   Structure

   {
     "workspaceId": -1,
     "boardId": 1814890475,
     "boardIds": [
       1814890475
     ],
     "itemId": 1814890492,
     "instanceId": 35564832,
     "instanceType": "item_view",
     "theme": "dark",
     "account": {
       "id": "18305595"
     },
     "user": {
       "id": "47317564",
       "isAdmin": true,
       "isGuest": false,
       "isViewOnly": false,
       "countryCode": "IN",
       "currentLanguage": "en",
       "timeFormat": "12H",
       "timeZoneOffset": 5
     }
   }
   

   Example:

   /** JavaScript */
   $template.ready(async () => {
       const context = await $template.useContext();
       console.log(context); // Prints the current context
   });
   
   

3. $template.useItemAPI()

   This is an asynchronous/promise-based method that returns the Item API hooks to be used within the Template JavaScript Section.

   • Methods:
     • itemAPI.getCurrentItem() - Fetches details of the current item.
     • itemAPI.findById(itemId) - Fetches details of a specific item using board and item IDs.
     • itemAPI.updateItem(boardId, itemId, columnValues) - Updates the specified columns of an item.

   Example:

   /** JavaScript */
   $template.ready(async () => {
       const context = await $template.useContext();
       const itemAPI = await $template.useItemAPI();
       if (context.itemId) { // Important: Weather app is configured in item view
           const currentIssue = await itemAPI.getCurrentItem();
           console.log('currentIssue', currentIssue); // Get current issue if you want to fetch some details from the item
           // Updating column name text in the current item
           await itemAPI.updateItem(context.boardId, context.itemId, {
               text: `This is a sample email2222222`
           })
       } else {
           alert('App is not opened in issue view')
       }
   });
   

4. $template.useBoardAPI()

This is an asynchronous/promise-based method that returns the Board API hooks to be used within the Template JavaScript Section.

• Methods:
  • boardAPI.getCurrentBoard() - Fetches details of the current board.
  • boardAPI.findById(boardId) - Fetches details of a specific board using the board ID.

Example:

/** JavaScript */
$template.ready(async () => {
    const boardAPI = await $template.useBoardAPI();
    const currentBoard = await boardAPI.getCurrentBoard();
    const specificBoard = await boardAPI.findById('exampleBoardId');
    console.log('Current Board:', currentBoard);
    console.log('Specific Board:', specificBoard);
});

1. $template.useVariables()

This is an asynchronous/promise-based method that returns the Variables API hooks to be used within the Template JavaScript Section.

• Methods:
  • variables.getValue(variableName) - Fetches the value of a specific variable using the variable name.

Example: