Skip to content

Commit 1c9f32f

Browse files
LaskewitzLaskewitz
authored
Galerie Drag and Drop (#100)
2 parents f3be53a + 4946f23 commit 1c9f32f

File tree

5 files changed

+380
-0
lines changed

5 files changed

+380
-0
lines changed

‎power-apps/galerie-draganddrop/README.md

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
# Galerie Drag & Drop
2+
3+
Here is a snippet that enables drag and drop functionality on a PowerApps gallery. This method only works if all gallery items are fully visible (no scrollbar). Feel free to explore the code and adapt it to your own examples.
4+
5+
6+
![galerie-draganddrop](./assets/galerie_draganddrop.gif)
7+
8+
9+
## Authors
10+
11+
Snippet|Author
12+
--------|---------
13+
Steve Bourdin | [GitHub](https://github.com/SteveBourdin) ([LinkedIn](https://www.linkedin.com/in/steve-bourdin-ab998762/) )
14+
15+
## Minimal path to awesome
16+
17+
1. Open your canvas app in **Power Apps**
18+
2. Copy the contents of the **[YAML-file](./source/date-range-picker.yaml)**
19+
3. Click on the three dots of the screen where you want to add the snippet and select "Paste code"
20+
4. Run application to see the example
21+
22+
23+
## Code
24+
**[YAML-file](./source/galerie-draganddrop.yaml)**
25+
26+
27+
## Disclaimer
28+
29+
**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.**
30+
31+
<img src="https://m365-visitor-stats.azurewebsites.net/powerplatform-snippets/power-apps/galerie-draganddrop" aria-hidden="true" />

‎power-apps/galerie-draganddrop/assets/galerie-draganddrop.png

807 KB
Loading

‎power-apps/galerie-draganddrop/assets/galerie_draganddrop.gif

5.93 MB
Loading

‎power-apps/galerie-draganddrop/assets/sample.json

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
[
2+
{
3+
"$schema": "https://developer.microsoft.com/en-us/json-schemas/pnp/samples/v1.0/metadata-schema.json",
4+
"name": "pnp-powerplatform-snippets-galerie-draganddrop",
5+
"version": "1.0.0.0",
6+
"source": "pnp",
7+
"creationDateTime": "2025-04-29T00:00:00.000Z",
8+
"updateDateTime": "2025-04-29T00:00:00.000Z",
9+
"title": "Galerie Drag & Drop",
10+
"shortDescription": "Here is a snippet that enables drag and drop functionality on a PowerApps gallery. This method only works if all gallery items are fully visible (no scrollbar). Feel free to explore the code and adapt it to your own examples.",
11+
"longDescription": [
12+
"Here is a snippet that enables drag and drop functionality on a PowerApps gallery. This method only works if all gallery items are fully visible (no scrollbar). Feel free to explore the code and adapt it to your own examples."
13+
],
14+
"url": "https://github.com/pnp/powerplatform-snippets/tree/main/power-apps/galerie-draganddrop/",
15+
"products": [
16+
"Power Platform",
17+
"Power Apps",
18+
"powerplatform-snippets",
19+
"power-apps-snippets"
20+
],
21+
"tags": [
22+
],
23+
"categories": [
24+
],
25+
"metadata": [
26+
{
27+
"key": "Product",
28+
"value": "Power Apps"
29+
},
30+
{
31+
"key": "Type",
32+
"value": "Snippet"
33+
}
34+
],
35+
"thumbnails": [
36+
{
37+
"type": "image",
38+
"order": 100,
39+
"url": "https://raw.githubusercontent.com/pnp/powerplatform-snippets/9f2e1293160a391075bcfb8e8be0c368961a7159/power-apps/galerie-draganddrop/assets/galerie-draganddrop.png",
40+
"alt": "Preview PNG"
41+
}
42+
],
43+
"authors": [
44+
{
45+
"gitHubAccount": "SteveBourdin",
46+
"name": "Steve Bourdin",
47+
"pictureUrl": "https://github.com/SteveBourdin.png"
48+
}
49+
]
50+
}
51+
]

‎power-apps/galerie-draganddrop/source/galerie-draganddrop.yaml

Lines changed: 298 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,298 @@
1+
- snippet-galerieDrag&Drop:
2+
Control: GroupContainer@1.3.0
3+
Variant: ManualLayout
4+
Properties:
5+
BorderColor: |-
6+
=/*Steve BOURDIN MOCA by ASI Juillet 2025*/
7+
RGBA(0, 0, 0, 1)
8+
DropShadow: =DropShadow.ExtraBold
9+
Fill: =RGBA(255, 255, 255, 0.96)
10+
Height: =Parent.Height/2
11+
Width: =3*Parent.Width/4
12+
X: =((Parent.Width-Self.Width)/2 )
13+
Y: =((Parent.Height-Self.Height)/2 )
14+
Children:
15+
- gal_tickets:
16+
Control: Gallery@2.15.0
17+
Variant: Vertical
18+
Properties:
19+
BorderColor: =RGBA(0, 18, 107, 1)
20+
Height: =Parent.Height
21+
Items: =Sort(colTicket,order,SortOrder.Ascending)
22+
TemplatePadding: =0
23+
TemplateSize: =If(Self.AllItemsCount>0,Self.Height/Self.AllItemsCount,Self.Height)
24+
Width: =Parent.Width
25+
Children:
26+
- lbl_noTicket:
27+
Control: Text@0.0.51
28+
Group: grp_detail_gal
29+
Properties:
30+
Align: ='TextCanvas.Align'.Center
31+
FontColor: =RGBA(39, 113, 194, 1)
32+
Height: =Parent.TemplateHeight
33+
Text: =ThisItem.noTicket
34+
VerticalAlign: =VerticalAlign.Middle
35+
Weight: ='TextCanvas.Weight'.Bold
36+
Width: =Parent.TemplateWidth/10
37+
- lbl_company:
38+
Control: Text@0.0.51
39+
Group: grp_detail_gal
40+
Properties:
41+
Align: ='TextCanvas.Align'.Center
42+
FontColor: =RGBA(0, 0, 0, 1)
43+
Height: =Parent.TemplateHeight
44+
Text: =ThisItem.company
45+
VerticalAlign: =VerticalAlign.Middle
46+
Weight: ='TextCanvas.Weight'.Semibold
47+
Width: =Parent.TemplateWidth/6
48+
X: =lbl_noTicket.X + lbl_noTicket.Width
49+
- lbl_persona:
50+
Control: Text@0.0.51
51+
Group: grp_detail_gal
52+
Properties:
53+
Align: ='TextCanvas.Align'.Center
54+
FontColor: =RGBA(0, 0, 0, 1)
55+
Height: =Parent.TemplateHeight
56+
Text: =ThisItem.author
57+
VerticalAlign: =VerticalAlign.Middle
58+
Weight: ='TextCanvas.Weight'.Medium
59+
Width: =Parent.TemplateWidth/6
60+
X: =lbl_company.X + lbl_company.Width
61+
- lbl_title:
62+
Control: Text@0.0.51
63+
Group: grp_detail_gal
64+
Properties:
65+
Align: ='TextCanvas.Align'.Center
66+
FontColor: =RGBA(40, 112, 134, 1)
67+
Height: =Parent.TemplateHeight
68+
Text: =ThisItem.title
69+
VerticalAlign: =VerticalAlign.Middle
70+
Weight: ='TextCanvas.Weight'.Semibold
71+
Width: =Parent.TemplateWidth/3
72+
X: =lbl_persona.X + lbl_persona.Width
73+
- btn_statut:
74+
Control: Classic/Button@2.2.0
75+
Group: grp_detail_gal
76+
Properties:
77+
BorderColor: =ColorFade(Self.Fill, -15%)
78+
Color: =RGBA(255, 255, 255, 1)
79+
DisabledBorderColor: =RGBA(166, 166, 166, 1)
80+
Fill: =ColorFade( Switch(ThisItem.status,"In Progress",Color.Blue,"New",Color.DarkRed,"Resolved",Color.Green,"Pending",Color.Orange,"Blocked",Color.Red),0.5)
81+
Font: =Font.'Open Sans'
82+
Height: =Parent.TemplateHeight/2
83+
HoverBorderColor: =ColorFade(Self.BorderColor, 20%)
84+
HoverColor: =RGBA(255, 255, 255, 1)
85+
HoverFill: =ColorFade(RGBA(56, 96, 178, 1), -20%)
86+
OnSelect: =Select(Parent)
87+
PressedBorderColor: =Self.Fill
88+
PressedColor: =Self.Fill
89+
PressedFill: =Self.Color
90+
RadiusBottomLeft: '=30 '
91+
RadiusBottomRight: '=30 '
92+
RadiusTopLeft: =30
93+
RadiusTopRight: '=30 '
94+
Size: =10
95+
Text: =ThisItem.status
96+
Width: =3*(Parent.Width-Self.X)/4
97+
X: =lbl_title.X + lbl_title.Width
98+
Y: =Parent.TemplateHeight/4
99+
- cont_detail_move:
100+
Control: GroupContainer@1.3.0
101+
Variant: ManualLayout
102+
Properties:
103+
Fill: =Color.LightGray
104+
Height: =gal_tickets.TemplateHeight
105+
Visible: =IsBlank(var_SelectItem)=false
106+
Width: =Parent.Width
107+
Y: =Parent.Height * (1 - sld_dragDrop.Value/100) - Self.Height / 2
108+
Children:
109+
- lbl_noTicket_move:
110+
Control: Text@0.0.51
111+
Group: grp_detail_move
112+
Properties:
113+
Align: ='TextCanvas.Align'.Center
114+
FontColor: =RGBA(39, 113, 194, 1)
115+
Height: =Parent.Height
116+
Text: =var_SelectItem.noTicket
117+
VerticalAlign: =VerticalAlign.Middle
118+
Weight: ='TextCanvas.Weight'.Bold
119+
Width: =Parent.Width/10
120+
- lbl_company_move:
121+
Control: Text@0.0.51
122+
Group: grp_detail_move
123+
Properties:
124+
Align: ='TextCanvas.Align'.Center
125+
FontColor: =RGBA(0, 0, 0, 1)
126+
Height: =Parent.Height
127+
Text: =var_SelectItem.company
128+
VerticalAlign: =VerticalAlign.Middle
129+
Weight: ='TextCanvas.Weight'.Semibold
130+
Width: =Parent.Width/6
131+
X: =lbl_noTicket_move.X + lbl_noTicket_move.Width
132+
- lbl_persona_move:
133+
Control: Text@0.0.51
134+
Group: grp_detail_move
135+
Properties:
136+
Align: ='TextCanvas.Align'.Center
137+
FontColor: =RGBA(0, 0, 0, 1)
138+
Height: =Parent.Height
139+
Text: =var_SelectItem.author
140+
VerticalAlign: =VerticalAlign.Middle
141+
Weight: ='TextCanvas.Weight'.Medium
142+
Width: =Parent.Width/6
143+
X: =lbl_company_move.X + lbl_company_move.Width
144+
- lbl_title_move:
145+
Control: Text@0.0.51
146+
Group: grp_detail_move
147+
Properties:
148+
Align: ='TextCanvas.Align'.Center
149+
FontColor: =RGBA(0, 0, 0, 1)
150+
Height: =Parent.Height
151+
Text: =var_SelectItem.title
152+
VerticalAlign: =VerticalAlign.Middle
153+
Weight: ='TextCanvas.Weight'.Medium
154+
Width: =Parent.Width/3
155+
X: =lbl_persona_move.X + lbl_persona_move.Width
156+
- lbl_statut_move:
157+
Control: Text@0.0.51
158+
Group: grp_detail_move
159+
Properties:
160+
Align: ='TextCanvas.Align'.Center
161+
FontColor: =Switch(var_SelectItem.status,"In Progress",Color.Blue,"New",Color.DarkRed,"Resolved",Color.Green,"Pending",Color.Orange,"Blocked",Color.Red)
162+
Height: =Parent.Height
163+
Text: =var_SelectItem.status
164+
VerticalAlign: =VerticalAlign.Middle
165+
Weight: ='TextCanvas.Weight'.Bold
166+
Width: =Parent.Width-Self.X
167+
X: =lbl_title_move.X + lbl_title_move.Width
168+
- btn_statut_move:
169+
Control: Classic/Button@2.2.0
170+
Group: grp_detail_move
171+
Properties:
172+
BorderColor: =ColorFade(Self.Fill, -15%)
173+
Color: =RGBA(255, 255, 255, 1)
174+
DisabledBorderColor: =RGBA(166, 166, 166, 1)
175+
Fill: =ColorFade( Switch(var_SelectItem.status,"In Progress",Color.Blue,"New",Color.DarkRed,"Resolved",Color.Green,"Pending",Color.Orange,"Blocked",Color.Red),0.5)
176+
Font: =Font.'Open Sans'
177+
Height: =Parent.Height/2
178+
HoverBorderColor: =ColorFade(Self.BorderColor, 20%)
179+
HoverColor: =RGBA(255, 255, 255, 1)
180+
HoverFill: =ColorFade(RGBA(56, 96, 178, 1), -20%)
181+
PressedBorderColor: =Self.Fill
182+
PressedColor: =Self.Fill
183+
PressedFill: =Self.Color
184+
RadiusBottomLeft: '=30 '
185+
RadiusBottomRight: '=30 '
186+
RadiusTopLeft: =30
187+
RadiusTopRight: '=30 '
188+
Size: =10
189+
Text: =var_SelectItem.status
190+
Width: =3*(Parent.Width-Self.X)/4
191+
X: =lbl_title.X + lbl_title.Width
192+
Y: =Parent.Height/4
193+
- sld_dragDrop:
194+
Control: Classic/Slider@2.1.0
195+
Properties:
196+
BorderColor: =RGBA(0, 18, 107, 1)
197+
HandleFill: =RGBA(0, 0, 0, 0)
198+
HandleSize: =Self.Width
199+
Height: =Parent.Height
200+
Layout: =Layout.Vertical
201+
OnChange: |-
202+
=/*In this action, we will update the positions of the items that need to be changed.*/
203+
204+
/*The final target position is saved.*/
205+
UpdateContext(
206+
{
207+
var_SelectPosition: RoundUp(
208+
(100 - Self.Value) / (100 / gal_tickets.AllItemsCount),
209+
0
210+
)
211+
}
212+
);
213+
If(
214+
var_SelectPosition > var_SelectItem.order,
215+
UpdateIf(
216+
colTicket,
217+
order > var_SelectItem.order && order <= var_SelectPosition,
218+
{order: order - 1}
219+
),
220+
UpdateIf(
221+
colTicket,
222+
order < var_SelectItem.order && order >= var_SelectPosition,
223+
{order: order + 1}
224+
)
225+
);
226+
Patch(
227+
colTicket,
228+
var_SelectItem,
229+
{order: var_SelectPosition}
230+
);
231+
UpdateContext({var_SelectItem: Blank()})
232+
OnSelect: |-
233+
=/*On the first mouse click, the selected item is saved.*/
234+
UpdateContext(
235+
{
236+
var_SelectItem: Index(
237+
Sort(colTicket,order,SortOrder.Ascending),
238+
RoundUp(
239+
(100 - Self.Value) / (100 / gal_tickets.AllItemsCount),
240+
0
241+
)
242+
)
243+
}
244+
)
245+
RailFill: =RGBA(0, 0, 0, 0)
246+
RailThickness: =0
247+
ShowValue: =false
248+
ValueFill: =RGBA(0, 0, 0, 0)
249+
Width: =Parent.Width
250+
- tim_init_toRemove:
251+
Control: Timer@2.1.0
252+
Properties:
253+
AutoStart: =true
254+
BorderColor: =ColorFade(Self.Fill, -15%)
255+
Color: =RGBA(255, 255, 255, 1)
256+
DisabledBorderColor: =ColorFade(Self.BorderColor, 70%)
257+
DisabledColor: =ColorFade(Self.Fill, 90%)
258+
DisabledFill: =ColorFade(Self.Fill, 70%)
259+
Fill: =RGBA(56, 96, 178, 1)
260+
Font: =Font.'Open Sans'
261+
HoverBorderColor: =ColorFade(Self.BorderColor, 20%)
262+
HoverColor: =RGBA(255, 255, 255, 1)
263+
HoverFill: =ColorFade(RGBA(56, 96, 178, 1), -20%)
264+
OnTimerStart: |-
265+
=/*This action initializes a collection. Feel free to modify it to include your own examples.*/
266+
267+
ClearCollect(colTicket,
268+
[
269+
{noTicket:1001, title:"PowerApps Formation", status:"In Progress", author:"Steve BOURDIN", company:"MOCA by ASI", order:1},
270+
{noTicket:1002, title:"Introduction Dataverse", status:"New", author:"Claire GIRAUD", company:"MOCA by ASI", order:2},
271+
{noTicket:1003, title:"Canvas App Debugging", status:"Resolved", author:"Julien MARCHAND", company:"ASI Nantes", order:3},
272+
{noTicket:1004, title:"Flow Automatisation", status:"In Progress", author:"Steve BOURDIN", company:"MOCA by ASI", order:4},
273+
{noTicket:1005, title:"Model-Driven UI", status:"Pending", author:"Anaïs DURAND", company:"MOCA by ASI", order:5},
274+
{noTicket:1006, title:"SharePoint Integration", status:"New", author:"Lucas MARTIN", company:"ASI Bordeaux", order:6},
275+
{noTicket:1007, title:"Security Roles", status:"In Progress", author:"Steve BOURDIN", company:"MOCA by ASI", order:7},
276+
{noTicket:1008, title:"Custom Connectors", status:"Blocked", author:"Nina TESSIER", company:"ASI Toulouse", order:8},
277+
{noTicket:1009, title:"Power Automate Flows", status:"Resolved", author:"Marc LEBLANC", company:"MOCA by ASI", order:9}/*;
278+
{noTicket:1010; title:"Responsive Design"; status:"New"; author:"Steve BOURDIN"; company:"MOCA by ASI"; order:10};
279+
{noTicket:1011; title:"Performance Tuning"; status:"Pending"; author:"Claire GIRAUD"; company:"ASI Rennes"; order:11};
280+
{noTicket:1012; title:"Role-based Access"; status:"In Progress"; author:"Julien MARCHAND"; company:"MOCA by ASI"; order:12};
281+
{noTicket:1013; title:"Offline Capabilities"; status:"Blocked"; author:"Anaïs DURAND"; company:"ASI Lille"; order:13};
282+
{noTicket:1014; title:"Custom Pages"; status:"New"; author:"Lucas MARTIN"; company:"MOCA by ASI"; order:14};
283+
{noTicket:1015; title:"Component Library"; status:"Pending"; author:"Steve BOURDIN"; company:"MOCA by ASI"; order:15};
284+
{noTicket:1016; title:"Environment Variables"; status:"Resolved"; author:"Nina TESSIER"; company:"ASI Strasbourg"; order:16};
285+
{noTicket:1017; title:"App Testing Scenarios"; status:"In Progress"; author:"Marc LEBLANC"; company:"MOCA by ASI"; order:17};
286+
{noTicket:1018; title:"Dataverse API"; status:"Blocked"; author:"Claire GIRAUD"; company:"ASI Montpellier"; order:18};
287+
{noTicket:1019; title:"PowerFX Formulas"; status:"New"; author:"Julien MARCHAND"; company:"MOCA by ASI"; order:19};
288+
{noTicket:1020; title:"Monitoring Tools"; status:"Pending"; author:"Steve BOURDIN"; company:"MOCA by ASI"; order:20}*/
289+
]
290+
);
291+
UpdateContext({var_SelectItem : Blank()})
292+
PressedBorderColor: =Self.Fill
293+
PressedColor: =Self.Fill
294+
PressedFill: =Self.Color
295+
Start: =true
296+
Visible: =false
297+
X: =40
298+
Y: =40

0 commit comments

Comments
 (0)