Skip to content

Commit 8476e2b

Browse files
LaskewitzLaskewitz
authored
Added a new snippet for activity feed (#116)
This pull request includes a YAML snippet that configures the Activity Feed component or workflow within the Power Platform environment. Details: The YAML snippet defines key properties and settings required to integrate and customize the Activity Feed feature. It outlines the data bindings, triggers, and actions needed to enable a dynamic feed of user activities, such as posts, comments, or updates. Designed to be easy to use and modify for developers building Power Apps. Supports seamless integration with other components and services in the Power Platform ecosystem.
2 parents c84e178 + 6e80961 commit 8476e2b

File tree

3 files changed

+636
-0
lines changed

3 files changed

+636
-0
lines changed

‎power-apps/activity-feed/README.md‎

Lines changed: 366 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,366 @@
1+
# Activity Feed
2+
3+
A Activity feed UI that displays a real-time style activity feed which is perfect for showing updates such as appointments, tasks, or status changes.
4+
Great for collaboration scenarios and keeping users informed.
5+
6+
7+
8+
![Activity Feed](./assets/activityfeed.jpg)
9+
10+
## Features
11+
12+
- Clean, vertical timeline layout
13+
- Supports **HTML** in descriptions
14+
- Automatically sorts items by date (newest first)
15+
- Easy to import with a simple YAML snippet
16+
- Works with collections, Dataverse, or API data sources
17+
18+
## Authors
19+
20+
21+
22+
Author|Socials
23+
--------|---------
24+
Summit Bajracharya | [GitHub](https://github.com/summitbaj) ([@summitbajracharya](https://www.linkedin.com/in/summitbajracharya) )
25+
26+
27+
28+
## Minimal path to awesome
29+
30+
31+
32+
Follow these steps to start using the Activity Feed snippet:
33+
34+
1. Open your **Canvas App** in Power Apps.
35+
2. Copy the contents of the **[activityfeed.yaml](./source/activityfeed.yaml)** file.
36+
3. Select the screen where you want to insert the control, click the **three dots (…)**, and choose **Paste code**.
37+
4. Add sample data (see below) or connect your own source.
38+
5. Done!
39+
40+
41+
42+
## Preparation
43+
To help you test the Activity Feed quickly, add this sample collection to **App OnStart** or any button’s **OnSelect**:
44+
45+
```
46+
ClearCollect(
47+
colActivity,
48+
{
49+
Name: "New Product Presentation",
50+
Date: DateValue("12/25/2025"),
51+
Details: "You have an upcoming task"
52+
},{
53+
Name: "Finish the presentation",
54+
Date: DateValue("11/25/2025"),
55+
Details: "You have an upcoming task with <b>John Doe</b>"
56+
},{
57+
Name: "New Product Presentation",
58+
Date: DateValue("11/05/2025"),
59+
Details: "You have an upcoming appointment with <b>John Doe</b>"
60+
},{
61+
Name: "Invite Acme to the next month",
62+
Date: DateValue("9/25/2025"),
63+
Details: "You have an upcoming task"
64+
}
65+
)
66+
```
67+
The gallery in the YAML snippet uses:
68+
```
69+
Items = Sort(colActivity, Date, SortOrder.Descending)
70+
```
71+
Replace **colActivity** with any source you prefer.
72+
73+
## YAML Snippet
74+
Copy and paste the YAML code below into your canvas screen (right-click → Paste):
75+
``` YAML
76+
77+
- conTimelineMain:
78+
Control: GroupContainer@1.3.0
79+
Variant: AutoLayout
80+
Properties:
81+
Fill: =RGBA(255, 255, 255, 1)
82+
Height: =353
83+
LayoutAlignItems: =LayoutAlignItems.Center
84+
LayoutDirection: =LayoutDirection.Vertical
85+
PaddingBottom: =8
86+
PaddingLeft: =8
87+
PaddingRight: =8
88+
PaddingTop: =8
89+
X: =60
90+
Y: =60
91+
Children:
92+
- conTimelineHeader:
93+
Control: GroupContainer@1.3.0
94+
Variant: AutoLayout
95+
Properties:
96+
DropShadow: =DropShadow.None
97+
FillPortions: =0
98+
Height: =30
99+
LayoutAlignItems: =LayoutAlignItems.Center
100+
LayoutDirection: =LayoutDirection.Horizontal
101+
LayoutMaxHeight: =0
102+
LayoutMaxWidth: =0
103+
LayoutMinHeight: =16
104+
LayoutMinWidth: =16
105+
Children:
106+
- Label2:
107+
Control: Label@2.5.1
108+
Properties:
109+
AlignInContainer: =AlignInContainer.Start
110+
BorderColor: =RGBA(0, 0, 0, 0)
111+
BorderStyle: =BorderStyle.None
112+
BorderThickness: =2
113+
Color: =RGBA(50, 49, 48, 1)
114+
DisabledBorderColor: =RGBA(0, 0, 0, 0)
115+
DisabledColor: =RGBA(161, 159, 157, 1)
116+
FocusedBorderThickness: =4
117+
Font: =Font.'Segoe UI'
118+
Height: =30
119+
LayoutMaxHeight: =0
120+
LayoutMaxWidth: =0
121+
LayoutMinHeight: =16
122+
LayoutMinWidth: =16
123+
Text: ="Activity"
124+
Width: =70
125+
- Rectangle2_1:
126+
Control: Rectangle@2.3.0
127+
Properties:
128+
BorderColor: =RGBA(0, 0, 0, 0)
129+
BorderStyle: =BorderStyle.None
130+
BorderThickness: =2
131+
DisabledFill: =RGBA(161, 159, 157, 1)
132+
Fill: =RGBA(240, 240, 240, 1)
133+
FillPortions: =1
134+
FocusedBorderThickness: =4
135+
Height: =2
136+
HoverFill: =RGBA(0, 120, 212, 1)
137+
LayoutMaxHeight: =0
138+
LayoutMaxWidth: =0
139+
LayoutMinHeight: =16
140+
LayoutMinWidth: =5
141+
PressedFill: =RGBA(0, 120, 212, 1)
142+
Width: =5
143+
- galTimeline:
144+
Control: Gallery@2.15.0
145+
Variant: BrowseLayout_Vertical_ThreeTextVariant_ver5.0
146+
Properties:
147+
BorderColor: =RGBA(245, 245, 245, 1)
148+
Items: =Sort(colActivity,Date,SortOrder.Descending)
149+
TemplateSize: =80
150+
X: =40
151+
Y: =40
152+
Children:
153+
- conGalContainer:
154+
Control: GroupContainer@1.3.0
155+
Variant: AutoLayout
156+
Properties:
157+
DropShadow: =DropShadow.None
158+
Height: =80
159+
LayoutAlignItems: =LayoutAlignItems.Center
160+
LayoutDirection: =LayoutDirection.Horizontal
161+
Width: =Parent.Width
162+
Children:
163+
- conGalNextArrow:
164+
Control: Classic/Icon@2.5.0
165+
Properties:
166+
AccessibleLabel: =Self.Tooltip
167+
AlignInContainer: =AlignInContainer.Start
168+
BorderColor: =RGBA(0, 0, 0, 0)
169+
Color: =RGBA(166, 166, 166, 1)
170+
DisabledBorderColor: =RGBA(245, 245, 245, 1)
171+
DisabledColor: =RGBA(225, 223, 221, 1)
172+
DisabledFill: =RGBA(0, 0, 0, 0)
173+
FocusedBorderThickness: =4
174+
Height: =30
175+
HoverBorderColor: =RGBA(0, 0, 0, 0)
176+
HoverColor: =RGBA(16, 110, 190, 1)
177+
HoverFill: =RGBA(0, 0, 0, 0)
178+
Icon: =Icon.ChevronRight
179+
PaddingBottom: =5
180+
PaddingLeft: =5
181+
PaddingRight: =5
182+
PaddingTop: =5
183+
PressedBorderColor: =RGBA(0, 0, 0, 0)
184+
PressedColor: =RGBA(16, 110, 190, 1)
185+
PressedFill: =RGBA(0, 0, 0, 0)
186+
Tooltip: ="View item details"
187+
Width: =30
188+
Y: =33
189+
- conGalSeperator:
190+
Control: GroupContainer@1.3.0
191+
Variant: AutoLayout
192+
Properties:
193+
DropShadow: =DropShadow.None
194+
FillPortions: =0
195+
LayoutAlignItems: =LayoutAlignItems.Center
196+
LayoutDirection: =LayoutDirection.Vertical
197+
LayoutMaxHeight: =0
198+
LayoutMaxWidth: =0
199+
LayoutMinHeight: =16
200+
LayoutMinWidth: =16
201+
Width: =30
202+
Children:
203+
- conGalIcon:
204+
Control: GroupContainer@1.3.0
205+
Variant: AutoLayout
206+
Properties:
207+
AlignInContainer: =AlignInContainer.Start
208+
Fill: =RGBA(54, 176, 75, 1)
209+
FillPortions: =0
210+
Height: =30
211+
LayoutAlignItems: =LayoutAlignItems.Center
212+
LayoutDirection: =LayoutDirection.Vertical
213+
LayoutMaxHeight: =0
214+
LayoutMaxWidth: =0
215+
LayoutMinHeight: =16
216+
LayoutMinWidth: =16
217+
PaddingBottom: =8
218+
PaddingLeft: =8
219+
PaddingRight: =8
220+
PaddingTop: =8
221+
Width: =30
222+
Children:
223+
- Icon1:
224+
Control: Classic/Icon@2.5.0
225+
Properties:
226+
BorderColor: =RGBA(0, 0, 0, 0)
227+
Color: =RGBA(255, 255, 255, 1)
228+
DisabledBorderColor: =RGBA(245, 245, 245, 1)
229+
DisabledColor: =RGBA(225, 223, 221, 1)
230+
DisabledFill: =RGBA(0, 0, 0, 0)
231+
FocusedBorderThickness: =4
232+
Height: =14
233+
HoverBorderColor: =RGBA(0, 0, 0, 0)
234+
HoverColor: =RGBA(16, 110, 190, 1)
235+
HoverFill: =RGBA(0, 0, 0, 0)
236+
Icon: =Icon.CalendarBlank
237+
LayoutMaxHeight: =0
238+
LayoutMaxWidth: =0
239+
LayoutMinHeight: =16
240+
LayoutMinWidth: =16
241+
PressedBorderColor: =RGBA(0, 0, 0, 0)
242+
PressedColor: =RGBA(16, 110, 190, 1)
243+
PressedFill: =RGBA(0, 0, 0, 0)
244+
Width: =14
245+
- conGalRect:
246+
Control: Rectangle@2.3.0
247+
Properties:
248+
BorderColor: =RGBA(0, 0, 0, 0)
249+
BorderStyle: =BorderStyle.None
250+
BorderThickness: =2
251+
DisabledFill: =RGBA(161, 159, 157, 1)
252+
Fill: =RGBA(54, 176, 75, 1)
253+
FillPortions: =1
254+
FocusedBorderThickness: =4
255+
Height: =10
256+
HoverFill: =RGBA(0, 120, 212, 1)
257+
LayoutMaxHeight: =0
258+
LayoutMaxWidth: =0
259+
LayoutMinHeight: =16
260+
LayoutMinWidth: =16
261+
PressedFill: =RGBA(0, 120, 212, 1)
262+
Width: =5
263+
- conGalContent:
264+
Control: GroupContainer@1.3.0
265+
Variant: AutoLayout
266+
Properties:
267+
DropShadow: =DropShadow.None
268+
LayoutAlignItems: =LayoutAlignItems.Center
269+
LayoutDirection: =LayoutDirection.Vertical
270+
LayoutMaxHeight: =0
271+
LayoutMaxWidth: =0
272+
LayoutMinHeight: =16
273+
LayoutMinWidth: =16
274+
PaddingBottom: =8
275+
PaddingLeft: =15
276+
PaddingRight: =8
277+
PaddingTop: =8
278+
Children:
279+
- conGalTimelineHeader:
280+
Control: GroupContainer@1.3.0
281+
Variant: AutoLayout
282+
Properties:
283+
DropShadow: =DropShadow.None
284+
LayoutAlignItems: =LayoutAlignItems.Center
285+
LayoutDirection: =LayoutDirection.Horizontal
286+
LayoutMaxHeight: =0
287+
LayoutMaxWidth: =0
288+
LayoutMinHeight: =16
289+
LayoutMinWidth: =16
290+
Children:
291+
- conGalTimelineTitle:
292+
Control: Label@2.5.1
293+
Properties:
294+
AlignInContainer: =AlignInContainer.Start
295+
BorderColor: =RGBA(0, 0, 0, 1)
296+
Color: =RGBA(39, 113, 194, 1)
297+
DisabledColor: =RGBA(161, 159, 157, 1)
298+
FillPortions: =1
299+
Font: =Font.'Segoe UI'
300+
FontWeight: =FontWeight.Semibold
301+
Height: =27
302+
PaddingBottom: =0
303+
PaddingLeft: =0
304+
PaddingRight: =0
305+
PaddingTop: =0
306+
Size: =12
307+
Text: =ThisItem.Name
308+
VerticalAlign: =VerticalAlign.Top
309+
Width: =295
310+
X: =50
311+
Y: =47
312+
- conGalTimelineDate:
313+
Control: Label@2.5.1
314+
Properties:
315+
AlignInContainer: =AlignInContainer.Start
316+
BorderColor: =RGBA(0, 0, 0, 1)
317+
Color: =RGBA(50, 49, 48, 1)
318+
DisabledColor: =RGBA(161, 159, 157, 1)
319+
Font: =Font.'Segoe UI'
320+
Height: =26
321+
PaddingBottom: =0
322+
PaddingLeft: =12
323+
PaddingRight: =0
324+
PaddingTop: =0
325+
Size: =10
326+
Text: =ThisItem.Date
327+
VerticalAlign: =VerticalAlign.Top
328+
Width: =117
329+
X: =436
330+
Y: =24
331+
- htmGalTimelineContent:
332+
Control: HtmlViewer@2.1.0
333+
Properties:
334+
AlignInContainer: =AlignInContainer.Stretch
335+
DisabledBorderColor: =RGBA(161, 159, 157, 1)
336+
Font: =Font.'Segoe UI'
337+
HtmlText: =ThisItem.Details
338+
LayoutMaxHeight: =0
339+
LayoutMaxWidth: =0
340+
LayoutMinHeight: =16
341+
LayoutMinWidth: =16
342+
PaddingBottom: =0
343+
PaddingLeft: =0
344+
PaddingRight: =0
345+
PaddingTop: =0
346+
Size: =10
347+
348+
349+
350+
```
351+
## Disclaimer
352+
353+
354+
355+
**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.**
356+
357+
358+
359+
360+
361+
362+
363+
364+
365+
366+

‎power-apps/activity-feed/assets/activityfeed.jpg‎

98.6 KB
Loading

0 commit comments

Comments
 (0)