Useful Code Snippets to Use In Alpha Studio

Community
1

Alpha Snippets

:books: Please Get Familiar With These Topics

:reminder_ribbon:Grab the DOM instance of any element

const element = ap.$('<element_id>') // element_id can be copied from attribute window
// element is an instance of Element: https://developer.mozilla.org/en-US/docs/Web/API/Element

:woman_technologist:t3: Log the parameters sent to the custom code

// might have `triggerEvent` (when invoked as a trigger), `response` (if API)
console.log(params)

:reminder_ribbon:Set a property on a DOM instance

ap.$('<element_id>', 'propertyToSet', propertyValue)

:reminder_ribbon:Set dropdown options programmatically

// set `dropDownInstance.options.options` to params.response?.<key>
ap.$('b39100f8-45ae-41f0-a259-22e18736d690', 'options.options',  params.response?.records || []);
/**
 * set where the displayValue for each item is looked up from the bound options.options value 
 * -- signature: ap.$(dropDownId, lodash.get compatible path, jsonata expression)
 * jsonata: https://jsonata.org/
 * lodash.get: https://lodash.com/docs/4.17.15#get
 */
 ap.$('b39100f8-45ae-41f0-a259-22e18736d690', 'options.displayValue',  '$."Article(EN)"');
// set where the displayValue for each item is looked up from the bound options.options value 
ap.$('b39100f8-45ae-41f0-a259-22e18736d690', 'options.displayLabel', '$."Article(EN)"');

:reminder_ribbon:Set a HTML attribute on an element instance

// grab the DOM instance of element
const element = ap.$('dd55fdf9-3be0-4bbb-88e0-2ec5a41a1735');

// set attribute: https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute
element.setAttribute('huehuehue', 'true')

:seedling: Trigger DATASOURCE of dropdown

const dropdown = ap.$('dropdown_id');
dropdown.dispatchEvent(
    new CustomEvent('alpha-renderer:dataSource', {
        detail: { refresh: true },
    })
);

:speech_balloon: Open Dialog using custom code

