Strategic Roadmap

lowcodera Strategic Roadmap Component

Purpose

Our lowcodera strategic roadmap component brings stunning roadmapping capability directly into your Power Apps. The component is 100% interactive allowing you to present and make changes for your audience in real-time.

Variations

Yearly Strategic Roadmap

QTY Strategic Roadmap

There are several variations of Strategic Roadmap component which are supported through the configuration of data and component properties.

Working with Data

‌You can bind your component's items property to a Power Apps collection which includes either static data or dynamic data e.g. SharePoint.

Dynamic Collection Example

The below example SharePoint list's data in a dynamic manner. The SharePoint list structure looks like below:

The below code snippet will generate a dynamic collection to be consumed by the component.

ClearCollect(
    colRoadmapData,
    StrategicRoadmap2 // List name of SharePoint
);

This will generate the following component!

Property Configuration

• Items property is set to colRoadmapData

• TimeScale property is set to Year

• Draggable property is set to true

For every Roadmap component, we need to configure the following properties

Property	Description	Value
ID	Provide ID Column of your data source	e.g. ID
Title	Provide Title Column of your data source	e.g Title
StartDate	Provide StartDate Column of your data source	e.g StartDate
EndDate	Provide EndDate Column of your data source	e.g. EndDate
IconType	Provide IconType Column of your data source	e.g. IconType
MainCategory	Provide MainCategory Column of your data source	e.g. MainCategory
MainCategoryColor	Provide MainCategoryColor Column of your data source	e.g. MainCategoryColour
Subcategory	Provide Subcategory Column of your data source	e.g. Subcategory
SubCategoryColor	Provide SubCategoryColor Column of your data source	e.g. SubCategoryColour

• All other control properties can be left as default

Output Properties

We can get the following properties as Output Properties when we drag the roadmap bar.

Property Name	Description	Syntax
CurrentID	Return selected ID for the Roadmap	StrategicRoadmap.CurrentID
CurrentStartDate	Return selected start date for the Roadmap	StrategicRoadmap.CurrentStartDate
CurrentEndDate	Return selected end date for the Roadmap	StrategicRoadmap.CurrentEndDate
CurrentMainCategory	Return selected main category for the Roadmap	StrategicRoadmap.CurrentMainCategory
CurrentSubCategory	Return selected sub category for the Roadmap	StrategicRoadmap.CurrentSubCategory
CurrentColor	Return selected category color for the Roadmap	StrategicRoadmap.CurrentColor

Event Configuration

We can save or update collection or data source while dragging the roadmap.

We need to configure the onchange property.

UpdateIf(
    colRoadmapData,
    ID = Value(StrategicRoadmap3.CurrentID),
    {
        StartDate: DateValue(StrategicRoadmap.CurrentStartDate),
        EndDate: DateValue(StrategicRoadmap.CurrentEndDate),
        MainCategory: StrategicRoadmap.CurrentMainCategory,
        SubCategory: StrategicRoadmap.CurrentSubCategory,
        SubcatColour: StrategicRoadmap.CurrentColor
    }
);

//refresh grid
UpdateContext({refreshgrid: refreshgrid + 1})

Properties

The properties below are the main ones which change this components appearance and behaviours.

Control Property	Description	Accepted Values	Required
Items	Property to set data source for Roadmap component	Collection/DataSource	Yes
TimeScale	Property to configure time scale for our Roadmap component	Month Quarter Year Day Hour	Yes
Draggable	Property to configure if you want to allow dragging tasks on your Roadmap component.	Boolean	X
Date Format	Property to configure the date format of dates on the roadmap	e.g. DD/MM/YYYY MM/DD/YYYY	Yes

Examples

Yearly Strategic Roadmap

Data Configuration

We need to provide same collection defined in the section.

Property Configuration

• Timescaleproperty is set to Year.

• All other control properties can be same as section.

Quarterly Strategic Roadmap

Data Configuration

We need to provide same collection defined in the section.

Property Configuration

• Timescaleproperty is set to Quarter.

• All other control properties can be same as section.