Task List PCF control for Power Apps Canvas applications

on

 

Task List PCF control for Power Apps Canvas applications 


A custom PowerApps Component Framework (PCF) control developed by Shaheer Ahmad. 



Description 

The TaskList component provides a customizable list interface for managing tasks within your Power Apps. 


Features 

  • Task Management: Display and interact with a list of tasks. 

  • Customizable Typography: Adjust the font size (fontSize) to match your app's design. 

  • Interactive: Capture data updates via UpdatedData. 




Installation 

  1. Download Solution: 

  1. Download the managed solution file directly from this repository: PCFTaskList_1_0_0_1_managed.zip 


  1. Import into Power Apps Environment: 

  1. Go to the Power Apps Maker Portal. 

  1. Select the correct Environment from the top right corner. 

  1. Navigate to Solutions in the left sidebar. 

  1. Click Import solution in the top menu. 

  1. Browse and select the downloaded PCFTaskList_1_0_0_1_managed.zip file. 

  1. Click Next and follow the prompts to complete the import. 


  1. Enable PCF for Canvas Apps: 

  1. Note: This step is required for the "Code" tab to appear in the "Import components" dialog. 

  1. Go to the Power Platform Admin Center. 

  1. Select your Environment. 

  1. Navigate to Settings > Product > Features. 

  1. Toggle On the setting "Power Apps component framework for canvas apps". 

  1. Save the changes. 


  1. Add to Canvas App: 

  1. Open your Canvas App in Edit mode. 

  1. In the left sidebar, click on the Insert (+) icon. 

  1. Click on the Get more components button at the bottom of the pane. 

  1. In the "Import components" dialog, select the Code tab. 

  1. Search for or scroll to find the TaskList component. 

  1. Select it and click Import. 

  1. Once imported, you will find TaskList under the Code components section in the Insert pane. 

  1. Drag and drop it onto your screen. 


Usage 

  1. Select the TaskList component on your canvas. 

  1. Bind your task data to the Data property. 

  1. Choose a preferred fontSize (Small, Medium, Large, ExtraLarge). 



Formulas:

Data:
{
    rows: [
        {
            uuid: "1",
            title: "Complete <b>Project</b> setup",
            status: "Start",
            color: "blue",
            sortOrder: 1,
            description: "Set up the project <b>structure</b>, configure the required <i>dependencies</i>, and ensure the environment is <u>ready</u> for development. This includes installing <b>Node.js</b>, setting up the <i>database</i>, and configuring the <b>build tools</b>."
        }
    ]
}


On Change:
Set(
    updatedRows,
    ForAll(
        Table(ParseJSON(Self.UpdatedData)) As _tbl,
        {
            uuid: Text(_tbl.Value.uuid),
            title: Text(_tbl.Value.title),
            status: Text(_tbl.Value.status),
            color: Text(_tbl.Value.color),
            sortOrder: Value(_tbl.Value.sortOrder),
            description: Text(_tbl.Value.description)
        }
    )
)


  1.

Creator 

Shaheer Ahmad 

GitHub: shaheerahmadch 

 

Comments

Post a Comment