UI Builder - how to configure Roadmap component

[Carlo3]

Hello All,

I was wondering if anyone has experience on the roadmap component to share with us.

I notice the examples in the official doc, but it  is  almost incomplete regarding the milestone object.

For example,   what could the structure of the roadmap item milestones object be to draw the milestones item on the gantt?

An example of json value would be very appreciated.

Many thanks

[Guido Bernuetz]

here an example

Milestone Items (as RoadmapMilestones and RoadmapItemMilestones )

{
    "roadmapItemMilestones": [
        {
            "RLSE0010010": [           // the ID aof an Roadmap Item
                {
                    "dueDate": {
                        "displayValue": "01.04.2023",
                        "value": "2023-04-01"
                    },
                    "id": {
                        "displayValue": "97f8699547a361102bb36241e36d4398",
                        "value": "97f8699547a361102bb36241e36d4398"
                    },
                    "name": {
                        "displayValue": "Customer Ref Item Milestone",
                        "value": "Customer Ref Item Milestone"
                    },
                    "state": {
                        "displayValue": "Achieved",
                        "value": "achieved"
                    },
                    "type": {
                        "displayValue": "Launch Date",
                        "value": "launch_date"
                    }
                }
            ]
        }
    ],
    "roadmapMilestones": [
        {
            "dueDate": {
                "displayValue": "2023-07-01 09:00:00",
                "value": "2023-07-01 09:00:00"
            },
            "id": {
                "displayValue": "M1",
                "value": "M1"
            },
            "name": {
                "displayValue": "Milestone 1",
                "value": "Milestone1"
            },
            "state": {
                "displayValue": "upcoming",
                "value": "upcoming"
            },
            "type": {
                "displayValue": "key_event",
                "value": "key_event"   // The type name must match with one of the types in Milestone Meta Data!
            }
        }
    ]
}

Milestone Meta Data:

{
    "type": {
        "important_date": {
            "icon": "calendar-clock-fill"
        },
        "key_event": {
            "icon": "flag-fill"
        },
        "launch_date": {
            "icon": "rocket-fill"
        }
    }
}

Good luck! I hope that it helps!

[Carlo3]

Thanks, Guido

but I need information on items milestone. Your example is not complete.

thank you anyway.

C.

[Guido Bernuetz]

see here: https://www.servicenow.com/community/next-experience-articles/the-roadmap-component/ta-p/2593317

[Guido Bernuetz · Accepted solution]

Explanation updated. see above