Merge pull request pnp#148 from NatiTurts/TimelineComponent

Timeline component

Author: Katerina-Chernevskaya

samples/timeline-component/README.md

@@ -0,0 +1,103 @@
+# Timeline Component
+A Canvas app version of the timeline feature in a Model-Driven app, this component consolidates all the activities of a contact or account in a single timleine view, just like an MDA.
+
+
+## Summary
+This timeline component collects Notes, Emails, Appointments, Phone Calls and Tasks created as activities for a contact or account and displays them in a single timeline view, similar to the timeline feature in Model-Driven apps. The component is designed to be used in a Canvas app, and it can be customised to fit your specific needs and include addtiional activity tables.
+
+![Timeline Component](assets/images/AccountTimelineRelated.png)
+
+## Applies to
+* [Microsoft Power Apps](https://docs.microsoft.com/power-apps)
+
+## Compatibility
+
+![Premium License](https://img.shields.io/badge/Premium%20License-Not%20Required-green.svg "Premium license required")
+![On-Premises Connectors](https://img.shields.io/badge/On--Premises%20Connectors-No-green.svg "Does not use on-premise connectors")
+![Custom Connectors](https://img.shields.io/badge/Custom%20Connectors-Not%20Required-green.svg "Does not use custom connectors")
+
+## Contributors
+
+* [Nati Turtledove](https://github.com/NatiTurts)
+
+## Version history
+
+Version|Date|Comments
+-------|----|--------
+1.0.0.0 | April 25, 2025 | Initial release
+
+## Features
+* View actvities for an Account in a Canvas app timeline.
+* View actvities for an Account and its related contacts in a Canvas app timeline.
+* View actvities for a Contact in a Canvas app timeline.
+* The activity timeline currently include Notes, Phone Calls, Emails, Appointments and Tasks.
+
+
+### View Account activities and related contact activities
+When you select an account in the gallery, the activities for that account will load and will also include the activities for any contacts related to that account (Just like how the timeline in an MDA works). The Related Contacts toggle will auto set to true. You can toggle between this setting to switch if you want to view activities for the accounts related contacts or not.
+![Account Timeline Related](assets/images/AccountTimelineRelated.png)
+
+### View Account activities only
+When you select an account in the gallery and you toggle the Related Contacts off, only activities for the selected account will show in the timeline.
+![Account Timeline Unrelated](assets/images/AccountTimelineUnrelated.png)
+
+### View Contact activities only
+When you select a contact in the gallery, the activities for that contact will load into the timeline.
+![Contact Timeline](assets/images/ContactTimeline.png)
+
+### Activity Buttons
+Buttons in the app are included to see what code is being run for collecting data from each activity table and collating it together.
+
+
+## Prerequisites
+### Licensing
+* The component requires users to have a premium licensse as it uses standard Dataverse entities.
+
+
+### Security
+* Users require a minimum of user level read privileges to the following tables:
+  * Accounts
+  * Contacts
+  * Teams
+  * Users
+  * Tasks
+  * Email (Email Messages)
+  * Phone Calls
+  * Appointments
+  * Notes
+
+
+## Minimal Path to Awesome
+
+* [Download](./solution/timeline-component.zip) the `.zip` from the `solution` folder
+* [Import](https://learn.microsoft.com/en-us/power-apps/maker/data-platform/import-update-export-solutions) the `.zip` file using **Solutions** > **Import Solution**.
+
+### Using the source code
+
+You can also use the [Power Apps CLI](https://docs.microsoft.com/powerapps/developer/data-platform/powerapps-cli) to pack the source code by following these steps:
+
+* Clone the repository to a local drive
+* Pack the source files back into a solution `.zip` file:
+
+  ```bash
+  pac solution pack --zipfile pathtodestinationfile --folder pathtosourcefolder --processCanvasApps
+  ```
+
+  Making sure to replace `pathtosourcefolder` to point to the path to this sample's `sourcecode` folder, and `pathtodestinationfile` to point to the path of this solution's `.zip` file (located under the `solution` folder)
+* Within **Power Apps Studio**, import the solution `.zip` file using **Solutions** > **Import Solution** and select the `.zip` file you just packed.
+
+## Help
+
+We do not support samples, but this community is always willing to help, and we want to improve these samples. We use GitHub to track issues, which makes it easy for  community members to volunteer their time and help resolve issues.
+
+If you encounter any issues while using this sample, you can [create a new issue](https://github.com/pnp/powerapps-samples/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=bug-report.yml&sample=timeline-component&authors=@NatiTurts&title=timeline-component%20-%20).
+
+For questions regarding this sample, [create a new question](https://github.com/pnp/powerapps-samples/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=question.yml&sample=timeline-component&authors=@NatiTurts&title=timeline-component%20-%20).
+
+Finally, if you have an idea for improvement, [make a suggestion](https://github.com/pnp/powerapps-samples/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=suggestion.yml&sample=timeline-component&authors=@NatiTurts&title=timeline-component%20-%20).
+
+## 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-samples/samples/timeline-component" aria-hidden="true" />

samples/timeline-component/assets/AccountTimelineRelated.png

@@ -0,0 +1,67 @@
+[
+    {
+      "name": "pnp-powerplatform-samples-timeline-component",
+      "source": "pnp",
+      "title": "Timeline Component for Canvas apps",
+      "shortDescription": "A Canvas app version of the timeline feature in a Model-Driven app, this component consolidates all the activities of a contact or account in a single timleine view, just like an MDA.",
+      "url": "https://github.com/pnp/powerplatform-samples/tree/main/samples/timeline-component",
+      "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/powerplatform-samples/tree/main/samples/timeline-component",
+      "longDescription": [
+        "This timeline component collects Notes, Emails, Appointments, Phone Calls and Tasks created as activities for a contact or account and displays them in a single timeline view, similar to the timeline feature in Model-Driven apps. The component is designed to be used in a Canvas app, and it can be customised to fit your specific needs and include addtiional activity tables."
+      ],
+      "creationDateTime": "2025-04-25",
+      "updateDateTime": "2025-04-25",
+      "products": [
+        "Power Apps",
+        "Power Platform",
+        "Dataverse"
+      ],
+      "tags": [
+        "template",
+        "activities"
+      ],
+      "categories": [
+        "CANVAS"
+      ],
+      "metadata": [
+        {
+          "key": "POWERAPPS-EXPERIMENTAL",
+          "value": "No"
+        },
+        {
+          "key": "POWERAPPS-PREMIUM",
+          "value": "Yes"
+        },
+        {
+          "key": "POWERAPPS-ONPREM",
+          "value": "No"
+        },
+        {
+          "key": "POWERAPPS-CUSTOMCONNECTOR",
+          "value": "No"
+        }
+      ],
+      "thumbnails": [
+        {
+          "type": "image",
+          "order": 100,
+          "url": "https://github.com/pnp/powerplatform-samples/raw/main/samples/timeline-component/assets/AccountTimelineRelated.png",
+          "alt": "Timeline Component"
+        }
+      ],
+      "authors": [
+        {
+            "gitHubAccount": "NatiTurts",
+            "pictureUrl": "https://github.com/NatiTurts.png",
+            "name": "Nati Turtledove"
+        }
+      ],
+      "references": [
+        {
+          "name": "Microsoft Power Platform documentation",
+          "description": "Discover how to make the most of Microsoft Power Platform products with online training courses, docs, and videos covering product capabilities and how-to guides.",
+          "url": "https://learn.microsoft.com/power-platform/"
+        }
+      ]
+    }
+  ]

samples/timeline-component/assets/AccountTimelineUnrelated.png

@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="utf-8"?>
+<CanvasApp xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
+  <Name>natiturt_timelinecomponent_5b49b</Name>
+  <AppVersion>2025-04-25T12:15:34Z</AppVersion>
+  <Status>Ready</Status>
+  <CreatedByClientVersion>3.25042.10.0</CreatedByClientVersion>
+  <MinClientVersion>3.25042.10.0</MinClientVersion>
+  <Tags>{"primaryDeviceWidth":"1366","primaryDeviceHeight":"768","supportsPortrait":"true","supportsLandscape":"true","primaryFormFactor":"Tablet","showStatusBar":"false","publisherVersion":"3.25042.10","minimumRequiredApiVersion":"2.2.0","hasComponent":"false","hasUnlockedComponent":"false","isUnifiedRootApp":"false","sienaVersion":"20250421T153203Z-3.25041.10.0"}</Tags>
+  <IsCdsUpgraded>0</IsCdsUpgraded>
+  <GalleryItemId xsi:nil="true"></GalleryItemId>
+  <BackgroundColor>rgba(197, 24, 128, 1)</BackgroundColor>
+  <DisplayName>Timeline Component</DisplayName>
+  <Description>Streamline your workflow with the Timeline Component app. Efficiently manage and organize notes, appointments, phone calls, emails, and tasks related to contacts.</Description>
+  <CommitMessage xsi:nil="true"></CommitMessage>
+  <Publisher xsi:nil="true"></Publisher>
+  <AuthorizationReferences>[]</AuthorizationReferences>
+  <ConnectionReferences>{}</ConnectionReferences>
+  <DatabaseReferences>{"default.cds":{"databaseDetails":{"referenceType":"Environmental","environmentName":"default.cds","overrideValues":{"status":"NotSpecified","environmentVariableName":""}},"dataSources":{"Notes":{"entitySetName":"annotations","logicalName":"annotation"},"Appointments":{"entitySetName":"appointments","logicalName":"appointment"},"Phone Calls":{"entitySetName":"phonecalls","logicalName":"phonecall"},"Email Messages":{"entitySetName":"emails","logicalName":"email"},"Tasks":{"entitySetName":"tasks","logicalName":"task"},"Users":{"entitySetName":"systemusers","logicalName":"systemuser"},"Teams":{"entitySetName":"teams","logicalName":"team"},"Contacts":{"entitySetName":"contacts","logicalName":"contact"},"Accounts":{"entitySetName":"accounts","logicalName":"account"}}}}</DatabaseReferences>
+  <AppComponents>[]</AppComponents>
+  <AppComponentDependencies>[]</AppComponentDependencies>
+  <CanConsumeAppPass>0</CanConsumeAppPass>
+  <CanvasAppType>0</CanvasAppType>
+  <BypassConsent>0</BypassConsent>
+  <AdminControlBypassConsent>0</AdminControlBypassConsent>
+  <EmbeddedApp xsi:nil="true"></EmbeddedApp>
+  <IntroducedVersion>1.0</IntroducedVersion>
+  <CdsDependencies>{"cdsdependencies":[{"logicalname":"annotation","componenttype":1},{"logicalname":"appointment","componenttype":1},{"logicalname":"phonecall","componenttype":1},{"logicalname":"email","componenttype":1},{"logicalname":"task","componenttype":1},{"logicalname":"systemuser","componenttype":1},{"logicalname":"team","componenttype":1},{"logicalname":"contact","componenttype":1},{"logicalname":"account","componenttype":1}]}</CdsDependencies>
+  <IsCustomizable>1</IsCustomizable>
+  <BackgroundImageUri>/CanvasApps/natiturt_timelinecomponent_5b49b_BackgroundImageUri</BackgroundImageUri>
+  <DocumentUri>/CanvasApps/natiturt_timelinecomponent_5b49b_DocumentUri.msapp</DocumentUri>
+  <AdditionalUris>
+    <AdditionalUri>/CanvasApps/natiturt_timelinecomponent_5b49b_AdditionalUris0_identity.json</AdditionalUri>
+  </AdditionalUris>
+</CanvasApp>

samples/timeline-component/assets/ContactTimeline.png

@@ -0,0 +1 @@
+{"__Version":"0.1","App":"514f49e6-7257-413b-8cf0-3a03e6d47a97","Test_7F478737223C4B69":"5ad26228-5d71-4d8e-9c45-b8e537d5d9a8","Host":"3909d291-e034-4515-9deb-31ae71a04bd3","Timeline":"e9f7f0f6-ffe5-4b00-84de-228bbecf2b65","con_TL_Accounts":"08f236f7-3e40-4bcc-88bf-99b0c8157fc9","gal_TL_Account":"28f473f7-d47b-4ad5-849a-ecbcf2b3af69","galleryTemplate2_3":"6276c800-105d-444e-b944-f768c32e8e6d","con_TL_galAccountRecord":"8ef0c0e2-88eb-47b4-833b-a137d2a65efd","shp_TL_galAccountsRecord":"7b871719-df1c-4d07-96f9-c83967c4051f","btn_TL_galAccountRecord_Select":"65032ed2-5564-45cd-a795-403426fc5965","lbl_TL_galAccountRecord_Name":"f4ac24c0-7e88-4145-afe9-be590191a25d","lbl_TL_galAccountsRecord_Email":"fa446fba-4f7e-43a6-8cb1-6caceca391b2","lbl_TL_Accounts":"79edf3ac-f509-467e-b1c8-580f47217903","con_TL_Contacts":"81ff0710-4224-4842-8a43-74c4582415bf","gal_TL_Contacts":"0c7e329d-c6c6-4550-8bd4-9fd5b8f94b60","galleryTemplate2_2":"c93ca34a-5669-47af-ab83-f9d45028849e","lbl_TL_Contacts":"6e6d09e1-fde3-4c14-b03a-6dc236eedd77","shp_TL_galContactRecord":"1fe60386-ec58-4fbd-bd00-0b385516b3a5","btn_TL_galContactRecord_Select":"be306171-f37d-433b-8f29-c53c8cff8801","lbl_TL_galContactRecord_Name":"f4784a93-323c-456e-89db-1a7e5ead34ae","con_TL_galContactRecord":"67ded5cf-ab8f-4c2f-947b-e6129b296386","lbl_TL_galContactRecord_Email":"a2bf6dcf-47b8-4f3f-bb2f-38f7f7204b8b","con_TL_Timeline":"0f28a339-7e7f-4b77-bf41-68dc55a1f3f0","ico_TL_NewActivity":"abcddd9d-b801-4945-a670-282479af62f8","lbl_TL_Timeline":"e593b7a4-c1d5-4ec1-8f8d-b01f2c28abeb","gal_TL_Timeline":"9c1e0204-503a-428b-996c-cc9d9da43521","galleryTemplate2_5":"13e22bff-a2dc-493f-894d-88a568151ce4","con_TL_galTimeline_Activity":"2398abbf-a7b4-49f9-bca7-10ecd5e2f79c","btn_TL_galTimeline_ActivitySelect":"59aebf0b-8c74-448d-98a5-e364f2bff34b","lbl_TL_galTimeline_ActivityCreated":"871122a6-7af0-4a8d-81b7-8e0ead845eba","ico_TL_galTimeline_ActivityEdit":"6dcc27da-4750-49ab-942e-79b1b3fc8ae6","ico_TL_galTimeline_ActivityType":"8976671a-0ea2-4bc9-b03d-7792a5c7eb36","lbl_TL_galTimeline_ActivityTitle":"e11fd9d4-c8cc-4a9a-b419-b5411a82baf5","lbl_TL_galTimeline_ActivityDescription":"96816bb6-714c-4b5a-8c7a-a697271b2d94","shp_TL_galTimelineCreatedBy_1":"e8adbfb2-e401-4e56-a499-d398b47c4abb","lbl_TL_galTimelineCreatedBy_1":"0fe68e11-fc30-4d73-b780-92d21f7b9aea","tgl_TL_RelatedActivities":"a7b10ff3-e87f-4b66-8163-caca6ec6f919","grp_TL_galTimelineCreatedBy":"46515059-ed99-453b-a233-f3091eaec45d","btn_TL_Timeline":"65525df6-2b40-489f-861a-b0ec0437e8ce","btn_TL_Clear":"c4d58bc4-1c98-4dc5-af52-ba9373bccb95","btn_TL_Notes":"0c68abb6-4276-4f21-b00a-742a0ee77246","btn_TL_Appointments":"0233a051-49b6-46a2-9f51-b819ff45df14","btn_TL_Calls":"3a2dc01f-c364-4109-878d-a03403006aaa","btn_TL_Emails":"d3a44a08-d931-40d3-b53f-117f9830a3c0","btn_TL_Tasks":"093b6810-e1c3-44db-b98b-2b348a8b95f5","hde_TL_Header":"94d79fe2-5c82-4466-ad86-769358f0d660","con_TL_Header":"eca5d714-40ae-4fb3-9a74-c85140c50163"}