Skip to content

New TileGallery Power Apps Sample #107

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

New TileGallery Power Apps Sample #107

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 50 additions & 0 deletions power-apps/tile-gallery/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
# Power Apps (YAML) Snippet

This snippet shows a tile like gallery screen. You can use that screen as a homescreen for example and navigate from there to different screens. The screen is fully responsive

## Authors


Snippet|Author(s)
--------|---------
Markus Franz | [Github](https://github.com/Mmbr1606) ([LinkedIN](https://www.linkedin.com/in/markus-franz-435759278/) )

## Minimal path to awesome

1. Open your canvas app in **Power Apps**
1. Copy the contents of the **[YAML-file](./source/X.yaml)**
1. Right click on the screen where you want to add the snippet and select "Paste"


After you copied the Yaml to your screen make sure to turn the scale to fit setting off, so you can enjoy the full responsiveness.

In the Items Property set the right values for the table.
Following is a sample code of what i used in a different app:

[
{
Title: "Word",
Image: 'ms-word-svgrepo-com',
Screen: GalleryScreen
},
{
Title: "Excel",
Image: 'ms-excel-svgrepo-com',
Screen: GalleryScreen

}]

If you want more or less items in the gallery simply add or remove records from the table.

For the button OnSelect property (that is inserted over the image of the gallery) set it to: Navigate(ThisItem.Screen).

To show the respective images upload them to your app. Once you uploaded the images make sure to pick the right ones in your table (Items property of the gallery like shown above example: 'ms-excel-svgrepo-com'). Once you did that you can simply use ThisItem.Image in the Image property of your gallery control.

Also change the Text in the Text property of the labels in the header. I used the name of the app in the left one and the Name of the logged in user with User().FullName in the right one.

## Disclaimer

**THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**


<img src="https://m365-visitor-stats.azurewebsites.net/powerplatform-snippets/power-apps/tile-gallery" aria-hidden="true" />
3 changes: 3 additions & 0 deletions power-apps/tile-gallery/assets/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
## Assets

In the assets folder, you can add images that you want to include in your README.md.
Binary file added power-apps/tile-gallery/assets/componentPaste.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added power-apps/tile-gallery/assets/componentstab.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added power-apps/tile-gallery/assets/paste.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added power-apps/tile-gallery/assets/tilegallery.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions power-apps/tile-gallery/source/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
## Source

In the source folder, you can add your source file (the YAML code you copied from Power Apps). Make sure to add that as `snippet-name.pa.yaml`.
192 changes: 192 additions & 0 deletions power-apps/tile-gallery/source/tilegallery.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,192 @@
Screens:
HomeScreen_3:
Properties:
LoadingSpinnerColor: =RGBA(56, 96, 178, 1)
OnVisible: |+
=Set(
Formvisible,
false
);


Children:
- Main Container_3:
Control: GroupContainer@1.3.0
Variant: AutoLayout
Properties:
Height: =Parent.Height
LayoutAlignItems: =LayoutAlignItems.Stretch
LayoutDirection: =LayoutDirection.Vertical
LayoutJustifyContent: =LayoutJustifyContent.SpaceBetween
Width: =Parent.Width
Children:
- Header Container_3:
Control: GroupContainer@1.3.0
Variant: AutoLayout
Properties:
AlignInContainer: =AlignInContainer.SetByContainer
Fill: =Color.SkyBlue
FillPortions: =0
Height: =80
LayoutDirection: =LayoutDirection.Horizontal
Y: =30
Children:
- Label1_3:
Control: Label@2.5.1
Properties:
Align: =Align.Justify
AlignInContainer: =AlignInContainer.Center
BorderColor: =RGBA(0, 18, 107, 1)
Color: =RGBA(255, 255, 255, 1)
FillPortions: =1
Font: =Font.'Open Sans'
Height: =Parent.Height
PaddingRight: =20
Size: =Switch(HomeScreen_3.Size,4,30,3,20,2,15,1,10)
Text: =" Your Text here"
Width: =600
- Label2_3:
Control: Label@2.5.1
Properties:
Align: =Align.Right
BorderColor: =RGBA(0, 18, 107, 1)
Color: =RGBA(255, 255, 255, 1)
FillPortions: =1
Font: =Font.'Open Sans'
Height: =Parent.Height
PaddingRight: =20
Size: =Switch(HomeScreen_3.Size,4,30,3,20,2,15,1,10)
Text: ="your name logic here"
- Container4_3:
Control: GroupContainer@1.3.0
Variant: AutoLayout
Properties:
AlignInContainer: =AlignInContainer.SetByContainer
LayoutDirection: =LayoutDirection.Horizontal
Children:
- gal_home_3:
Control: Gallery@2.15.0
Variant: BrowseLayout_Vertical_TwoTextOneImageTwoColumnOverlayVariant_ver5.0
Properties:
AlignInContainer: =AlignInContainer.Start
BorderColor: =RGBA(0, 18, 107, 1)
DelayItemLoading: =true
FillPortions: =0
Height: =Parent.Height
Items: |-
=[
{
Title: "Your Title",
Image: "your image here",
Screen: "yourscreen"
},
{
Title: "Your Title",
Image: "your image here",
Screen: "yourscreen"

},{
Title: "Your Title",
Image: "your image here",
Screen: "yourscreen"

},
{
Title: "Your Title",
Image: "your image here",
Screen: "yourscreen"

},
{
Title: "Your Title",
Image: "your image here",
Screen: "yourscreen"

},
{
Title: "Your Title",
Image: "your image here",
Screen: "yourscreen"

},
{
Title: "Your Title",
Image: "your image here",
Screen: "yourscreen"

},
{
Title: "Your Title",
Image: "your image here",
Screen: "yourscreen"

}]
LoadingSpinner: =LoadingSpinner.Data
ShowScrollbar: =false
TemplatePadding: =20
Transition: =Transition.Pop
Width: =Parent.Width
WrapCount: |
=HomeScreen_3.Size
Children:
- img_home_3:
Control: Image@2.2.3
Properties:
BorderColor: =RGBA(0, 18, 107, 1)
Height: =200
Image: =ThisItem.Image
ImagePosition: =ImagePosition.Fill
OnSelect: =Select(Parent)
RadiusBottomLeft: =8
RadiusBottomRight: =8
RadiusTopLeft: =8
RadiusTopRight: =8
Width: =200
X: =38
Y: =26
- Overlay1_3:
Control: Rectangle@2.3.0
Properties:
BorderColor: =RGBA(0, 18, 107, 1)
Fill: =RGBA(219, 219, 219, 1)
Height: =52
OnSelect: =Select(Parent)
Width: =276
X: =20
Y: =253
- but_homenavigate_3:
Control: Classic/Button@2.2.0
Properties:
BorderColor: =Color.SkyBlue
Color: =RGBA(255, 255, 255, 1)
DisabledBorderColor: =RGBA(166, 166, 166, 1)
Fill: =Color.Transparent
Font: =Font.'Open Sans'
Height: =316
HoverBorderColor: =ColorFade(Self.BorderColor, 20%)
HoverColor: =Color.Transparent
HoverFill: =Color.Transparent
OnSelect: =
PressedBorderColor: =Self.Fill
PressedColor: =Self.Fill
PressedFill: =Self.Color
Text: =
Width: =316
- txt_overlay_3:
Control: Label@2.5.1
Properties:
Align: =Align.Center
BorderColor: =RGBA(0, 0, 0, 1)
Color: =RGBA(255, 255, 255, 1)
Font: =Font.'Open Sans'
FontWeight: =FontWeight.Semibold
Height: =52
OnSelect: =Select(Parent)
PaddingBottom: =0
PaddingLeft: =0
PaddingRight: =0
PaddingTop: =0
Size: =20
Text: =ThisItem.Title
Width: =276
Y: =253