Showing posts with label PowerApps. Show all posts

Interactive Experience With Microsoft Search using PowerApps

Introduction

Let's understand Microsoft Search and how it works:

Microsoft Search is a secure way to search both your intranet and web content.
Microsoft Search indexes all your Microsoft 365 data to make it searchable for users. When a user executes a search, Microsoft Search pulls results from data sources in Microsoft 365, including SharePoint Online, OneDrive, Teams, Yammer, and organizational and directory service information.
Microsoft Search uses insights from the Microsoft Graph to show results that are recent and relevant to each user.

Microsoft Search BookMarks

If your organization uses a promoted results set, you can use Bookmarks to do the same. A bookmark can have several keywords and several bookmarks can share the same keyword, but a reserved keyword can't be shared. When a Bookmark is created or modified, the search index is refreshed immediately, and the bookmark is available to users immediately.

Microsoft Search Bookmarks integrated with Power Apps makes the search experience much more interactive.

Simply put, users search for a topic or keywords that are defined as keywords with the associated app. On the keyword or topic search, the user can launch the app within Microsoft Search.

Step1 - How to add/edit a bookmark

Go to the Microsoft 365 admin center.
In the navigation pane, go to Settings.
Select > Microsoft Search.
Select > Answers.
Select > Bookmarks.
To add a bookmark, select Add new. To edit a bookmark, select the bookmark in the relevant bookmark list.

Step 2 - Create a PowerApps application

i.e. Leave Request > Save -> Publish. Note down the powerapp ID to configure into Microsoft search.

Note

To get an understanding of Power Apps, visit the previous reference article here.

Step 3 - Configure the Bookmarks with Power Apps

Add Title > It will be shown in the bookmark result.
Add Url > It will navigate to a reference document or link.
Bookmark description > Add bookmark description, it will be shown the description of the bookmark.
Keywords > it used to find this page.
Reserved Keywords > It should be unique and the same used to get the result based on unique keywords
Categories > it helps to organize or group the keywords.
Get App ID for the Power App that you want to add from step no.2.

Select Power App, and then Add a Power App ID.
Height and width are automatically adjusted. Bookmarks can support both portrait and landscape orientations, but currently, the size can't be changed.

Select Publish or Save to Draft.

Step 4 - Publish the Bookmark

Once the bookmark gets published, it will start appearing as below. Bookmark gets indexed quickly and is available for use immediately. Finally, you can define keywords into the search box and a bookmark will appear with an integrated Power App link.

Same Article published here also:- https://www.c-sharpcorner.com/article/interactive-experience-with-microsoft-search/

Summary

I hope you have enjoyed and learned something new in this article. Thanks for reading and stay tuned for the next article.

Join me at Microsoft 365 Virtual Marathon, 36 hour event happening May 27-28 2020

Power Platform Evolution with AI Builder Model

Speedup digital transformation through the Power Platform and AI Builder. AI Builder provides AI templates (Binary Classification, Text Classification, Object Detection, Form Scanning) that you can tailor to easily add intelligence to your apps and processes in Power Apps and/or Microsoft Flow

Join me at Microsoft 365 Virtual Marathon, 36 hour event happening May 27-28 2020

I will be speaking about Power Platform evolution with AI Builder

Register here: https://lnkd.in/dA8vQS3 and hope to see you there!

Virtual event page: https://lnkd.in/dqZ6Ks5

🗓 Thursday, May, 28th 📺Room Mile 14 ⏱️06:30PM IST / 06:00PM PDT / 03:00 PM CEST

Build Low Code and No-Code solution i.e. Search and Sort by Column Header

Introduction

PowerApps is an enterprise service that lets you connect, create, and share business apps with your team in minutes, using any device. You can create a PowerApps for an existing list in SharePoint Online.

Let's get started on how we can create a fully functional PowerApps based on a standalone application. I am going the cover all of the steps throughout multiple articles

In this article, I am going to talk about the below points:

Configure Search
Configure Sort to column header

Previous article for reference:- (Build Low Code and No Code Solution)

Build Screen, Navigation and Connector

