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
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.
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!
For every Roadmap component, we need to configure the following properties
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
We can get the following properties as Output Properties when we drag the roadmap bar.
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
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
We need to provide same collection defined in the section.
Quarterly Strategic Roadmap
We need to provide same collection defined in the section.
Last updated
Was this helpful?