> For the complete documentation index, see [llms.txt](https://docs.lowcodera.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.lowcodera.com/strategic-roadmap.md). # Strategic Roadmap ## 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](/files/hdgFaGotjb8cefyOkpJ9) ![QTY Strategic Roadmap](/files/XrB5MRVj66p7aKuQ6GgY) 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. {% tabs %} {% tab title="Dynamic Collection Example" %} The below example SharePoint list's data in a dynamic manner. The SharePoint list structure looks like below: ![](/files/McNZgcPD27OqJXQCQcKZ) 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! ![](/files/f1td89VexgsH2uuWNvp2) {% endtab %} {% tab title="Property Configuration" %} * [x] `Items` property is set to **colRoadmapData** * [x] `TimeScale` property is set to **Year** * [x] `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 | * [x] All **`other`** control properties can be left as **default** {% endtab %} {% tab title="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` | | {% endtab %} | | | {% tab title="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}) ``` {% endtab %} {% endtabs %} ## Properties The properties below are the main ones which change this components appearance and behaviours.
Control PropertyDescriptionAccepted ValuesRequired
Control PropertyDescriptionAccepted ValuesRequired
ItemsProperty to set data source for Roadmap componentCollection/DataSourceYes
TimeScaleProperty to configure time scale for our Roadmap component

Month

Quarter

Year
Day
Hour

Yes
DraggableProperty to configure if you want to allow dragging tasks on your Roadmap component.BooleanX
Date FormatProperty to configure the date format of dates on the roadmape.g. DD/MM/YYYY
MM/DD/YYYY		Yes
## Examples ### Yearly Strategic Roadmap {% tabs %} {% tab title="Data Configuration" %} We need to provide same collection defined in the [section](#working-with-data). ![](/files/ZllH8qqi1E8x21l7zjPl) {% endtab %} {% tab title="Property Configuration" %} * [x] `Timescale`property is set to **Year.** * [x] All other control properties can be same as [section](#working-with-data). {% endtab %} {% endtabs %} ### Quarterly Strategic Roadmap {% tabs %} {% tab title="Data Configuration" %} We need to provide same collection defined in the [section](#working-with-data). ![](/files/3nZYXZCUawkLARmwjt4S) {% endtab %} {% tab title="Property Configuration" %} * [x] `Timescale`property is set to **Quarter.** * [x] All other control properties can be same as [section](#working-with-data). {% endtab %} {% endtabs %}