Skip to content

Commit f54d696

Browse files
LaskewitzLaskewitz
authored
New TileGallery Power Apps Sample (#107)
2 parents cec61a6 + f41e884 commit f54d696

File tree

8 files changed

+248
-0
lines changed

8 files changed

+248
-0
lines changed

‎power-apps/tile-gallery/README.md‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
# Power Apps (YAML) Snippet
2+
3+
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
4+
5+
## Authors
6+
7+
8+
Snippet|Author(s)
9+
--------|---------
10+
Markus Franz | [Github](https://github.com/Mmbr1606) ([LinkedIN](https://www.linkedin.com/in/markus-franz-435759278/) )
11+
12+
## Minimal path to awesome
13+
14+
1. Open your canvas app in **Power Apps**
15+
1. Copy the contents of the **[YAML-file](./source/X.yaml)**
16+
1. Right click on the screen where you want to add the snippet and select "Paste"
17+
18+
19+
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.
20+
21+
In the Items Property set the right values for the table.
22+
Following is a sample code of what i used in a different app:
23+
24+
[
25+
{
26+
Title: "Word",
27+
Image: 'ms-word-svgrepo-com',
28+
Screen: GalleryScreen
29+
},
30+
{
31+
Title: "Excel",
32+
Image: 'ms-excel-svgrepo-com',
33+
Screen: GalleryScreen
34+
35+
}]
36+
37+
If you want more or less items in the gallery simply add or remove records from the table.
38+
39+
For the button OnSelect property (that is inserted over the image of the gallery) set it to: Navigate(ThisItem.Screen).
40+
41+
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.
42+
43+
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.
44+
45+
## Disclaimer
46+
47+
**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.**
48+
49+
50+
<img src="https://m365-visitor-stats.azurewebsites.net/powerplatform-snippets/power-apps/tile-gallery" aria-hidden="true" />

‎power-apps/tile-gallery/assets/README.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
## Assets
2+
3+
In the assets folder, you can add images that you want to include in your README.md.

‎power-apps/tile-gallery/assets/componentPaste.png‎

22.7 KB
Loading

‎power-apps/tile-gallery/assets/componentstab.png‎

11.5 KB
Loading

‎power-apps/tile-gallery/assets/paste.png‎

22.4 KB
Loading

‎power-apps/tile-gallery/assets/tilegallery.png‎

29.4 KB
Loading

‎power-apps/tile-gallery/source/README.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
## Source
2+
3+
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`.

‎power-apps/tile-gallery/source/tilegallery.yaml‎

Lines changed: 192 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,192 @@
1+
Screens:
2+
HomeScreen_3:
3+
Properties:
4+
LoadingSpinnerColor: =RGBA(56, 96, 178, 1)
5+
OnVisible: |+
6+
=Set(
7+
Formvisible,
8+
false
9+
);
10+
11+
12+
Children:
13+
- Main Container_3:
14+
Control: GroupContainer@1.3.0
15+
Variant: AutoLayout
16+
Properties:
17+
Height: =Parent.Height
18+
LayoutAlignItems: =LayoutAlignItems.Stretch
19+
LayoutDirection: =LayoutDirection.Vertical
20+
LayoutJustifyContent: =LayoutJustifyContent.SpaceBetween
21+
Width: =Parent.Width
22+
Children:
23+
- Header Container_3:
24+
Control: GroupContainer@1.3.0
25+
Variant: AutoLayout
26+
Properties:
27+
AlignInContainer: =AlignInContainer.SetByContainer
28+
Fill: =Color.SkyBlue
29+
FillPortions: =0
30+
Height: =80
31+
LayoutDirection: =LayoutDirection.Horizontal
32+
Y: =30
33+
Children:
34+
- Label1_3:
35+
Control: Label@2.5.1
36+
Properties:
37+
Align: =Align.Justify
38+
AlignInContainer: =AlignInContainer.Center
39+
BorderColor: =RGBA(0, 18, 107, 1)
40+
Color: =RGBA(255, 255, 255, 1)
41+
FillPortions: =1
42+
Font: =Font.'Open Sans'
43+
Height: =Parent.Height
44+
PaddingRight: =20
45+
Size: =Switch(HomeScreen_3.Size,4,30,3,20,2,15,1,10)
46+
Text: =" Your Text here"
47+
Width: =600
48+
- Label2_3:
49+
Control: Label@2.5.1
50+
Properties:
51+
Align: =Align.Right
52+
BorderColor: =RGBA(0, 18, 107, 1)
53+
Color: =RGBA(255, 255, 255, 1)
54+
FillPortions: =1
55+
Font: =Font.'Open Sans'
56+
Height: =Parent.Height
57+
PaddingRight: =20
58+
Size: =Switch(HomeScreen_3.Size,4,30,3,20,2,15,1,10)
59+
Text: ="your name logic here"
60+
- Container4_3:
61+
Control: GroupContainer@1.3.0
62+
Variant: AutoLayout
63+
Properties:
64+
AlignInContainer: =AlignInContainer.SetByContainer
65+
LayoutDirection: =LayoutDirection.Horizontal
66+
Children:
67+
- gal_home_3:
68+
Control: Gallery@2.15.0
69+
Variant: BrowseLayout_Vertical_TwoTextOneImageTwoColumnOverlayVariant_ver5.0
70+
Properties:
71+
AlignInContainer: =AlignInContainer.Start
72+
BorderColor: =RGBA(0, 18, 107, 1)
73+
DelayItemLoading: =true
74+
FillPortions: =0
75+
Height: =Parent.Height
76+
Items: |-
77+
=[
78+
{
79+
Title: "Your Title",
80+
Image: "your image here",
81+
Screen: "yourscreen"
82+
},
83+
{
84+
Title: "Your Title",
85+
Image: "your image here",
86+
Screen: "yourscreen"
87+
88+
},{
89+
Title: "Your Title",
90+
Image: "your image here",
91+
Screen: "yourscreen"
92+
93+
},
94+
{
95+
Title: "Your Title",
96+
Image: "your image here",
97+
Screen: "yourscreen"
98+
99+
},
100+
{
101+
Title: "Your Title",
102+
Image: "your image here",
103+
Screen: "yourscreen"
104+
105+
},
106+
{
107+
Title: "Your Title",
108+
Image: "your image here",
109+
Screen: "yourscreen"
110+
111+
},
112+
{
113+
Title: "Your Title",
114+
Image: "your image here",
115+
Screen: "yourscreen"
116+
117+
},
118+
{
119+
Title: "Your Title",
120+
Image: "your image here",
121+
Screen: "yourscreen"
122+
123+
}]
124+
LoadingSpinner: =LoadingSpinner.Data
125+
ShowScrollbar: =false
126+
TemplatePadding: =20
127+
Transition: =Transition.Pop
128+
Width: =Parent.Width
129+
WrapCount: |
130+
=HomeScreen_3.Size
131+
Children:
132+
- img_home_3:
133+
Control: Image@2.2.3
134+
Properties:
135+
BorderColor: =RGBA(0, 18, 107, 1)
136+
Height: =200
137+
Image: =ThisItem.Image
138+
ImagePosition: =ImagePosition.Fill
139+
OnSelect: =Select(Parent)
140+
RadiusBottomLeft: =8
141+
RadiusBottomRight: =8
142+
RadiusTopLeft: =8
143+
RadiusTopRight: =8
144+
Width: =200
145+
X: =38
146+
Y: =26
147+
- Overlay1_3:
148+
Control: Rectangle@2.3.0
149+
Properties:
150+
BorderColor: =RGBA(0, 18, 107, 1)
151+
Fill: =RGBA(219, 219, 219, 1)
152+
Height: =52
153+
OnSelect: =Select(Parent)
154+
Width: =276
155+
X: =20
156+
Y: =253
157+
- but_homenavigate_3:
158+
Control: Classic/Button@2.2.0
159+
Properties:
160+
BorderColor: =Color.SkyBlue
161+
Color: =RGBA(255, 255, 255, 1)
162+
DisabledBorderColor: =RGBA(166, 166, 166, 1)
163+
Fill: =Color.Transparent
164+
Font: =Font.'Open Sans'
165+
Height: =316
166+
HoverBorderColor: =ColorFade(Self.BorderColor, 20%)
167+
HoverColor: =Color.Transparent
168+
HoverFill: =Color.Transparent
169+
OnSelect: =
170+
PressedBorderColor: =Self.Fill
171+
PressedColor: =Self.Fill
172+
PressedFill: =Self.Color
173+
Text: =
174+
Width: =316
175+
- txt_overlay_3:
176+
Control: Label@2.5.1
177+
Properties:
178+
Align: =Align.Center
179+
BorderColor: =RGBA(0, 0, 0, 1)
180+
Color: =RGBA(255, 255, 255, 1)
181+
Font: =Font.'Open Sans'
182+
FontWeight: =FontWeight.Semibold
183+
Height: =52
184+
OnSelect: =Select(Parent)
185+
PaddingBottom: =0
186+
PaddingLeft: =0
187+
PaddingRight: =0
188+
PaddingTop: =0
189+
Size: =20
190+
Text: =ThisItem.Title
191+
Width: =276
192+
Y: =253

0 commit comments

Comments
 (0)