Adaptive Card show text input block based on choice set value - javascript

I have a card with input choice set of options a,b,others
If users selects option as "others" then an extra input text block should come below the choice set. Is this possible with "Only show when" element property
Here is my Adaptive Card JSON
{
"type": "AdaptiveCard",
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.2",
"body": [
{
"type": "Input.ChoiceSet",
"choices": [
{
"title": "a",
"value": "a"
},
{
"title": "b",
"value": "b"
},
{
"title": "c",
"value": "c"
},
{
"title": "Others",
"value": "Others"
}
],
"placeholder": "Select option"
},
{
"type": "Input.Text",
"placeholder": "Placeholder text",
"isVisible": false
},
{
"type": "ActionSet",
"actions": [
{
"type": "Action.Submit",
"title": "Submit"
}
]
}
]
}
and i'm using html with webchat-es5 javascript library for rendering the bot to a page.

All of the information you need in order to create a self-updating Adaptive Card in Web Chat using Adaptive Card extensibility can be found in this answer: BotFramework-WebChat - Adaptive Card
There are a few differences in your case that justify writing another answer:
You're using the CDN instead of the NPM package
You're using the ES5 bundle, which I'm assuming means you want this to work on IE11
You're trying to toggle visibility instead of change text
Just like in the other case, we need to define a naming schema for ourselves that we can use to identify the card elements our code needs to manipulate. I'm only using one keyword this time: "on."
{
"type": "AdaptiveCard",
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.2",
"body": [
{
"type": "Input.ChoiceSet",
"choices": [
{
"title": "a",
"value": "a"
},
{
"title": "b",
"value": "b"
},
{
"title": "c",
"value": "c"
},
{
"title": "Others",
"value": "Others"
}
],
"placeholder": "Select option",
"id": "main"
},
{
"type": "Input.Text",
"placeholder": "Placeholder text",
"isVisible": false,
"id": "on_main_Others"
},
{
"type": "ActionSet",
"actions": [
{
"type": "Action.Submit",
"title": "Submit"
}
]
}
]
}
Consider the choice set input to be our switch and the text input to be our target. The choice set input's ID is just the name we've picked for it (and all inputs should have ID's in order for the card to work anyway even if we're not using our own naming schema). The text input's ID takes the form on_<input>_<value> where <input> is the ID of our switch and <value> is the choice that makes the target visible.
Here's the code you can use to make that work (notice that it accommodates IE11 by not using any arrow functions, etc.):
AdaptiveCards.AdaptiveCard.onParseElement = function (element) {
const PREFIX_ON = 'on';
const segments = element.id && element.id.split('_');
if (segments && segments[0] == PREFIX_ON) {
const card = element.getRootElement();
const input = card.getElementById(segments[1]);
const targetValue = segments[2];
input.onValueChanged = function (sender) {
// The isVisible setter automatically updates the rendered elements
element.isVisible = (sender.value == targetValue);
};
}
};
Notice that we're accessing Adaptive Cards classes with an AdaptiveCards global variable. You may have guessed that this becomes available when you use the Adaptive Cards CDN. I need to warn you that unfortunately the latest version of the Adaptive Cards CDN is currently incompatible with the latest version of Web Chat. Adaptive Cards 2.x introduced breaking changes (which can be expected for a new major version), and Web Chat is currently using 1.2.6. To make sure your code works you should specify the version of the Adaptive Cards CDN in your HTML, and you might as well specify the version of Web Chat too in case newer versions of Web Chat come out later that break with Adaptive Cards 1.2.6.
<script crossorigin="anonymous" src="https://cdn.botframework.com/botframework-webchat/4.9.0/webchat-es5.js" ></script>
<script crossorigin="anonymous" src="https://unpkg.com/adaptivecards#1.2.6/dist/adaptivecards.js" ></script>
While it's unclear if you need to use the adaptiveCardsPackage property in Node, I'm pretty sure you do need to use it with the CDN:
WebChat.renderWebChat(
{
adaptiveCardsPackage: AdaptiveCards,
directLine: window.WebChat.createDirectLine({
secretOrToken: secretOrToken
})
},
document.getElementById('webchat')
);

Related

Search inside array using Elastic Search

