Adaptive Cards (for Microsoft Outlook) Editor / Designer Tool

Adaptive Cards

Adaptive Cards are platform-agnostic snippets of UI, authored in JSON, that apps and services can openly exchange. When delivered to a specific app, the JSON is transformed into native UI that automatically adapts to its surroundings. It helps design and integrate light-weight UI for all major platforms and frameworks.

Adaptive Cards Template Editor / Builder

https://diybuilder.in/adaptive-cards-builder/templates.php

https://diybuilder.in/adaptive-cards-builder/cards.php

https://diybuilder.in/adaptive-cards-builder/forms.php

Visual editor / builder / designer tool to design adaptive cards by add / edit / delete / duplicate the card elements / components.

Short Video about the eidtor
https://www.loom.com/share/3e9ba09ab4b64a81ab665871013b646d

Need for this Adaptive Cards Builder

Existing Adaptive card designer does not have features to add / clone the forms / tabs / accordion / load templates easily in the designer.

Tech stack

Javascript / JQuery / Node JS / JSON / PHP

The process of building Adaptive Cards Visual Builder / Editor / Designer

https://diybuilder.in/adaptive-cards-builder/signup.php Editor will be used to design adaptive cards in html format and changing the container / layout / column / style properties, Editor will show the preview of the adaptivie cards json schema by parsing the html format and also the generates adaptive cards html preview. Users can also download html / json of adaptive cards.

Challenges I faced

Not all the html elements / formats / styles gets validated in the adaptive cards eco-system, so everytime when we generate new component / style properties we need to verify with the adaptive cards eco-system.

Key learnings

DOM iteration, filtering, json parsing etc,
Import/Export of adaptive cards understanding.
Parser to convert to from HTML format to Adaptive Cards JSON.

Preview of the Designer Tool

Advantages of this designer tool
1.easy dom management (duplicate/delete/move)
2.easy add content inside contanier / image set / column set etc..,
3.multiple step form
4.predefined sets
5.custom elements like tabs, accordion etc..,

Below is the preview of the Adaptive Cards Designer Tool


Preview shows both the json and html preview of the adaptive card.

Final thoughts and next steps

This Adaptive Cards Designer can be extended to be used for generating and saving the adaptive card re-usable templates.

https://diybuilder.in/adaptive-cards-builder/templates.php is the link for the adaptive card builder tool.

About me

Senior Product Developer involved in developing frontend application tools to provide solution for the client usecases.