Develop Powerapps from the Scratch - Series2/3

Hi All,

Here again with the Series 2. You can check out my previous series to contextually understand this one. Alright let’s get STARTED

Data source


Product
Title aka review Title
Review Description
Rating
Product 1
P1-Review 1
Long text…
5
Product 1
P1-Review 2
Long text…
4
Product 1
P1-Review 3
Long text…
2
Product 2
P2-Review 1
Long text…
4
Product 2
P2-Review 1
Long text…
1
Product 3
P3-Review 1
Long text…
5
Product 3
P3-Review 2
Long text…
1
Product 3
P3-Review 3
Long text…
3
Product 3
P3-Review 4
Long text…
5


Update Data source

Updated the SPList with the new column and value to support current series. Whenever modified we can refresh the data source explicitly
Adding Interaction

Add dropdown control from the ribbon





Step 1: Double click control
Step2: Rename it.

Note: This is applicable to all the controls.

let's add control for the following interaction
A.      Dropdown filtering (by Product name)
B.      Sorting(by modified date)

A.      Dropdown

Click dropdown and select “Items” in the formula box 


Run the application now


Now we need to map the list to show items base on the dropdown selection (i.e. Show list based on selected product)

Select the list 


There are couple of ways to do it let see How? & why?
  1. Filter('Reviews Demo',Product = ddlProducts.Selected.Product)
  2. Search('ReviewsDemo',ddlProducts.Selected.Product,"Product")

How?
Go to the formula bar and enter the 1st formula
Filter('Reviews Demo',Product = ddlProducts.Selected.Product)



Why?
We used “Filter” function to filter the items in the list for the better PERFORMANCE rather SCENARIO based.   Because we know the exact condition to filter out the rows from the rows. Confusing…? Okay, let’s drill down with the SQL Query example; to do the same set of filtering we   would use the below query
(i.e. select * from ReviewsDemo where Product = “Product Name”) this would give us a collection of exact matching rows or none.

When we use search function which is of generic or like type
Search('Reviews Demo',ddlProducts.Selected.Product,"Product")->SQL Query
Select * from ReviewsDemo where Product like ‘Prod%’ this would give us the match rows based on the generic input.
However we extend the convenience of search() with the below functions as needed
StartsWith()
EndsWith()

Note: SCENARIO is the key for choosing filter over search. Please refer here for more information.

B.      Sorting

Let’s see how to sort the list based on “Modified date” and will also see how to declare variables on the fly and use it across the app.

Step1: Select the Sort icon
Step2: Go to formula bar and enter the following
                UpdateContext({varSorting:!varSorting })
Step3: Now select the list (i.e. list of all reviews) and go to the formula bar then add the below
Sort(Filter('Reviews Demo', Product = ddlProducts.Selected.Result),Modified,If(varSorting, SortOrder.Descending, SortOrder.Ascending))


Remember previously we had this here


Both would return collection of items

(Optional)Step4: Add text box before “Sort icon” and add below in the text field



Step5: Run the application



Note: click below links for more information
Sorting
Update context – Basically it will refresh/update the known type. Also create the new type.

C.      Add Rating

Select first item in the list then Go to Ribbon->Insert=>Rating


Select rating control and map the “Rating” column from the data source

Select the ‘Advanced’ tab and select ‘ReadOnly’ property to true.

Show runtime value in ‘Tooltip’

D.      Show review date


 Note: Refer my earlier post for more information about HTML control.
         HTML field & Date Time formatting in powerapps


Run the app


So, in this series (2/3) we saw how add interactions to the screen and usage of frequently used controls

In the next series will see below,
1.       View detailed review
2.       Add new review with rating
3.       And…?? More!!

Series 1 link:-
                Develop Powerapps from the Scratch - Series1/3

Related Articles:
Develop Powerapps from scratch series 1
Develop Powerapps from scratch series 3
HTML field & Date Time formatting in powerapps
Create multilingual app in PowerApps

Create People picker Control in PowerApps

 Regards
