Creating SharePoint Search WebParts in Modern Page using PowerApp

Veröffentlicht am von

A customer contacted me with the request to place a search box under the page header, as is possible in a classic environment with the search WebParts. Since Microsoft still does not provide a suitable WebPart,

Normally, you would create a WebPart with SPFx. But why should not it work with PowerApps? Ok, what do I need?

  • A search box,
  • a start button,
  • and the option to display the default search results page.

And PowerApps provide all these features 🙂

The link

First, let’s have a look at what the link should look like. For this we use the standard search and search for „test“. Now, we are redirected to the search results page. We keep this link for later.

SearchLink1

SearchLink2

As you can see, the link consists of the URL to your WebPart, followed by the link to the search result page „/_layouts/15/search.aspx/siteall“ and the keyword „?=test„.

The App

Now, we create the PowerApp:

In a new App in landscape orientation we place a text box and an icon.

Canvas1

Finding the optimum size of the canvas requires some playing around. I like 500 x 150 px quite well. If you resize it after you have already placed some controls on it, you may need to adjust the size of the controls and of the font.

In the icon’s OnSelect event, we use the launch action to bring up the search results page. The link consists of the address of the search results page as well as of the value of the text field.

Canvas2

Now, the App is ready and can be shared with the whole organization.

In the last step, we only need to copy the link to the PowerApp:

Settings1

The page

Now, we edit our Modern Page and add the PowerApp WebPart. Then we paste the link to the PowerApp into the URL field.

Page1

Page2

And that’s it 🙂

Result

I hope you will find this useful.

For questions or comments feel free to contact me on Twitter via @PapaRiedel.