Unable to render cards in Node.js environments

[rcasto]

It seems cards cannot be rendered in Node.js environments. The following runkit demonstrates this:
https://runkit.com/rcasto/adaptive-card-nodejs
In the second example you can see the browser globals (window, document, HTMLElement) patched with jsdom. Ideally the adaptivecards library would not reference browser globals such as document, and window directly and would use jsdom or an equivalent as a substitute for them in Node.js environments.

[ghost]

Hi @rcasto. We have acknowledged this issue report. Please continue to follow this issue for updates/progress/questions.

[pauljereb]

I also stumbled over this issue when trying to implement a JS-based Azure Function rendering adaptive cards to HTML.

Using the jsdom-trick that @rcasto thankfully mentioned, I was able to generally "make it work", but it seems TextBlocks are not rendered:

the AdaptiveCard

{
    "type": "AdaptiveCard",
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.0",
    "hideOriginalBody": true,
    "body": [
        {
            "type": "TextBlock",
            "text": "Hello World!",
            "wrap": true
        }
    ]
}

renders to

<div class="ac-container ac-adaptiveCard" style="display: flex; flex-direction: column; justify-content: flex-start; box-sizing: border-box; flex: 0 0 auto; padding: 20px 20px 20px 20px; margin: 0px 0px 0px 0px; background-color: rgb(255, 255, 255); border: 1px solid #ffffff;" tabindex="0">
  <div class="ac-textBlock" style="overflow: hidden; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 14px; color: rgb(51, 51, 51); font-weight: 400; text-align: left; line-height: 18.62px; word-wrap: break-word; box-sizing: border-box; flex: 0 0 auto;">
  </div>
</div>

but without the "Hello World!".

Interestingly, also when taking @rcasto second snippet from runkit and running it local it doesn't include the TextBlock.

The same issue is described on the following post
https://stackoverflow.com/questions/62465633/backend-nodejs-adaptivecard-json-to-html-parser

[jonmill]

This is not currently a supported scenario; the JS library is designed to work in a browser and not backend environments. That being said, if there is a desire to help make this scenario possible then we're very much open to a community PR to help us make both of these scenarios possible.

[QingpingMeng]

I know this issue has been closed for a while, but I just want let you know text in TextBox is rendered as innerText of an HtmlElement by adaptive card lib. If you use jsdom to mimic the dom environment, innerText is not supported by jsdom as innerText requires a browser engine to layout but apparently jsdom doesn't have any browser engine and they are not willing to support it.

The solution is also simple, just to extends the TextBox element to set textContent:

class CustomTextBox extends AdaptiveCards.TextBlock{
    overrideInternalRender() {
      var element = super.overrideInternalRender();
      element.textContent = element.innerText;

      return element;
    }
}

AdaptiveCards.GlobalRegistry.elements.register("TextBlock", CustomTextBox);

@rcasto @pauljereb FYI.