Ratsub
P.S: All the above mention step/explanation are totally my point of view based on my hand-on. Those are not necessarily to be the best bet there may be alternative steps and thoughts.

Comments

Post a Comment

Enter your comments..

Popular posts from this blog

Secure When a HTTP request is received Power Automate a.k.a MS Flow

Image
Secure "When a HTTP request is received" connector in MS Flow This connector can act as the Incoming webhook and perform underling business functionality but its very important to protect it to receive payload from unknown audience. lets see the steps to secure this incoming request. Add `when a HTTP request is received as a trigger condition` Provide the required payload a per the needs (optional). change method to POST if you need to use the payload (optional) relativePath: add /{token} (required) Click the ... dots and select "settings" @equals(triggerOutputs()['relativePathParameters']['token'],'YOUR-SECRET-PASSWORD') That's it. your business logic continues... I have added the received 'token' and 'firstName' from my payload for testing. Call the webhook from postman. Replace /{token} from the URL with your secret password. Enter the required payload and click send. Notice : S
Read more

People picker Control in PowerApps

Image
With the latest PowerApps update we can do more customization to achieve more use-cases. Especially with the new "Rule" feature in PowerApps(which keeps remembers me of InfoPath form 😏) But, Then I was looking for People picker control in this latest PowerApps update. cant find any straight forward control thought. But now saw a connector called "Office365Users" then I started exploring it. How to create People picker control in PowerApps Update 1. Add  "Office365Users" data source to the app. 2.  Insert a "Combobox" from the ribbon. 3. Select "Combobox" and select 'Items' in the formula bar then enter below formula Office365Users . SearchUser ({searchTerm :  ComboBox1. Text }) 4. Then, select "Fields" from the property pane and choose "Primary text" a.k.a "Display Names" and "Search Fields". 5. Play the app and test it. The below steps applies mostly in the early st
Read more

Upload attachment to SharePoint list item using Microsoft Flow

Image
Microsoft Flow is one of the Microsoft offerings for automation. In this series will see how to upload a file to SharePoint ListItem using MSFlow Workflow for our scenario Login to Microsoft Flow site  and log in to create a new flow. Add action and Type 'Data Operations' connector. Then choose 'Data operations - Compose' action Select 'Expression' tab and enter the following to create 'ListName' variable Repeat this process for all other variables  ListName - SharePoint list name. ItemID     - SPList item ID. AttachmentContent - Actual attachment content. FileName - Attchment name. Expressions: we can read values from Query String will discuss how to pass them next article. ListName: trigger() [ 'outputs' ][ 'queries' ][ 'listname' ] ItemID: trigger() [ 'outputs' ][ 'queries' ][ 'itemid' ] At
Read more

Modern page provisioning using page template

Image
In this article let's see how to dynamically provision a modern page based on a modern page template and update its webpart properties using pnp/js in SPFx React webpart. Create a modern page template Create a page and add the webpart as per your requirements, finally save it as a template. it will be stored under the  "Templates" folder in SitePages. In the below example I have as Section=>3 Colum layout=>3 webparts. Create a page provision form component public   render ():  React . ReactElement < IDynamicPageCreaterProps > {      let   thisHandler  =  this ;      return  (        < div >          < h1 > { this . props . webpartName } </ h1 >           {           ( this . props . selectedTemplate  !=  undefined ) ?              < h4 >< i > Selected Template-  { this . props . selectedTemplate . text } </ i ></ h4 >  :              < h4 > Selcte Template in webapart property </ h4 >          }      
Read more

Approval and auto escalation with time out in Microsoft Flow

Image
Let's see how to create an Approval workflow with timeout and escalation. I have used Office 365 Custom List "item created or modified" as my trigger. Create "Supervisor Approval" Create "Escalation Approval" Specify duration in ISO 8601 format. refer here for more time-out formatting. "Escalation Approval" would trigger only after the "Supervisor Approval timeout" Final Flow -Ratsub
Read more

