Adaptive Cards (for Microsoft Outlook), Adaptive Card Forms and Adaptive Card Templates, Visual Builder / 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 Adaptive Card Tool
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.
