Does Adaptive Cards Templating work in Composer? - adaptive-cards

I want to add buttons to an Adaptive Card like so:
"actions": [
{
"$data": "${collection}",
"type": "Action.Submit",
"title": "${prop1}",
"data": {
"value": "${prop2}"
}
}
],
That works fine in https://adaptivecards.io/designer/
But in an .lg in Composer it doesn't.
For this to work:
"$data": "${collection}",
I need to remove the quoutes around ${collection}.
But then there's no way for me to make work the prop1 and prop2 display for each item. When you declare an element with an array in the $data field, then the element should get repeated and then the binded properties would belong to each element of the array. That's not happening either.
I'm starting to think that Composer doesn't support templating and I'd need to replace the values and do a map with the lg syntax.

Short answer: no
Bots need to explicitly "expand" templates by applying data to them with the Adaptive Cards templating library. The Composer source code never mentions Adaptive Cards, and the only mention of Adaptive Cards in the entire Bot Builder .NET SDK is where attachment content is recognized as an Adaptive Card so the correct content type can be applied. Neither Composer nor Bot Builder even have a dependency on the Adaptive Cards SDK, let alone the Adaptive Cards templating library.
Some form of this question has been asked a few times on GitHub already:
https://github.com/microsoft/BotFramework-Composer/issues/3798
https://github.com/microsoft/BotFramework-Composer/issues/3422
https://github.com/microsoft/BotFramework-Composer/issues/2129
You have a few options:
Use the built-in data binding capabilities of Bot Framework LG as described in those GitHub issues, instead of relying on Adaptive Cards templating
Export the Composer runtime so you can add features to it like you would with a normal bot
Make an official feature request asking the Composer team to incorporate Adaptive Cards templating into Composer

Related

send POST from action.submit in Teams