const pages = await ap.pages.get();
console.log(pages)
const newPage = pages.find((el)=> [el.name](http://el.name/) == 'Page name');
ap.dialog.open({    
		page: newPage,
		height:'50',
		width: '50',
		header: 'Title'
})

:world_map: Navigate to task pages

const pages = await ap.pages.get();
console.log(pages);
const newPage = pages.find((el)=> [el.name](http://el.name/) == 'Page name');
ap.navigate({    
		page: newPage        
		pageId: newPage.pageId,        
		name: [newPage.name](http://newpage.name/)    
})

:seedling: Trigger On Table Refresh triggers programmatically

const table = ap.$('8f90e0eb-eb23-4e57-b574-5933b912cbc8');
table.dispatchEvent(
    new CustomEvent('alpha-table:on-table-refresh', {
        // For pagination pass the details as given below
        detail: {
		      pageNumber: table.pageNumber,
		      pageSize: table.rows
        },
        bubbles: true,
        composed: true,
    })
);

:seedling: Refresh data source for any alpha-element ( Table, dropdown)

window.dispatchEvent(
  // The event name should be exactly this: "alpha_element:connected_callback"
  new CustomEvent('alpha_element:connected_callback', {
   	  detail: {
	  		 element: ap.$(<id>),
		  },
    })
  );

:seedling: How to Refresh a Table After Uploading a File to DMS

Please read this document to achieve this:

https://docs.google.com/document/d/1xpKXRZ3NqQQ4YCRfoYCPuL0kuNSJibASYSutfa1gHQs/edit?usp=sharing

:ear:t3:Listen For Change Event Of All the leaves in renderer

// get the current page's renderer DOM instance
const r = document.querySelector('alpha-renderer');
// `rendererMetadata` holds a map of `id` of the renderer descendents and its metadata
// get all the element Ids into `leafs`
const leafs = Object.keys(r.rendererMetaData)
// Add `change` listener on every leaf component.
// And, in the listener callback you can add conditions to disable button or
// get any leafs value (refer above snippets) or anything and update the
// leafs properties
leafs.forEach(l => ap.$(l).addEventListener('change', (e) => console.log({ l, valid: document.querySelector('alpha-renderer').valid }, e)));
ap.$('0e470eef-cf69-434b-9ea6-5bd054ab100b', 'disabled', true);

:white_check_mark: Get renderer validity

const r = ap.$(<page-id>);
console.log(r.valid)

:counterclockwise_arrows_button: For-loop Configuration and Contextual Indexing Guide

Overview

When designing dynamic components, a for-loop is a configuration used to iterate over a given data source, which must be an array. This for-loop mechanism is used to render multiple instances of a component (Panel, Section, or Leaf) based on the number of elements in the array. During the rendering process, each instance is assigned a unique contextual index to identify its position within the array.

Mapping sources for data source

  • co
  • local

How Contextual Indexing Works

Whenever a data source is assigned to a Panel, Section, or Leaf using a for-loop, a corresponding context is created to track the current index during iteration:

  • i: Represents the index for Panels.
  • j: Represents the index for Sections.
  • k: Represents the index for Leaf.

The context indices (i, j, k) help in accessing specific elements from the data source during custom configuration and logic execution.

Contextual Index Mapping

The index mapping is structured as follows:

  • Panel: Uses the i index for each item in its data source.

  • Section: Uses the j index for each item in its nested data source.

  • Leaf: Uses the k index for each item in its nested data source.

  • Configuration guide

    • Configure a for loop on panel

      • co.users

        ["John","Dave" ]

    • Inside panel add a section and configure for-loop data source as

      • co.components

        [
  {
    field:'input'
  },
  {
    field:'date'
  }
]

    • Inside section drop a text-field and date-picker component

      • On text-field add a dependency if co.components[j].field equals ā€œinputā€ then show and set output binding variable as co.users[i]
      • On date-picker add a dependency if co.components[j].field equals ā€œdateā€ then show
      • Point to Note
        • To access a value of panelā€™s data source we used i as index to bind user as input field value
        • Similarly access a value of sectionā€™s data source we used j as index to resolve dependency for conditional rendering of leaf

Tabs

1. enableTab(tabIndex: number)

Enables a tab by setting its disabled state to false.

  • Parameters:

    • tabIndex (number): The index of the tab to enable.

  • Example:

    tabInstance.enableTab(2); // Enables the tab at index 2

2. disableTab(tabIndex: number)

Disables a tab by setting its disabled state to true.

  • Parameters:

    • tabIndex (number): The index of the tab to disable.

  • Example:

    tabInstance.disableTab(1); // Disables the tab at index 1

3. toggleVisibility(tabIndex: number)

Toggles the visibility of a tab by switching its visible property.

  • Parameters:

    • tabIndex (number): The index of the tab whose visibility is to be toggled.

  • Example:

    tabInstance.toggleVisibility(0); // Toggles the visibility of the tab at

4. setActiveTab(tabIndex: number, emitEvent: boolean = true)

Sets a tab as the active tab.

  • Parameters:

    • tabIndex (number): The index of the tab to set as active.
    • emitEvent (boolean): Optional. Whether to emit a selection event. Defaults to true.

  • Example:

    tabInstance.setActiveTab(3); // Sets the tab at index 3 as the active tab

5. setDefaultTab(tabIndex: number)

Sets a tab as the default tab (if the tab is enabled and visible).

  • Parameters:

    • tabIndex (number): The index of the tab to set as default.

  • Example:

    // Sets the tab at index 0 as the default tab
tabInstance.setDefaultTab(0);

Enquiry - change readonly state of particular component

//Page- On Init triiger
const elementInstance = ap.$('<element-id>')
elementInstance.readonly=false;
//for button , checkbox, radio-button elements
elementInstance.disabled=false;

Action on page click on case-details sidenav

const pageSidenavElement = document.querySelector("app-main-sidenav");

if (pageSidenavElement) {
  const pageContainers = pageSidenavElement.querySelectorAll(
    "div.hover\\:surface-hover.border-round-lg"
  );

  pageContainers.forEach((pageContainer) => {
    const pageLabelElement = pageContainer.querySelector("span");
    //Write custom logic on page name click on sidenav
    
    //Example: Prevent navigation on click of page - dropdown_test , 
    // instead open a dialog - document viewer
    if (span && pageLabelElement.textContent.trim() === "dropdown_test") {
      pageContainer.addEventListener(
        "click",
        async (event) => {
          event.preventDefault();
          event.stopPropagation();
          console.log("Custom logic executed for dropdown_test");

          const pages = await ap.pages.get();
          console.log(pages);
          const newPage = pages.find((el) => el.name == "document viewer");
          ap.dialog.open({
            page: newPage,
            height: "50",
            width: "50",
            header: "Title",
          });
        },
        { capture: true }
      );
    }
  });
}

:pushpin: Lifecycle hooks config for all kinds of inbox

  1. On Init:
  • Triggered when the inbox items (case and task instances) are fetched from the backend. Use this to modify the inbox data before rendering.
  • Parameters passed to the custom code:
  • data: The inbox data fetched from the backend.
  1. After View Init:
  • Triggered after the inbox items are rendered on the UI. Use this to perform any post-rendering operations.
  • Parameters passed to the custom code:
  • data: The inbox data fetched from the backend.
  • element: Reference to the DOM instance of the inbox table.

Note: All the parameters passed to the custom code can be seen by logging the params object in the console like this:

console.log(params);

:artist_palette: Style Inbox Table Cells Based On the value

  • Every cell in the inbox table can be styled based on the value of the cell using the css editor using the data- prefix
  • The format for selecting a cell is => [data-column-name="column name"][data-column-value="column value"]
  • To select one of the default inboxes use => .inbox-myTasks, .inbox-groupTasks, .inbox-teamTasks
  • To select a custom filter use => .inbox-{inbox name or custom filter name (spaces replaced with '-'s}
  • The format for selecting inbox is => .inbox-{inbox name or custom filter name (spaces replaced withs}
  • To select a column header use => .{inbox-selector} th[data-column-name="column name"]
/* .inbox-{inbox name or custom filter name (spaces replaced with `-`s} */
.inbox-My-Task [data-column-name='Age'][data-column-value='2d'] {
    background-color: red;
}

/* For enquiry inbox  */
.enquiry-inbox-Default[data-column-name='Status'][data-column-value='Pending'] {
    background-color: red;
}

/* For admin inbox  */
.admin-inbox-Default [data-column-name='Status'][data-column-value='Pending'] {
    background-color: red;
}

NOTE: You might have to use !important to override the default styles.

:bread: Show toast message programmatically

ap.toast.showToast({
  status: "success", // Toast status, e.g., 'success', 'error', 'info', or 'warn'
  title: "Title", // Title of the toast notification
  message: "message", // Message content to be displayed
});

:libra:ļøŽ Use lodash (ap._) and momentjs (ap.moment) functions in ap namespace!

Using lodash:

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 1, name: 'Alicia' }, // Duplicate id
  { id: 3, name: 'Charlie' },
  { id: 2, name: 'Bobby' } // Duplicate id
];

await alpha.local.update('uniqueUsers', ap._.uniqBy(users, 'id'));

console.log(alpha.local.get().uniqueUsers);
/*
 [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' }
]
*/

Add Custom Validation For A Form Field

ap.renderer.validations.add(leafId, keyName, functionRef, validateOnAdd);
/**
 * @param {string} leafId - The leaf id of the form field (can be copied from the attribute window header in workflow studio).
 * @param {string} keyName - The unique name for the validation function. ex. 'validateAge', 'validateCompanyMailId' etc
 * @param {function} functionRef - The callback function to be executed for validation. It will be called with the value of the form field as the first argument.
 * The function should return an object with the following structure:
 * {
 * valid: true/false, // true if the validation passes, false otherwise
 * error: 'Error message to be shown if the validation fails' // The error message to be shown if the validation fails
 * }
 * @param {boolean} validateOnAdd - If true, the validation function will be executed when the form field is added to the form and error will be shown if the validation fails.
 */

// Example:
ap.renderer.validations.add(
  "leafId",
  "validateIfAdult",
  (leafInstance) => {
    if (leafInstance.value < 18) {
      return {
        valid: false,
        error: {
          message: "Age should be greater than 18",
        },
      };
    }
    return {
      valid: true,
    };
  },
  true,
);
7 Likes
ALPHA : Need help on controlling over validation error message for input fields
Alpha related topic T2
2

Open an environment URL in new tab using custom code trigger

const redirect_url = window.environments.ALPHA_REDIRECT_SERVICE_URL + '/url/' + '<ENVIRONMENT_VARIABLE>';    
window.open(redirect_url, '_blank');

//example - Open a URL configured as 
//CASE_CONFIG_SERVICE_URL in redirect service environment
const redirect_url = window.environments.ALPHA_REDIRECT_SERVICE_URL + '/url/' + 'CASE_CONFIG_SERVICE_URL';    
window.open(redirect_url, '_blank');`
6 Likes
3

Hi @doomedCode and @gaurav.pandey am trying to create a case on the custom code but am getting an error. Tried going through these snippet codes but I couldnā€™t find the one that could really assist me. The below screenshot shows the data that is passed when creating a case when using case service as a trigger.

I tried following the same structure here is the code: ap.caseService.caseInstance.createCase({ā€˜caseTypeā€™: ā€˜pl_claimā€™, ā€˜caseDataā€™: caseData, ā€œvariablesā€: {isAppointment: false}})

Am getting the server error but I donā€™t think the issue is with our JBPM because itā€™s working for others where the case service trigger is being used then the custom code.
Can anyone please assist with this.

image
image537Ɨ501 22 KB

Thank you in advance.

2 Likes
4

Hi Simphiwe,
Could you please send the error message?

4 Likes
5

Hi @Irfan_Ali,

I was going to screenshot but I canā€™t screenshot currently as I canā€™t access the project, but I was getting ā€œInternal serverā€ error. I will send the screenshot once I am able to access the project.

Thank you

4 Likes
6

Hi @Irfan_Ali , @doomedCode and @gaurav.pandey

We are hitting the API for file upload on the custom code and it doesnā€™t show the loader anymore.
Is the a way to show a loader on a custom code after hitting a specific API ??

3 Likes
7

Can you add all missing snippets post November 2024?
Example of some which I know are moment and lodash.

4 Likes
8

Still finding this very helpful. Thanks @doomedCode @Eldho .

2 Likes
9

Hi @error_1.61 , @doomedCode , @gaurav.pandey

I am on 1.0.8 alpha version and am trying to add dropdown options programmatically.
The below code snippet is not working.
Could anyone please advice on how i can accomplish this.

// set `dropDownInstance.options.options` to params.response?.<key>
ap.$('b39100f8-45ae-41f0-a259-22e18736d690', 'options.options',  params.response?.records || []);
/**
 * set where the displayValue for each item is looked up from the bound options.options value 
 * -- signature: ap.$(dropDownId, lodash.get compatible path, jsonata expression)
 * jsonata: https://jsonata.org/
 * lodash.get: https://lodash.com/docs/4.17.15#get
 */
 ap.$('b39100f8-45ae-41f0-a259-22e18736d690', 'options.displayValue',  '$."Article(EN)"');
// set where the displayValue for each item is looked up from the bound options.options value 
ap.$('b39100f8-45ae-41f0-a259-22e18736d690', 'options.displayLabel', '$."Article(EN)"');```
1 Like