I am using Elastic version 6.8, created one index into whose schema is as follow:
{
"properties": {
"title": {
"type": "text",
"fields": {
"raw": {
"type": "keyword"
}
}
},
"tags": {
"type": "keyword",
"fields": {
"raw": {
"type": "text"
}
}
}
}}
and I have added following documents into it
[{
"title": "one",
"tags": ["html", "css", "javascript"]
}, {
"title": "two",
"tags": ["java", "jsp", "servlet"]
}, {
"title": "three",
"tags": ["spring", "java"]
}, {
"title": "four",
"tags": ["react", "angular", "javascript"]
}, {
"title": "five",
"tags": ["java"]
}, {
"title": "six",
"tags": []
}]
now I have more than 10 millions document in elastic search. Now I want to search following cases:
List all tags. with unique result (using skip, limit) skip value change but limit is fixed.so here I want result like
html,
css,
javascript,
java,
jsp,
servlet,
spring,
react,
angular
Partil search inside tags, it means if I search using act then it should give result as : react this also using skip limit.
How I can get this using Elastic search query. please help me here?
You can find unique possible value by using term aggregation.
GET yourindex/_search
{
"size": 0,
"aggs": {
"all_tags": {
"terms": {
"field": "tags",
"size": 100
}
}
}
}
"size":100 Get at most 100 unique values. Default is 10. You can increase more but it will include cost. You can check more on doc.
For partial search you can use wildcard query OR you can try N-Gram Tokeninzer. Both will allow to do partial search but wildcard query will be costly. You can evaluate according to your use case.

AngularJs appending options to select box