here's a newb question. I created an adaptive-card for use in outlook that has an action.http that sends a POST to a webhook url with a single variable entered by the user, which is an email address. This is working great, now i want to use that to send the same message to the user in Teams and as a notification in Windows. I am using Flow and selected the "Post your own adaptive card as the Flow bot to a user". I then entered my json code that i used for the adaptive card for outlook but it doesnt work. So I would assume since the action.http seems to only be available for outlook that I have to change that action for teams to be an action.submit, but then im stuck, where is it submitting to? how do i have it do a POST to my webhook url with the variable data entered by the user?
I did make sure i have the flow bot added to teams and logged in and approved for use for my user for testing. I have also added App Studio to teams and then used it's "card editor" to tweak and practice with the code for the adaptive-card in Teams. I changed my action to be action.submit and finally got a button to appear in the card in Teams but i dont know how to deliver the data which should be the email the user enters, "{\"email\":\"{{email.value}}\"}" to a url using a POST. I dont know what happens when they hit the action.submit button. I have also scoured the internet and microsoft docs for a better understanding but there are no examples of this that I have been able to find.
I used this in the original Adaptive.Card for outlook
{
"type": "ActionSet",
"horizontalAlignment": "Center",
"actions": [
{
"type": "Action.Http",
"title": "Button Text",
"method": "POST",
"body": "{\"email\":\"{{email.value}}\"}",
"url": "mywebhookurl"
}
You are correct that Action.Http is currently not supported in non-Outlook Adaptive Cards. Therefore, you currently have no way of using a Teams Adaptive card to reach your webhook URL.
Action.Submit is generally meant to go to a bot. In this case, it would be Flow, but this isn't currently supported in Flow.
Thankfully,
The fully-custom / interactive card is a scenario we have on our radar.
So unfortunately, you're not doing anything wrong. It just isn't supported yet. I'd imagine that this is why the "Post your own adaptive card..." flow is still in preview:

Best solutions for multi-language website

I'm currently having a regular HTML website in multiple languages. I've tried something with PHP, but that didn't turned out very well. What I need is a Multi language site without:
- Subdomains (like en.domain.tld)
- Paths (like domain.tld/en)
What I do need:
- Languages that are stored in sessions/cookies
- Languages which can be used around the whole site (with one place to store the language files, if that's necessary)
- Preferably without visible indications in the URL (like ?lang=en).
A bit like how Google does it, because I also have multiple TLDs, so the user shouldn't be required to change their language by visiting another domain like .de, if they set their language to English from the .com site.
What is the best solution for this? I'm also very new to making websites, so that's why I'm asking.
What i prefer to do is
Create a localization directory at the top level of your app
index.html
app.js
localization/
Inside localization directory create two files
web-en.json
{
"title":"Hello world",
"desc":"languages are fun"
}
web-es.json
{
"title":"Hola Mundo",
"desc":"idiomas son divertidos"
}
Install this library "jquery-localize": "https://github.com/coderifous/jquery-localize.git"
bower install jquery-localize
Include the library
Add the attributes to your HTML tags
Hello World will go here
Translated desc will replace this text
Call the library onReady
$(function(){
$("[data-localize]").localize("localization/web");
};
Yes it's possible to translate a website and save its selected language across the whole website without changing the URL.
You can use Cloud Translation, it's a free and open-source project from Angry Monkey Cloud: https://github.com/angrymonkeycloud/CloudTranslation.
You should add a reference to jQuery first, then to the CloudTranslation JavaScript file:
<script crossorigin="anonymous" src="https://cdn.amcapi.com/translation/cloudtranslation-1.0.0.min.js"></script>
And add the configuration within the HTML head as follows:
<script type="application/json" id="CloudTranslationConfig">
{
"Settings": {
"DefaultLanguage": "en",
"UrlLanguageLocation": "", // Keep empty
"TranslatorProvider": "Azure", // Could be empty if you want to provide the translations manually
"TranslatorProviderKey": "{Your Microsoft Azure Translator Key}",
"UrlLanguageLocation": "Subdirectory"
},
"Languages": [
{
"Code": "en",
"DisplayName": "English"
},
{
"Code": "de",
"DisplayName": "Deutsch"
}
]
}
</script>
and add your own custom select (dropdown) having the class "CloudTranslationSelect" to display the list of predefined languages.
More information found on https://www.angrymonkeycloud.com/translation

Generate page url rather than data id with JSON in Umbraco

(Please bare in mind that I am new to Umbraco and JSON!)
In Umbraco, I'm looking to use JSON (alongside HTML and CSS) to turn grid cells into buttons. So far I've accomplished this using the below code (generated from an amalgamation of different tutorials/guides), but this is generating urls which end with the numerical data-id of the page. E.g. www.mywebsite.com/0000/. This works as a link and goes to the correct place, but I'd much rather it generated a URL with the correct name? I.e. something more like www.mywebsite.com/page-name/.
How can this be done?
{
"label": "destination",
"description": "Choose destination",
"view": "treepicker",
"key": "class=\"button\"><a class=\"buttonLink\" href",
"applyTo": "cell"
}
]
If you are using Umbraco, then you can easily get the URL or URlName of the page you are on.
IPublishedContent has all these properties and you can inherit this interface to your class to access these.
Thanks

What is best practice for web input control to gather multiple strings?

I am looking to add to a web form the ability for users to enter mutiple strings. It should work like the tags input to new questions on stackoverflow.
Is there a smaple on teh web of such a UI control for asp.net?
Or is there another solution for accepting multiple tags (of text/ strings) in a nice neet ui control?
(I didnt find anything usefull in the HTML5 set of controls.)
NOTE: for use with a asp.net web form (post backs) application
I think TextExt plugin is best for you. very handly and useful.
TextExt Plugin for jQuery
TextExt is a plugin for jQuery which is designed to provide
functionality such as tag input and autocomplete.
The core design principle behind TextExt is modularity and
extensibility. Each piece of functionality is separated from the main
core and can act individually or together with other plugins.
Features:
Tags
Autocomplete
AJAX loading
Placeholder text
Arrow
… and much more!
How To Use:
The steps to using TextExt are as follows:
Specify which plugins you need via the plugins option
Configure each plugin individually if necessary
Enjoy!
<script type="text/javascript">
$('#textarea').textext({
plugins : 'tags prompt focus autocomplete ajax arrow',
tagsItems : [ 'Basic', 'JavaScript', 'PHP', 'Scala' ],
prompt : 'Add one...',
ajax : {
url : '/manual/examples/data.json',
dataType : 'json',
cacheResults : true
}
});
</script>

property rootNode in struts2-jquery-tree-plugin doesn't run

I'm testing struts2 jquery-grid-tree plugin but when I render a tree whose info come from an action in JSON format, I have some troubles.
As I want more info from my action for another purposes, my action return not only tree nodes info, but other regarding as operation ACK, and so on...
That's an example of my action result:
{"JSON":"success", "nodes":[{id":"001", "children":null,"data":{"title":"First element "}, "icon" : null,....
So in my tree tag I try to tell the plugin to retrieve info from "nodes" property inside the action's response using "rootNode" property, in this way:
<sjt:tree
href="%{testJSONTreeAction}"
id="testTreeWithCheckbox"
rootNode="nodes"
childCollectionProperty="children"
....
but it doesn't work.
The only way it runs fine is if my response returns just the info about my tree as follows:
[{"attr":{"id":"001"},"children":null,"data":{"title":"First element"}...
I means, just the node information.
Of course I could manage formatting the response as above, but I wonder what is this attribute for. Other tags like grid tags has an attribute for this (gridModel) and works fine, but I can't find it in tree tags docs.
I've seen some related bugs like here but they are regarding old versions and I'm trying the last release of the plugin, 3.5.1.
Thanks in advance,