web
You’re offline. This is a read only version of the page.
close
Skip to main content

Announcements

News and Announcements icon
Community site session details

Community site session details

Session Id :
Power Platform Community / Forums / Power Apps / Show 3 blue boxes insi...
Power Apps
Unanswered

Show 3 blue boxes inside SharePoint modern, where each box have a Title, Text & Clickable button

(0) ShareShare
ReportReport
Posted on by 3,514

Inside our SharePoint online modern page we want to show the following 3 blue boxes , where each box has a Title, Text & Clickable button, as follow:-

 

reg.png

 

unfortunately the above can not be achieved using the out of the box SharePoint modern web parts.. so i am thinking of building a standalone power app and embed it inside SharePoint modern page.. is this valid approach? and can i achieve the above using Power app?

 

Thanks 

Categories:
  • Gerard Simpson Profile Picture
    2,987 Moderator on at

    Hi - you could do this in Power Apps, but it is probably overkill for what you are trying to achieve. Also, every time someone opens the page, they may need to wait a second or two while the embedded app in your page loads.

     

    Would something like the following approach suffice instead, which uses a 3 column layout and the 'Call to Action' web part, which includes text and clickable button and with a text box title added on top? - you could just use solid backgrounds instead of images if you prefer; you could modify the Title colour and the clickable button could be changed subject to your chosen SharePoint theme.

     

    AmDev_0-1634949371816.png

    Hope this helps

  • johnjohn123 Profile Picture
    3,514 on at

    @AmDevbut as shown in the sample you provided, this will not mimic what i am looking for... where in your sample the text will have a black background and the title "Registration" will show outside the box....

  • Gerard Simpson Profile Picture
    2,987 Moderator on at

    Hi @johnjohn123 - I understand that you want it exactly that way.

     

    See below an app I have created that you can try/adapt on your side. I will upload a copy shortly.

     

    AmDev_0-1635008566739.png

     

  • johnjohn123 Profile Picture
    3,514 on at

    @AmDevthanks for your reply/help.. so you build this using Power App? if the answer is yes, then can you share it?

  • Gerard Simpson Profile Picture
    2,987 Moderator on at

    Hi @johnjohn123 - Please see attached .msapp file. Save it locally and then open it directly in Power Apps. 

     

    Open Power Apps and select  create and select canvas app from blank as shown...

     

    AmDev_2-1635026936192.png

     

    Then just give your new app a name, any name, doesn't matter at this stage:

    AmDev_3-1635027115993.png

     

    On the next screen select file:

    AmDev_4-1635027384912.png

     

    Select open and then browse to select the msapp on your local drive adn then select 'dont save' when prompted about unsaved changes

    AmDev_5-1635027463895.png

     

    First thing when the app opens is do a save as to the cloud.

     

    Then, you can start modifying the app - If you want to change the text contents of the controls, go to the 'Onvisible' property of 'Screen 1' as shown and just amend the text between the double quotes to suit what you want to show - youj can see here also where I have just added google as a place holder URL - you just need to swap this out as required. I am collecting this table into the Collection 'colSPOButtons' onvisible of this screen and this collection is then bound to the 'Items' property of 'Gallery1'.

    AmDev_6-1635028244191.png

     

    Once you are happy with your revised app, be sure to save and publish it. In the following screen select 'See all versions'

     

    AmDev_7-1635028708926.png  

     

    Then Select 'Details' and copy the 'App ID' (you need this to embed the app in SPO) - Note also the 'Share' button in this screen, which is how you share this app with the required users. This is something I should have mentioned which may put you off using Power Apps for this use case - you will need to share this app with all required users of the site. If users cannot access the app, they will be met with a blank permission denied type notice in your SPO site page. Also stating the obvious, but users will also need to have their powerapps licence enabled in order to access the app, I know some orgs can have power apps/automate disabled for all by default in their enterprise subs.

     

    It is possible to share the app with O365 groups (only if they have been security enabled or Azure Security groups) - If you have either of these types of groups, you can just include the group in permissions for both your site and app and just manage permission once in the group.

     

    AmDev_8-1635028904440.png

     

     

    Once you're done with all this, you can embed it in SPO. Go to your page, add the power apps web part and just paste the App ID where prompted in the top right:

     

    AmDev_9-1635029815955.png

     

    You may or may not decide to go down teh power apps route, but either way at least this will allow you to make an informed decision - you never know, you might decide to turn the whole thing into an App! 😁

     

    Hope this helps, but come back if you have any queries - Good luck!

     

     

     

  • johnjohn123 Profile Picture
    3,514 on at

    @AmDev  thanks for the detailed description,,, but which solution is more suitable Power App or using SPFX web part? any why?

    Thanks

  • Gerard Simpson Profile Picture
    2,987 Moderator on at

    Hi @johnjohn123 - this is a slightly different question and the answer is - it depends.

     

    SPFx isnt my area of expertise, but my opinion is if your org allows the use of SPFx and you can find an appropriate sample or are able to spin one up to meet your needs, then definitely go for SPFx as this is a much neater solution than an embedded Power App. If not already done so, you should get some assistance over on the SharePoint Dev community https://techcommunity.microsoft.com/t5/sharepoint-developer/bd-p/SharePointDev

     

    If SPFx isn't an option for you and you're dead set on the layout/format you had tabled, you could try the  embedded power app approach, even as a test case and see how it goes.

     

    The fall back option, which is the easiest to implement, but requires a compromise on the aesthetics is to go with out of the box SharePoint and see what you can do with the readily available web parts / change the theme to see how close you can get to your desired look.

     

    Hope this is of some help to you - Good luck

     

    (If this was helpful, please consider Accepting as Solution and giving the post a 👍 - Thank you!)

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

Season of Sharing Community Challenge Winners!

Congratulations to our community stars!

Kudos to our 2025 Community Spotlight Honorees

Expanding mentorship, skilling, and AI innovation

Leaderboard > Power Apps

#1
11manish Profile Picture

11manish 397 Super User 2026 Season 2

#2
Mohsin Ali Profile Picture

Mohsin Ali 354

#3
WarrenBelz Profile Picture

WarrenBelz 232 Most Valuable Professional

Last 30 days Overall leaderboard