CHATBOT with PowerApps

Let's have fun with Bots:

We all know Power Virtual Agents can be used to make Chatbots within minutes, but you need to buy a whole different licensing and functionality is a bit limited. So what can we do? 

Well we can either spend money like crazy or can be a bit creative and do wonders with PowerApps. So let's start and explore PowerApps.

Create a Canvas App -

1. First we should create a canvas app and add 2 HTML Controls (one for title and other for box on which you can see the Data Table). I just added Label on top of title for text and Data table on box.

Html Control for Title-

"<div style='height:99px;width:1366px;background:linear-gradient(to right, #1f4037, #99f2c8);border-radius: 26px;box-shadow: 35px 35px 68px 0px rgba(24, 132, 10, 0.5), inset -8px -8px 16px 0px rgba(24, 132, 10, 0.6), inset 0px 11px 28px 0px rgb(255, 255, 255);'></div>"

Html Control for Box-

"<div style ='height:605px;width:680px;background: linear-gradient(to right, #4e54c8, #8f94fb);border-radius: 26px;box-shadow: 35px 35px 68px 0px rgba(156, 103, 238, 0.5), inset -8px -8px 16px 0px rgba(156, 103, 238, 0.6), inset 0px 11px 28px 0px rgb(255, 255, 255);'></div>"

2. To define background and Box shadow I use two sites. They are pretty neat if you want you can check them for these Gradients and Box shadows. (I will link them down at the end).

3. Now for the Bot image ( I honestly just downloaded the first image that appeared on the internet so you can use any of your own or can just download one).

4. Add another HTML control for the transitional text that you can see.

Html Control-

"<div style='height:99px;width:280px;background:linear-gradient(to right, #7f7fd5, #86a8e7, #91eae4);border-radius:26px;box-shadow: 35px 35px 68px 0px rgba(103, 180, 238, 0.5), inset -8px -8px 16px 0px rgba(103, 180, 238, 0.6), inset 0px 11px 28px 0px rgb(255, 255, 255);'></div>"

5. Now for a text to change with time define a table on top of this Html control and add formula to Text property of label. Also add a timer that you can just hide.

Text Property of label-

If(Timer1.Value<5000,"Hello, " & Office365Users.MyProfile().DisplayName &". How are you","Click me to ask a different question")

Here I'm using Office 365 connector to get Display name of user using the app. So if you followed along so far this is what you should get.

6. So now we need to insert a button on top of that image of bot. Now define the following OnSelect property of the button.

OnSelect Property- 

UpdateContext({clicked:!clicked});

Reset(TextInput1);Reset(TextInput2);Reset(TextInput3);Reset(TextInput4);Reset(TextInput5);Reset(TextInput6);

UpdateContext({Flowlabel:""});.

Update Context for clicked we need now rest we need later.

7. Now define the visible property of Data Table that contains the list of Common Questions as you can see. I'm Using excel as backend for this Table as well as for others. You can actually define a button below the Data Table as I did and redirect each common question to different screens like I did for HR and add relevant information that is needed for you.

Visible Property of Datatable and Search Button-

If(clicked=true,false,true)

So whenever button of bot is clicked it will become hidden.

Other Functionality-

a. Question and Answers

1.  Add Text Input. Use excel and store some questions and answers. 

2. Define a html control that will display the answer of the questions that you ask in the Text Input field.

Html Control-

"<div style='

padding:11px;

background: linear-gradient(to right, #d3cce3, #e9e4f0);

box-shadow: 35px 35px 68px 0px rgba(156, 103, 238, 0.5), inset -8px -8px 16px 0px rgba(156, 103, 238, 0.6), inset 0px 11px 28px 0px rgb(255, 255, 255);

'>"& LookUp(Table2,Lower(TextInput1.Text)=questions,answer)& " </div>"

Lookup is used to search whatever you entered in TextInput, match it with questions and show answer defined in excel file.

Visible Property of Html Control-

If(LookUp(Table2,TextInput1.Text=questions,true),true,false)

b. Google Search

1. Define another Text Input control and add a Search Icon. Make it as a Group and define Visible Property for the Group.

Visible Property-

If(TextInput1.Text="Google Search" &&clicked=true,true,false)

2. Now add OnSelect Property of Search Icon that will help in redirecting the Search to Google

OnSelect Property

Launch("https://google.com/search?q=" & TextInput2.Text)

c. Trigger a flow with Input

1. Create a new Power Automate flow or add an existing one. Change the trigger of that flow to PowerApps trigger.

2. Define Input in your trigger if you want some inputs from the trigger.

3. Here I'm using 4 Text Inputs (Name, City, Country, State) that's sending data to Power Automate and the flow is inserting data to SharePoint list.

4. Add a button too and group it with the Text Inputs. Set visible property of the group

Visible Property-

If(Lower(TextInput1.Text)="start flow" && clicked=true,true,false)

5. To the OnSelect property of button set it as follow

OnSelect Property-

Set(FlowRes,'Button->Listrowspresentinatable'.Run(TextInput3,TextInput4,TextInput5,TextInput6));

If(FlowRes.result="Flow Started",Navigate(Screen3));

I'm getting one output from flow as" result" as well. That's why I'm using the if condition. You can skip the "If" condition.

I tried to cover up all the points and all the controls used. Since there's a good amount of controls used so I'm sorry if I forgot any. Just tell me in comments if there's something missing and let me know your thoughts how you find it.

It really took a lot of efforts and quite few trials to build this.

Thanks for staying with me till here. Let me know if you think anymore functionality should be added.

Links-

1. For gradient of background

https://uigradients.com/

2. For Box-Shadow

https://hype4.academy/tools/claymorphism-generator