Developing custom reusable components in PowerApps

Image
I am very excited to see the latest PowerApps Experimental preview feature  for canvas based PowerApps development & its capabilities. It provides you with the ability to increase your productivity and re-use the same component on all available layouts.  Design & develop it once reuse the component across layouts within PowerApps. How to enable the experimental feature in PowerApps? Step1 - Go to File->App Settings. Step2 - Select Advanced Settings-> Experimental feature->Enable Components The above feature is not listed; then possibly your are not created developer preview environment. Follow these official MSDN instructions . Also, it's important to understand the  Preview & Experimental feature . Create Carousel reusable component in PowerApps Step 1- Click add "New component. Step 2- Add all necessary controls             -> Image control.             -> Label control to show text.             -> Timer to switch slides.
Read more

Headless-Daemon calling AAD secured API

Image
In AAD series of articles, we will see how to call the AAD protected secure API from a headless (or) console application and its authentication flows and scenarios. In the previous article, we have seen how to register an app in aad . I recommend you to read to get familiar with the app registration concept. How to call the AAD protected secure API from a headless (or) console application For these types of non-interactive clients, we can use 2 types of authentication flows for different scenarios.    - client_credentials_grant    - username/password The above grant types allow clients to authenticate silently without any user interaction. oAuth 2.0  client_credentials_grant Authentication is done bas ed on the valid "Client Secret" used, so this is available only for the "WebApp Type" app registrations. and copy the below information from the respective app registration for later use.      - ClientID: Client App's AplicationID.      - ClientSe
Read more

Step-By-Step Azure AD App Registration

Image
Enterprise developers and software-as-a-service (SaaS) providers can develop commercial cloud services or line-of-business applications, that can be integrated with Azure Active Directory (Azure AD) to provide secure sign-in and authorization for their services. To integrate an application or service with Azure AD, a developer must first register the application with Azure AD. Any application that wants to use the capabilities of Azure AD must first be registered in an Azure AD tenant. This registration process involves giving Azure AD details about your application, such as the URL where it’s located, the URL to send replies after a user is authenticated, the URI that identifies the app, and so on.  In the upcoming series of articles will see different 'grant_type' and which one to use for what scenario? how to use in Daemon-Headless-App calling secure WebAPI - client_credentials/password_credentials how to use in Windows-Forms-App calling secure WebAPI - code_credentia
Read more

HTML field & Date Time formatting in powerapps

Image
Hi All, When i dig around powerapps found an interesting control called HTML field. the potential of this control is enormous based on the scenario lets see couple of examples. 1. Formatting Datetime Go to insert -> Text=>HTML Text Insert the control in the list view Add the below in the formula box Concatenate(" < div style = 'height:100%;width:100%;padding:1px;background-color: #418bca;border-right: 1px solid #fff;float:left;' > < div style = 'position: relative;text-align: center;color: #fff;font-size:20px;padding:0px 3px;' > ",Text(DateTimeValue(Text(Modified)),"dd")," < h4 style = 'margin: 5px 0 0 0;color: #fff;text-align: center;' > ",Upper(Text(DateTimeValue(Text(Modified)),"mmm-yy"))," </ h4 > </ div > ") i.e. Concatenate(" < html > ",Text(DateTimeValue(Text(Modified)),"dd")," < html > ")  Output Note :
Read more

REST call returns XML instead of JSON in SharePoint

Image
Hi All, enforce REST call to return JSON format instead of #document(XML). $.ajax({         url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/currentuser",         type: "GET",         contentType : "application/json",         headers: { "Accept": "application/json; odata=verbose" },             success: function (data) {                     console.log(data);             custUser = data.d;         },         error: function (error) {             alert(JSON.stringify(error));         }     }); we would get the problematic output like below: add the these lines in "beforeSend" method $.ajax({         url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/currentuser",         type: "GET",         contentType : "application/json",         headers: { "Accept": "application/json; odata=verbose" },         beforeSend: function (XMLHttpRequest) {  
Read more