I am new to AngularJs. I am having problem in appending options to select boxes created by javascript. Following is my code.
var inputElements = $('<div><label style="float:left;">' + i + '</label><select ng-model="object" class="form-control sel" style="width:300px; float:right; margin-right:75px;"> <option>select</option></select></div></br></br>');
var temp = $compile(inputElements)($scope);
$('#projOrder').append(temp);
$scope.object = object;
//for(var opt=0; opt<selOptLabels.length; opt++) {
$('.sel').append('<option ng-repeat="obj in object" value="'+
{{obj.value}}+'">'+{{obj.value}}+'</option>');
I am getting this error:- SyntaxError: invalid property id
Hi, I am posting json example. This is just a small part of json in my case.
"ProjectOrder": {
"Connect direct required": {
"value": "N",
"id": "STR_15523_62"
},
"Cores": {
"value": ".5",
"id": "NUM_15523_50"
},
"Permanent data in GB": {
"value": "100",
"id": "NUM_15523_56"
},
"Description": {
"value": "AZBNL azbngb",
"id": "STR_15523_2"
},
"Order Id": {
"value": "15523",
"id": "INT_15523_96"
},
"Project cost center": {
"value": "N",
"id": "STR_15523_66"
},
"Project debitor": {
"value": "N",
"id": "STR_15523_64"
},
"Project OE": {
"value": "N",
"id": "STR_15523_57"
},
"Project SITE": {
"value": "N",
"id": "STR_15523_59"
},
"Project Status": {
"value": "RFC",
"id": "STR_15523_54",
"dropdown": [
{
"value": "IW",
"label": "In Work"
},
{
"value": "RFC",
"label": "Ready for Creation"
},
{
"value": "CR",
"label": "Created"
},
{
"value": "FC",
"label": "Failed"
}
]
},
"Project Type (paas, miner)": {
"value": "paas",
"id": "STR_15523_37",
"dropdown": [
{
"value": "paas",
"label": "PaaS Project"
},
{
"value": "miner",
"label": "Miner Project"
}
]
},
"WORK data in GB": {
"value": "100",
"id": "NUM_15523_55"
}
}
Now I have to create input fields and dropdown menus(if there is a dropdown menu) with json data
You really should not be hand-constructing HTML like that. It's best if you use a template and let the template engine handle the heavy lifting.
I also noticed that you're using object as the ng-model. Instead you should have a separate variable which will hold the selected value.
Here's a better way of doing this--in an .html file:
<div ng-repeat="object in listOfObjects"
<label style="float: left">{{ $index }}</label>
<select ng-model="selectedValues[$index]" class="form-control sel"
style="width:300px; float:right; margin-right:75px;"
ng-options="obj.value for obj in object"></select>
</div>
Then in whatever controller you have set up in JavaScript:
// this will be the list of selected values
$scope.selectedValues = new Array(list.length);
// this would be the array that each `object` is part of
$scope.listOfObjects = list;
This isn't the most elegant solution, but basically what I've done is construct an array that is the same length as the list of objects. Angular templates have a special variable $index when you're in an ng-repeat which tracks the current index of the array you're looping through.
So when a user changes the selected value of the 3rd select box (index 2), $scope.selectedValues[2] would be set to the selected option.
EDIT: on transforming the JSON to an array:
var list = Object.keys(json).map(function(jsonKey) {
return {
name: jsonKey,
label: json[jsonKey].label,
value: json[jsonKey].value
};
});`
So.. there are a number of reasons why that won't work. The provided code wouldn't even work because of the template brackets that you are trying to append to your html string...
$('.sel').append('<option ng-repeat="obj in object" value="' +{{obj.value}}+'">'+{{obj.value}}+'</option>');
Is there a reason that you are trying build your markup in js?
It's also advised not to use jquery inside angular controllers. If you have jquery loaded the jQuery object is available through angular.element, otherwise angular uses jQuery light.
Rather than enumerate on the other issues here, I put together this basic example of how a select works in Angular
https://codepen.io/parallaxisjones/pen/BRKebV
Also, you should consult the angular documentation before posting questions to stack overflow. The docs provide a pretty clear example of how to use ng-repeat in a select. https://docs.angularjs.org/api/ng/directive/select
EDIT: I updated my codepen with an example of fetching JSON data with an HTTP GET request
EDIT: updated codepen with provided data example, iterating over object with (key, value) in json syntax in ng-repeat

Which json structure is better for my requirements?

I want to store links and text. The links can be of image, video or gifs. And i want to store them in order the user specifies.
Ex: img1, some text, video, img2 - This should be saved as json.
So far I have come up with 2 options:
First:
{
"content": {
"0": ["image", "image-link-here"],
"1": ["text", "this is some text here"],
"2": ["image", "2nd-image-link"],
"3": ["video", "video-link"]
}
}
Second: In this case, i can know if its image, video, gif or text by extension
{
"content": ["https://somelink.com/pic.jpg", "this is a text", "https://somelink.com/pic2.png", "https://somelink.com/vid.mp4"]
}
I need to store these in DynamoDB. So which one would be good and correct keeping in mind that I expect DB to grow?
If both these approaches are bad, please suggest the good way to do it.
You should try to make arrays where each element has the same type/structure, as it will enable better searches.
The second solution is not specific enough. As a text could end with ".jpg", you'll need a more elaborate test to determine whether it is just text or not. The text might even look a lot like a URL...
The first is better, but it is not really helpful to have numerical keys. Instead you should combine per type, and use that type as the key name, and put the actual value(s) in an array value, like this:
{
"content": {
"images": ["image-link-here", "2nd-image-link"],
"texts": ["this is some text here"],
"videos": ["video-link"]
}
}
This structure should allow for most practical searches.
As you indicated in comments that you need to know the order of each item, then I would suggest to define content as an array, where the occurrence of elements in that array represent the order of them:
{
"content": [
{ "image": "image-link-here" },
{ "text": "this is some text here" },
{ "image": "2nd-image-link" },
{ "video": "video-link" }
]
}
Or, to make each of the objects have the same properties:
{
"content": [
{ "type": "image", "value": "image-link-here" },
{ "type": "text", "value": "this is some text here" },
{ "type": "image", "value": "2nd-image-link" },
{ "type": "video", "value": "video-link" }
]
}
The choice depends on which kind of queries you intend to do.

Strongloop Loopback: Filter by id of related Model

I have a Strongloop Loopback Node.js project with some models and relations.
The problem at hand
My problem relates how to query only those Media instances that have a relation to a certain Tag id, using the Angular SDK - while not querying Tags.media (which return Tag instances), but instead making a query somehow that returns plain Media instances.
Please read below for specific information..
Spec
Basically, I have a Model Media which has many 'tags' (model Tag). Think of a image file (Media) having various EXIF tags (Tag). Here is the relation spec (this all works as expected):
Media (media.json):
{
"name": "media",
"base": "PersistedModel",
"properties": {
"id": {
"type": "string",
"id": true
}
},
"relations": {
"tags": {
"type": "hasAndBelongsToMany",
"model": "tag"
}
}
Tag (tag.json):
{
"name": "tag",
"base": "PersistedModel",
"idInjection": true,
"properties": {
"name": {
"type": "string",
"required": true
}
},
"relations": {
"medias": {
"type": "hasAndBelongsToMany",
"model": "media"
}
},
"acls": [],
"methods": []
}
Solutions
Now, I know I could do a query like this (using Angular SDK in my example, but the syntax is the same):
injector.get('Tag').find({
'filter': {
'include': 'medias',
'where': {'id': <mytagid>}
}
});
My problem with this approach is, that I receive 1 (one) Tag instance with attached Media instances. This disrupts why whole workflow as I deal only with Media instances.. i just want to filter by Tag id, not bother about Tag at all.
Bottom line
If I see the API explorer (/explorer/), the return value of GET /api/tags/<myTagID>/medias is exactly what I need - an array of Media objects - but how to query them exactly like this using the Angular SDK (lb_services)?
I had a similar problem. One recommendation is to open the lb-services.js and try to find: /tags/:id/medias or something similar. Then you will find a comment like this: // INTERNAL. Use Tags.medias() instead. Or something similar. So that is the method that you should call. Do not call the "prototype$__get....." methods.
Then just call what it says there I suppose: Tag.medias({id:})
Other suggestions:
As you said in your description Media has many Tags. So why not use just
{
"name": "media",
"base": "PersistedModel",
"properties": {
"id": {
"type": "string",
"id": true
}
},
"relations": {
"tags": {
"type": "hasMany", <---------- hasMany
"model": "tag",
"foreignKey": "tagId" <---FK name
}
}
and
for the tags just belongsTo as type.
{
"name": "tag",
"base": "PersistedModel",
"idInjection": true,
"properties": {
"name": {
"type": "string",
"required": true
}
},
"relations": {
"medias": {
"type": "belongsTo",
"model": "media",
"foreignKey": "mediaId" <---FK name
}
},
"acls": [],
"methods": []
}
But really I don't think this is the problem because you said when you request GET /api/tags/<myTagID>/medias it returns what you want.
Then, in AngularJS you can use:
Media.tags({id:<mediaId>})
for media/:id/tags
and for the other side try:
Tag.medias({id:<tagId>})
Tag.find({
filter:{
where:{mediaId: <mediaId>} <----mediaId comes from FK name
}
})
In this case both are persistent models there is no problems, I had permission problems when doing a similar thing with data that extends User type. But that is another story...
Hope this is helpful, I changed some stuff from a similar app that I am doing and hope not making so many errors when adapting to your code...

Knockout mapping not giving me access to properties

For demo purposes, I'm writing a project tracking app. Projects have tasks, people, etc and each have associated properties like title and description.
I created a select list and expected it to be populated with the title properties of each project. Instead, it's being populated with the text of a function. I assume it's because title is an observable. But I don't know how I can ask for the value...
Here is the HTML that isn't populating correctly:
<select data-bind="options: projects,
optionsText: 'title',
optionsValue: 'id',
value: selectedList.id()">
</select>
Here is the javascript with the json included (it's injected using JSON.Net in ASP.Net MVC). The format should be the same, although I tried to sanitize it, so please excuse any missing brackets.
<script type="text/javascript">
var initialData = [
{
"id": "2150980c-1033-4b20-a58b-9e5400abb651",
"title": "project1",
"description": "project 1 description",
"persons": [
{
"id": "1f6f531c-bafa-4fe8-aac8-9e5400abb65a",
"firstname": "p1_fname"
},
{
"id": "1f6f531c-bafa-4fe8-aac8-9e5400abb65a",
"firstname": "p1_fname"
}],
"tasks": [
{
"id": "1f6f531c-bafa-4fe8-aac8-9e5400abb65a",
"title": "task1"
},
{
"id": "1f6f531c-bafa-4fe8-aac8-9e5400abb65a",
"title": "task2"
}]
},
{
"id": "54d4dc7c-0928-4c05-93a2-9e5400abb6a0",
"title": "project2",
"description": "project 2 description",
"persons": [
{
"id": "1f6f531c-bafa-4fe8-aac8-9e5400abb65a",
"firstname": "p1_fname"
},
{
"id": "1f6f531c-bafa-4fe8-aac8-9e5400abb65a",
"firstname": "p1_fname"
}],
"tasks": []
}
];
var viewModel = {
projects: ko.mapping.fromJS(initialData)
};
viewModel.selectedList = {
id: ko.observable("")
};
if(viewModel.projects().length > 0)
viewModel.selectedList.id(viewModel.projects()[0].id());
ko.applyBindings(viewModel);
</script>
EDIT:
Green was right. The code is fine. I hadn't provided enough information. I was using Knockout 1.1.1 with mapping plugin 0.5. This is what caused the problem. Knockout is currently on v1.1.2. When I upgraded to 1.1.2, it worked. Good catch green. I should have checked it in fiddle first.
Note: It doesn't look like there is currently any documentation indicating the requirement to use 1.1.2.
I don't see the problem with the code. The fiddle shows the selection is correctly populated with project title: http://jsfiddle.net/greenlaw110/Tkqqb/3/

Categories