https://manojmittalblogs.blogspot.com/2020/03/build-low-code-and-no-code-solutions-ie.html

Build Home, View, Edit Screen with Navigation and Connector

https://manojmittalblogs.blogspot.com/2020/04/build-low-code-and-no-code-solutions-ie.html

Overview

In this article, I am going to walk through how to build a search and sort order.

Note

I have already explained the Login and Screen creation and navigation in a previous article. Refer to this for more information.

Let's get started with this article.

Step 1 - Login, Add Screen, Data Table and Connection with Datasource

Select New Screen.
A new screen will be added.
Select the data table to display the contents into list view.
Select the added data table and the middle section will appear blank.
Build Connection with SharePoint Online
Select the desired list name, which needs to display at the data source.
Data will start appearing in the selected data table:

Step 2 - Configure Search Box

The search box is not available out of the box, so we need to build it using control and formulas

Select Text Input from Text section
Expand the added text input box as per the desired length.
Select Icon to add search icon
Place the search icon within the text box to create a search box look and feel
Select the data table; i.e. datatable2
Select the Item's property and apply below formula
1. Search(FlightDetails,TextInput2.Text,"Title"

FlightDetails is datasource name
TextInput2.Text is a search box
The title is a column name, on which column search is going to apply

Step 3 - Run and Test Search

Press F5 to run the application and type the appropriate keyword in the search box. Since I have data in the title (flight name) column, and I entered 42, results start appearing.

Step 4 - Add SortIcon

To configure sort, we need to create a local variable; i.e. Column name and default value of sort order.

Select App
Select On Start Property of App
Select local variable; i.e. Title and Sort order toggle value.
1. Set(_varSortBy, "Title"); Set(SortAscending, true);
Select Icon and Select icon type Sort
Drag sort icon againt the flight name column

Step 5 - Configure Sort Icon Property

Select icon8; i.e. filter icon
Set On Select property to update the sort order, switch value against title column
1. UpdateContext({varSortPriority:"Title",SortDescending:!SortDescending})

Step 6 - Merger Search and Sort Order

Search work on the item property on the data table, as well as sort work on the item property on the datatable.

Select your database
Set the items property with below formula
1. SortByColumns(Search(FlightDetails,TextInput2.Text,"Title"),varSortPriority,If(SortDescending,Ascending,Descending))

Step 7 - Save, Publish and Test

Save the application, click file -> Save.
Click save button to save the application
Click on the publish button to publish the application and make it available to your intended audience.

Press F5 or click the published version of the app to run.

Power Apps home screen will execute like this.

Type the appropriate text into the search box. Since I applied search on the title column, to test search, I wrote the keyword "42" and the result was filtered based on the search keywords.

To apply sort, click on sort icon into the flight name column and the result will toggle into ascending and descending order as per the defined formula.

I hope you have enjoyed and learned something new in this article. Thanks for reading and stay tuned for the next article!

Build Low-Code and No-Code Solutions i.e. Home , View, Edit Screen with Navigation With PowerApps

Introduction

Let's get started on how we can create a fully functional PowerApps based on a standalone application. I am going the cover all of the steps throughout multiple articles.

Design Home Page Screen
Navigation among screen
Item List View Screen
Item Detail View Screen
Item Detail Edit Screen

Previous article for reference:- https://manojmittalblogs.blogspot.com/2020/03/build-low-code-and-no-code-solutions-ie.html

Let's get started with next steps,

Step 1 - Add a Display screen with SPO list connection.

Select and click to add a new screen
Rename the screen "Flight Display Screen"
Select and click to add a display form.
FormViewer1 will appear in the tree view and a blank canvas without datasource connection.
Select the form view canvas and click "Connect to Data"
Select the data source from the Form View Property section.

Step 2 - Design Display screen

Select DataSource as list name i.e. Flight Details.
Set the Column Layout (i.e. 2) and Layout as vertical.
Add a Label for the heading of the screen and change the text to "Flight Detail View Screen".
Add a Home icon from the Icons section to navigate to the home screen.
Add an Edit icon from the Icons section to navigate to the Edit Screen.
Add the Close icon from the Icons section to navigate to the previous screen.

Step 3 - Add Navigation for Home Icon

Select the Home icon and write a function, i.e:

Navigate(HomeScreen)  

On a click of the home icon, it will navigate to the home screen.

Step 4 - Add Navigation for Edit Icon

Select the Edit icon and it will write a function, i.e:

Navigate(FlightEditScreen)

On a click of the edit icon, it will navigate to the flight edit screen

Step 5 - Populate View Screen on Item Selection

Select FormView
Set the function for item property i.e. "DataTable1.Selected". This data table exists in the list view form. View get the selected item based on this property.
Once the item property is set, the selected item value appears in the view screen.

Step 5 - Add and Populate Edit Screen on Item Selection

Select and click to add a new screen
Rename the new screen "Flight Edit Screen"
Add an Edit from the Form Section
Add a data source from Form Property section (i.e. List Name)
Select a Form and set the item property to "DataTable1.Selected.
As the item property is set, select the item value to start appearing in the Edit screen

Step 6 - Add a Save icon functionality on the Edit Screen

Select the save icon and write a function on On Select:

SubmitForm(Form1);Navigate(FlightListView);  

It will save the data to SharePoint Online List and redirect the user to the list view screen. The user will get an updated record on the list view screen.

Step 7 - Define navigation from List View Screen

Select the Flight List View screen, followed by DataTable1

Select the first column (i.e. Flight Name)

On Select property, write the below function to navigate to the Flight Display Screen

Navigate(FlightDisplayScreen)  

Step 8 - Save , Publish and Test

Save the application, click file -> Save.
Click save button to save the application
Click the Publish button to publish the application and make it available to other intended audiences.

Press F5 or click the published version of the app to run.

The power apps home screen will execute like this and select for the click first image.

I hope that you enjoyed and learned something new in this article. Thanks for reading and stay tuned for the next article.

Build Low-Code and No-Code Solutions i.e. Home Screen, List View & Navigation With PowerApps

PowerApps is an enterprise service that lets you connect, create, and share business apps with your team in minutes, using any device. You can create PowerApps for an existing list in SharePoint Online.

Let's get started creating a fully functional PowerApps based standalone application.

Overview

In this article, I am going to talk about the first three points:

Design Home Page Screen

Navigation among screen

Item List View Screen

Step1 - Log in to PowerApps Portal

Login to https://web.powerapps.com

Select Apps

Select New app and followed by Canvas

Step 2 - Design Home Screen

Select New Screen and Click to Add

Rename the newly added screen; i.e. Home Screen

Select Label and Click to Add

Add three more label sections as added text as given in image.

Change the text with "Welcome to Admin Screen", font-weight and background color, as per your desired look and feel.

Select Media and opt for image for option, then click to add (three times)

Select any image icon and select image from right hand side properties. Set size and positioning as per your desired look and feel.

Step 3 - Add New Screen and Data Table

Add a ListView Screen, Selecta New screen and then click to add.

Rename the screen with Flight List View.

Select the Data table and click to add.

The DataTable will be available under the Flight List View Screen

The DataTable blank section will appear in the middle of the screen.

Step 4 - Connect to a data source i.e. Site URL

Enter SharePoint Online Site URL

Select Connect to get connect with the SPO site.

I have created a list in a SharePoint Online site with dummy data. Below is the screenshot for reference:

Step 5 - Connect to a data source i.e. List Name

Select List name and data will start appearing immediately into the selected database.

Step 6 - Set Navigation from Home to List View Screen

Select home screen and image

Select image into the canvas area

Select the property "On Select " from the dropdown.

Add formula to navigate to different screen

Navigate(FlightListView)

5. Once the user clicks the image, it will navigate the user to the List View Screen

Step 6 - Save, Publish and Test

Save the application, click file -> Save.

Click save button to save the application

Click on the publish button to publish the application and make it available to your intended audience.

Press F5 or click the published version of the app to run.

Power Apps home screen will execute like this.

I hope you have enjoyed and learned something new in this article. Thanks for reading and stay tuned for the next article!

Leverage Power Apps with SharePoint Framework Extension

PowerApps is an enterprise service that lets you connect, create, and share business apps with your team in minutes and help to build highly tailored application with optimize user experience. You can expedite the business solution with Power Apps as well as SharePoint Online.

Problem Statement

We are creating a solution for audit department. Audit department need to maintain the reports as well as reference document during audit process.

Blueprint approach

Let’s gets start, how we can design and implement such problem statement in optimize way.

Solution Approach

Create Library to store content and List or Library to store all reference documents.
Design SPFx extension solution to deploy at specific library, which will call Modal Dialog with Iframe.
Design Power Apps form calls the same from Modal Dialog with Iframe section.
PowerApps form then saves the data into SharePoint Online List or Library.

Prerequisites

1. Office 365 subscription

Site Collection with Admin Access & App Catalog at Site Collection level
Enable App catalog at Site Collection Level: https://docs.microsoft.com/en-us/sharepoint/dev/general-development/site-collection-app-catalog
SharePoint site i.e. Team and Communication

2. SPFX environment set up

node (version 10) – download node from https://nodejs.org/en/download/
npm (version 6)
Install yeoman and gulp using below command
npm install -g yo gulp
Install sharepoint generator
npm install -g @microsoft/generator-sharepoint
Ref document:- https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-development-environment

3. Install visual studio code for code editor - https://code.visualstudio.com/

4. Office 365 Subscription should have access to PowerApps.

Implementation approach

Step1: Create Schema

Login to SharePoint Online Teams or Communication site
Create Library with name: Audit Report
Create a List with name: Audit Reference

First, Let’s start with power apps form creation

Step 2: Navigate to PowerApps Form

Step 3: Create Canvas App

Click on ‘Canvas app from blank’.

Step 4: Power App Name

Select app name as ‘Audit Report Reference’, click ‘Create’.

Step 5: Update the app size.

Go to file from menu bar, then select settings -> click on ‘screen size + orientation’ -> select custom give width as 1024 and height as 550.

Click Apply and back button.

Step 6: Rename the Screen

Rename default Screen1 as ‘EditScreen’. Clicking on 3 dots will give option to rename.

Step7 Insert Form and Rename to Edit Form

Click on ‘insert’ from menu bar. Select ‘Edit’ form.

Rename form1 as ‘EditFrom’

Step 8: Connect to SharePoint Online Data source

Click on ‘connect to data’.

Search for SharePoint in data source options. And select SharePoint.

Type/paste your site URL, and click ‘connect’.

Select the list ‘Audit Reference’. Click ‘Connect’.

Step 9: Change Form DataSource and Form Mode

Select ‘EditForm’, and select data source as ‘Auditreference’ and default mode as ‘New’ from right pane properties.

Step 10: Populate Fields at Form

Edit form populate with fields.

Select datacardvalue of ‘Title’ field.

Step 11: Modify the default formula of Control

Change the default formula as ‘Param("Input")’

Step 12: Add Button Control and Set Navigation

Select ‘EditScreen’. Click on ‘insert ’ on menu bar. Click on button.

Button will get added to screen, rename the button as ‘Save’, in left side tree view.

Place (Drag and drop) the button below the screen,

Select the button and Change the button text as ‘Save’

Step 13: Add new screen for display message

Select ‘Insert’ in menu bar. Add new blank screen.
Rename that screen as ‘DisplayScreen’ in left side tree view.
Select displayScreen and add a label from menu bar insert option.
Rename the label as ‘DisplayMessage’.

Select label text option and give text as ‘Reference saved successfully, Please click close button to exit the window’
Select label. From menu bar select home, change the font size to 24. Alignment as center aligned.
Change the text color to blue.
Update the label position, size and padding in label properties as shown in below screenshot.

Step 14: Update Navigation

Select EditScreen. Then select ‘Save' button and update ‘OnSelect’ Property to ‘SubmitForm(EditForm);Navigate(DisplayScreen,ScreenTransition.Fade)’