Custom Functions for AdaptiveCards in JavaScript

[gabrielpassmann]

Hello all,

I've been trying to create a custom function in JavaScript for AdaptiveCards. See following code:

        Expression.functions.add("i18n", (args) => {
             if(args[0] !== null) {
                 let translationKey = args[0];
                 return i18nUtils().formatMessage({id: translationKey});
             } else {
                 return null;
             }
         });

Simply put, i give the function a name, pass a callback function in which I simply wanna translate a key and return its translated value. The translation on it's own works fine. But when trying to invoke this custom function, it says that "i18n" is an unknown function. I invoked this function right before the templateData gets initialized.

Funny thing is, when I search for this custom function, it is listed up along all other built-in functions.

I know there is a tutorial on how to implement this on C# but not in JavaScript. Did i do it the right way or do I need to change something?

[gaurav-simpplr]

@gabrielpassmann I'm too trying to create a custom function in Javascript for Adaptive cards. I have created the function similarly, but when I try to use it my UI schema template, I get 'Unknown function error'. Do you know how can I use my custom function in my template schema ?

[GKersten]

We were also running into issues getting custom functions to work with the Javascript SDK. I noticed it is currently not implemented in the adaptivecards-templating package. As can be seen in the Readme: https://www.npmjs.com/package/adaptivecards-templating#custom-functions

Only built-in functions are supported out of the box. We also noticed that there was an actual PR for supporting this: #6132 which is closed but never merged..

For now we worked around it by monkey patching the standardFunctions:

import { ExpressionFunctions } from 'adaptive-expressions';

import * as JsonPathPlus from './jsonPathPlus';

/**
 * Monkey-patch override for `ExpressionFunctions.standardFunctions` in `adaptive-expressions` package.
 * Adds custom functions.
 */
export function useCustomFunctions() {
  // Create a new Map based on the existing one
  const newFunctions = new Map(ExpressionFunctions.standardFunctions);

  // Add custom functions
  newFunctions.set(JsonPathPlus.Type, new JsonPathPlus.JsonPath());

  // Replace the static property (ignoring the `readonly` TS restriction)
  (ExpressionFunctions as any).standardFunctions = newFunctions;
}

in this case jsonPathPlus is custom class that extends ExpressionEvaluator as can be found by examples of the standardFunctions here: https://github.com/microsoft/botbuilder-js/blob/main/libraries/adaptive-expressions/src/builtinFunctions/jPath.ts

Still hoping that this will actually be supported at some point, but seeing there has been no activity on this for a long time this has to do for now.

[gaurav-simpplr]

Looks good! However, we've dropped support for the Adaptive Cards package and developed our own schema and DSL framework instead. This approach provides us with better control and greater flexibility.

[GKersten]

Interesting @gaurav-simpplr is this something you develop internally or you have it available open source? Would be interested to know more about it.