Strategic Roadmap

One single component to see tasks organized in a time scale

Collecting the data

Before connecting anything to the roadpmap let's first create an intemediary collection. This will make the performance better as we:

1. Allow user to try different changes before writing back to the datasource

2. Avoid accidental changes

3. Write back all changes in one single action

Colors Concept

Main categories and subcategories can have custom colors. However this information must be present in our data. To try that let's generate the following collection:

ClearCollect(
    colRoadMap,
    AddColumns(
        ShowColumns(
            WorkProgressTracker,
            "ID",
            "Title",
            "Description",
            "Category",
            "Progress",
            "Priority",
            "StartDate",
            "DueDate"
        ),
        "color",
        "#800080"
    )
)

Binding the data

After our dataset is configured it is time to connect the right columns to the right place. In advanced tab you will find the fields to connect:

Creating dynamic colors

Now that we understood the concept of connecting the data and configuring the dataset let's get a step ahead and use the switch statement to create different color for each category and priority:

ClearCollect(
    colRoadMap,
    AddColumns(
        ShowColumns(
            WorkProgressTracker,
            "ID",
            "Title",
            "Description",
            "Category",
            "Progress",
            "Priority",
            "StartDate",
            "DueDate"
        ),
        "MainCategoryColor",
        Switch(
            Category,
            "Planning",
            "#48b5fd",
            "Design",
            "#9b00f1",
            "Engineering",
            "#f900be",
            "Marketing",
            "#ff84b4",
            "Research",
            "#4a5d67"
        ),
        "SubCategoryColor",
        Switch(
            Priority,
            "Low",
            "#00ac46",
            "Medium",
            "#780000",
            "High",
            "#fd8c00",
            "Critical",
            "#dc0000"
        )
    )
)

Notice that we are defining colors for category and subcategory using the switch statement

Filtering

To create the filter control as mentioned above please use the following snippet on a dropdown object (items property)

Distinct(WorkProgressTracker, Progress)

We are filtering the tasks by Progress this allow us to bring smaller chunks of data and provide a better view

To make our filter work as a different selection is made on the dropdown let's use the following code on the OnChange event:

ClearCollect(
    colRoadMap,
    Filter(
        AddColumns(
            ShowColumns(
                WorkProgressTracker,
                "ID",
                "Title",
                "Description",
                "Category",
                "Progress",
                "Priority",
                "StartDate",
                "DueDate"
            ),
            "MainCategoryColor",
            Switch(
                Category,
                "Planning",
                "#48b5fd",
                "Design",
                "#9b00f1",
                "Engineering",
                "#f900be",
                "Marketing",
                "#ff84b4",
                "Research",
                "#4a5d67"
            ),
            "SubCategoryColor",
            Switch(
                Priority,
                "Low",
                "#00ac46",
                "Medium",
                "#780000",
                "High",
                "#fd8c00",
                "Critical",
                "#dc0000"
            )
        ),
        Progress = drpTimeScale.SelectedText.Result
    )
)

Different Time Scale views

Strategic Roadmap component allow us to see the data on time several time scales (hour, day, month, quarter and year). We can provide the user a control to change the view. In our case we are using a dropdown. To start provide the following data to your dropdown (items property):

["Month", "Quarter", "Year"]

Now change the TimeScale property of Roadmap component to the selection of the object we just created:

drpTimeScale.SelectedText.Value

At this point your screen should be looking like this

Saving the data locally

Before we save the data back to our data source let's save it locally (benefits presented on the begining of this session). To do so, we simply update our collection using the OnChange event of Roadmap component with the PowerFx formula below:

UpdateIf(
    colRoadMap,
    ID = Value(StrategicRoadmap.CurrentID),
    {
        StartDate: DateValue(StrategicRoadmap.CurrentStartDate),
        DueDate: DateValue(StrategicRoadmap.CurrentEndDate),
        Category: StrategicRoadmap.CurrentMainCategory,
        Priority: StrategicRoadmap.CurrentSubCategory,
        SubCategoryColor: StrategicRoadmap.CurrentColor
    }
);

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

Writing back the data

To write back the data all we need to do is create a save button and use the following formula (OnSelect):

Patch(WorkProgressTracker, ShowColumns(colRoadMap, "ID","StartDate", "DueDate"))

Notice that in this case we are just saving back start date and due date