How do I disable/hide adaptive cards/action buttons without using redux middleware? - adaptive-cards

I'm building chatbot leveraging Bot Framework Composer(C# bot). According to the specifications, we created a react-app and integrated bot into it with the help of a DirectLine token. We want to disable the card/action button from WebChat after the adaptive card is rendered, so the user cannot click on the action button again. Is there a way to disable or hide the adaptive card after a single use?

You will get the following class to all the buttons which are loaded in adaptive cards which are under li element for each message:
.ac-actionSet .ac-pushButton
You have to do some logic in javascript or react based on this class and hide previous li elements buttons except current li element.

Related

How to link a button in one component to a div in anotherr component in reactjs app?

I am building a reactjs app which has a few components in it
(a navbar, a hero section,a form, and footer)
i want that when clicked on a button in navbar it scrolls down to form i.e another component,
I tried using react-router but it only renders that form and need it to scroll down to form keeping other components in place.
How can i achieve this?
basically this but in react
I think you may be able to achieve this by using vanilla Javascript like this:
<button
onclick="document.getElementById('idOfForm').scrollIntoView()">
</button>

ReactJS: Image Selector

I am new to ReactJS ,I am developing a application where we display a List of Images from web and User can select an image,enter some details and submit this image to Backend application. I am looking for React Component (possibly from Material UI -https://material-ui-1dab0.firebaseapp.com/demos/grid-list/) where I can display a list of image and when clicking a image it show it as selected.I am looking something like Image Picker in Jquery (https://rvera.github.io/image-picker/).
Thanks!
react-image-picker npm package.
There are also several react-native specific packages if your target platform is mobile.

Adding text and radio inputs to alert controller ionic

I’m looking to create a pop up where by the user inputs data, then select one of two radio options by the UI seems to screw up when I have a combination of both text type and radio type in a pop-up.
Here is my code:
I was also looking for same thing today.
But look at this discussion, which says mixing of radio, checkbox or text box is not available right now.
I also tried to add mixture of radio and text field in alert. But styling never appeared correct.
I am moving on to implement this feature using a ionic page so that I can use Ionic Modal. This behaves as a modal window on large screen and as pushed page in smaller screen.
I needed to send back data from parent page to child page and other way too. Thus Ionic Modal suited best for this in my situation which can be used on component/page.
Refert to this detailed usage instructions for Ionic Modal.
Same feature has been requested from Ionic team.

flyout should not hide when the user taps/clicks in metro app

In my metro style app (windows 8) I have created an page overlay and a flyout displaying an message. When the user clicks on the page the flyout message goes to hidden. But I want flyout to remain even when the user clicks on the overlay page. I am using HTML5 and WinJS.
Is there anyway I can achieve the above scenario using someother control or can I prevent the page to stop reacting to events when the user taps/clicks on the screen.
This is not really supported -- the Flyout itself doesn't have the concept of being persistent/sticky/modal. If you look at the code in base.js, you'll see that it doesn't expose any code to leverage the inbuilt sticky behavior that is used in the appbar (which is kinda of flyout, it turns out.
There are a couple things you can do:
Pass "_sticky: true" to the constructor of the flyout. e.g <div data-win-control="WinJS.UI.Flyout" data-win-options="{ _sticky: true}">
Attach a click handler to the top of the document, and if it's on the click eating div that the flyout creates, cancel the event
Create your own UI by simply adding a new div to the body, and absolute positioning it.

Dynamic Elements in JSP?

I am wondering how to create dynamic elements in a JSP webpage? For example, what I want to do is that I have a Selection Box, in which a user selects an image. Upon clicking a button (or possibly after selecting an item), the image will 'slide down' (like how PPT slides slide down when changing slides) and rest on the center of the screen.
Or at least another simpler case would be, when clicking a button, a text box will appear each time you click the button. So far, the only idea I have of this is by using visibility but that will limit me.
Can you help me on how to do these things or if it is possible to do these with only JSP? Additionally, is it possible for elements to 'pop up' (like in facebook photo viewer) without refreshing the page?
Thank you!
You want things to happen on the client, so you need to be focusing on the HTML, CSS and JavaScript. The fact you generate the HTML using JSP is irrelevant.
Build on things that work
Write JS logic for adding new content based on the form options
Write JS logic for manipulating the CSS to do the animation
Consider using a library such as YUI or jQuery to help with the JS, and using CSS 3 Transitions for the animation.