microsoft / microsoft/AdaptiveCards

Cannot use custom function created in Javascript Adaptive Cards in UI Template Schema.

Open
#8,876 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Area-Schema Bug
Dominant language
C#
Stars
2k
Forks
595
Avg merge
1d 19h
Merged PRs (30d)
1

Description

Target Application

For my own application

Application Operating System

Linux

Schema Version

version: "1.0"

Problem Description

I have written a custom function in Javascript for Adaptive cards. Below is an example code, how I have created it :

import { Expression } from "adaptive-expressions";

const formatOutlookDate = (args: any) => {
  const date = new Date(args[0]);
  return `Formatted Outlook Date is: ${date.toDateString()}`;
};

Expression.functions.add("formatOutlookDate", formatOutlookDate);

I'm using it my template schema as below :

{
  type: "UI Card",
  version: "1.0",
  body: [
    {
      type: "Container",
      $data: "${value}",
      items: [
        {
          type: "Container",
          items: [
            {
              type: "TextBlock",
              name: "secondary",
              color: "typeSecondary",
              text: "Outlook Calendar",
            },
            {
              type: "TextBlock",
              name: "heading5",
              weight: "bold",
              color: "typeTitleLight",

              text: "${formatOutlookDate(start.dateTime)}",
            },
          ],
        },
      ],
    },
  ],
};

const populateTemplateWithData = (schema: any, data: any) => {
  const context: ACData.IEvaluationContext = { $root: data };
  const template = new ACData.Template(schema);

  return template.expand(context);
};

Now, when I run it, it gives me error as below screenshot :
Screenshot 2024-04-18 at 12 43 22 PM

Expected Outcome

Function should work instead of giving error as 'Unknown function'

Actual Outcome

As below screenshot :

Screenshot 2024-04-18 at 12 43 22 PM
Card JSON
{
  type: "UI Card",
  version: "1.0",
  body: [
    {
      type: "Container",
      $data: "${value}",
      items: [
        {
          type: "Container",
          items: [
            {
              type: "TextBlock",
              name: "secondary",
              color: "typeSecondary",
              text: "Outlook Calendar",
            },
            {
              type: "TextBlock",
              name: "heading5",
              weight: "bold",
              color: "typeTitleLight",

              text: "${formatOutlookDate(start.dateTime)}",
            },
          ],
        },
      ],
    },
  ],
};
Repro Steps

No response

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the custom registration at Expression.functions.add and the template expansion through ACData.Template.expand. Reproduce the reported Unknown function error using the schema and function shown; done means the registered function is recognized during template expansion and the expected formatted value is produced.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.