How to extend \ change \ customize the look and feel of AdaptiveCards? - javascript

We were able to release a working bot chat app within out company and all is good. But our UX team wants to make it look even better. I understand that there is a botchat.css which is part of the webChat component and we have made required changes to make it look as per the branding. But they have a few specific requirement.
for example, when there are more than 4 cards, we show it as carousel. UX team, wants to change this behavior and display 4 tiles. Out of which, first 3 tiles will be thumbnails and then 4th one will be "number" of remaining cards. (just like FB or What's App shows, when it has more pictures to show). Then when the user clicks on this 4th tile, it will open up a different screen/popup and show all the cards as list with a back button.
I understand that I probably dig around and find a way to do this through C# code and create columnSets and put these images as explained above, with help of adaptiveCards.io site. With the help of those samples we were able to deliver the first version of our app and was very helpful.
What I am looking for is some high level opinion about what options we have to customize the look and feel of the client.
How about HostConfig? is it even an option?
thanks

Related

Javascript save/restore Widgets on several clients

i plan to implement a webapp that allows users to add widgets that are predefined by me in something like a menu (e.g. two buttons and a card with some content) to something like a canvas.
I then want to save this layout so it can be later restored on the same device as well as on an other device.
There should also be a fast way of deciding on one device to add one widget to a layout that is shown on another device right now. This addition i made from one device should be visible on the other device instantely.
I thought about how to do this but am unsure, I saw some stuff about saving it in databases or in json format like in this example with react https://www.storyblok.com/tp/react-dynamic-component-from-json.
As I am a beginner, I with vue.js as well as json etc I am quite unsure on how to decide how to implement such a functionality.
For example with a database/json file I am unsure on how the other device will receive that something was added by another device.
I am glad on any tips or suggestions.

create personalised videos based on user values

I'll do my best to explain my question clearly so apologies if it isn't crystal clear.
What I want to know (if it's possible) is how you would create a generic video, and somehow pass variables into some form of method, that would turn the video into a personalized video for the user based on their details. A good example of this is the Facebook videos that pop up every now and again saying "Hey, you've been friends with this person for x number of years! here's a video!" then the video is maybe 30 seconds of details about the friendship.
I can't imagine Facebook manually create those videos for billions of users, and that is my question, How is this done?
I'm looking at building an android app and potentially IOS as well.
Any help or pointers in the right direction would be greatly appreciated!
Thanks in advance
Facebook knows who your friends are and has access to both timelines and may look for tags or optical recognition to collect together a bunch of photos.
You can then put together process like a slideshow with variable text holders, the kind of thing you can find as an after effects template that will then output a video. There are a number of services who will do this for you too.
https://spark.adobe.com/make/slideshow-maker/
Animoto is another. If you look more in this direction I am sure you will be able to learn more about how it's done or find a third party who will do it for you.
You may find this the answer you are looking for: Javascript - Adding Full Screen Video to Image Slideshow

How to create styled boxes on a webpage in where I can add graphs,gaugs,numbers?

I'm creating a 1 page dashboard that will run fullscreen on a monitor on which I want to display some graphs. I made the graphs already all I need now is a proper template for the page. I was thinking something like this
I really dig the look but I'm clueless on how to make something like this using presumably css/js. Especially the lines in the background and a titlebox.
First of all, you have to code all of the man div-containers including your graphs and data-visuals. For that, a css-framework could help you managing the different views for all devices (http://getbootstrap.com/).
Later on, you could add inner divs for the title box and the background. Also get yourself some inspiration. For example: this is the admin-theme I am using for my actual project: http://admindesigns.com/framework/dashboard.html
After digging into that, you may ask some deeper questions about styling your Dashboard, so it's easier for us to respond to an actual problem ;)
Cheers,
Chris

Retrieving post titles and links of a specific blog

i want to make a personalized blog archive to be displayed in a widget. So is there a way to get all the post titles and links for a particular blog? Preferable with ascending date.
Even better would be to make it possible to group posts some way. Say i have a topic that is divided into 3 posts. The viewer sees the topic in the side bar and when he clicks it the other parts are visible. This makes browsing a lot easier. Right now i have this hierarchical list that comes standard with blogger. It is a mess, it would be much better if i could group my blogs like described.
I do not want to invent the wheel, but my searches did not yield any results on existing widgets or how to develop something like this.
Example:
I blog about gadgets so the blogs for phones i label or catagorize as "phones". A list like this should be shown.
-Phones(4) <-click to expand
-Iphone 2
-Iphone 3
-Samsung galaxy S (part 1)
-Samsung galaxy S (Part 2)
Right now if i use labels all the content of the label is being shown. I just want individual blogs to show up.
I guess i have to settle with my own javascript plugin and edit it each time i post something new.

javascript code to populate image links on web page

I'm not sure if javascript is the best solution but here's what i want to achieve.
The web page is divided in 3 columns...
The left column should have links in picture format like Arts, History, Science etc
Clicking on any of these link should generate a series of links in the rightmost column say clicking on history should generate links for Civilization, World war etc Science should generate links like Physics chemistry represented by pictures etc and so on
Finally Clicking on these links say World war should display the content in the central column giving a brief history on World war....
Also each time a user clicks on an image link say Science it should get highlighted so the user can navigate easily from one topic to another.
I'm a novice to programming, not sure if javascript is the best approach. Also I'm very confused as to how to go about this problem where to begin and how. Any help in terms of code chunks or references or algorithms or advice on how to approach this problem would be most appreciated. If solving this problem means learning a new programming language i'm open to try.....
In case if i'm not clear in explaining the problem let me know
JavaScript would be appropriate for this. The appropriate approach will depend on how much content you have.
If it's reasonably short, you can achieve all of this by simply changing the display property on your elements (use JavaScript to set the CSS of certain page elements to show (display:block) or to hide (display:none).
If you have pages of text, you may want to look into Ajax. It is a bit more advanced that simply showing and hiding elements that are already there.

Categories

Resources