Roadmap component in UI builder not rendering correctly

[spike]

Hello! Does anyone know anything about the Roadmap component in UI Builder?

I'm trying to get it to display my CIMs but it just doesn't want to work. The following code is what builds the JSON that forms the items for the roadmap (the client state parameter is bound to the item field).

The code only works if I use initiative.start_date for both the planned start and end date. If I change it (line 33) so it uses end_date to do the calculation it just doesn't work. I've been through all the CIMs and all have an end date populated and in call cases it is after the start date. Planned End Date (end_date is the actual column name) is pulled back but the data resource.

I can do things like start_date+30 and it still renders but there comes a point when it stops (about 46 I think). My guess is that there's an issue in overlapping items. However there's 50+ CIMs and they get spread over 20+ rows so I don't see how that's a constraint. (They all start at about the same time give or take a few months).

Any pointers would REALLY be appreciated, because I'm out of ideas!

/**
*  {params} params
*  {api} params.api
*  {any} params.event
*  {any} params.imports
*  {ApiHelpers} params.helpers
*/
function handler({api, event, helpers, imports}) {

    const improvements = api.data.improvement_initiatives.output.data.GlideRecord_Query.sn_cim_register._results;

    const items = [];
//    var roadmapStartDate = new Date();
//    var roadmapEndDate = new Date();

    improvements.forEach((initiative, index) => {

        console.log('SPIKE Doing ' + index);

        // We need to format the dates
        var startDate = new Date(initiative.start_date.value);
        var y = startDate.getFullYear();
        var m = startDate.getMonth() + 1;
        var d = startDate.getDate();
        var h = startDate.getHours();
        var mi = startDate.getMinutes();

        if(parseInt(mi) < 10) { mi = '0' + mi; }
        if(parseInt(h) < 10) { h = '0' + h; }

        var startDateString = y + '-' + m  + '-' + d + ' ' + h + ':' + mi + ':00';

        var endDate = new Date(initiative.start_date.value); //<--------- If I change this to end_date it doesn't render.
        y = endDate.getFullYear();
        m = endDate.getMonth() + 1;
        d = endDate.getDate();
        h = endDate.getHours();
        mi = endDate.getMinutes();

        if(parseInt(mi) < 10) { mi = '0' + mi; }
        if(parseInt(h) < 10) { h = '0' + h; }

        var endDateString = y + '-' + m  + '-' + d + ' ' + h + ':' + mi + ':00';

        console.log('start date: ' + startDateString);
        console.log('end date: ' + endDateString);

        // Get the start and end of the road map
//        if ( roadmapStartDate > initiative.start_date.displayValue ) {
//            roadmapStartDate = initiative.start_date.displayValue;
//        }

//        if ( roadmapEndDate > initiative.end_date.displayValue ) {
//            roadmapEndDate = initiative.end_date.displayValue;
//        }

        items.push({
            id: {
                value: index,
                displayValue: index
            },
            short_description: {
                value: initiative.short_description.displayValue,
                displayValue : initiative.short_description.displayValue
            },
            planned_start_date: {
                value: startDateString,
                displayValue : startDateString
            },
            planned_end_date: {
                value: endDateString,
                displayValue : endDateString
            },
            cim_coordinator: {
                value: initiative.assigned_to.displayValue,
                displayValue : initiative.assigned_to.displayValue
            },
            state: {
                value: initiative.state.displayValue,
                displayValue : initiative.state.displayValue
            },
            priority: {
                value: initiative.state.priority,
                displayValue : initiative.state.priority
            },

        });
    });

    console.log('roadmapItems', items);
    // Sets the client state parameters
    api.setState('roadmapItems', items);

}

[lauri457]

Tried to replicate your issues below but it worked fine for me. I didn't try with more than 11 records but I could adjust the duration to be whatever without anything breaking. Are you returning the end_date value from your data resource? 

Roadmap items:

/**
 * @Param {params} params
 * @Param {api} params.api
 * @Param {TransformApiHelpers} params.helpers
 */
function evaluateProperty({
    api,
    helpers
}) {
    const items = api.data.look_up_multiple_records_1.results;
    const ret = []
    items.forEach((item, i) => {
        ret.push({
            id: {
                value: i,
                displayValue: i
            },
            planned_start_date: {
                value: item.work_start.value,
                displayValue: item.work_start.value
            },
            planned_end_date: {
                value: item.work_end.value,
                displayValue: item.work_end.value
            },
            short_description: {
                value: item.number.value,
                displayValue: item.number.value
            }
        })
    })
    return ret;
}

Metadata:

/**
 * @Param {params} params
 * @Param {api} params.api
 * @Param {TransformApiHelpers} params.helpers
 */
function evaluateProperty({
    api,
    helpers
}) {
    const ret = {
        "startDateField": {
            "name": "planned_start_date",
            "label": "planned_start_date"
        },
        "endDateField": {
            "name": "planned_end_date",
            "label": "planned_end_date"
        },
        "itemNameField": {
            "name": "short_description",
            "label": "short_description"
        },
        "itemOwnerField": {
            "name": "assigned_to",
            "label": "assigned_to"
        },
        "groupableFields": [],
        "colorableFields": [],
        "metricsFields": []
    }
    return ret;
}

[spike]

Hello.

Yes planned_end_date is being pulled back by my data resource:

If I use the start date value for both the start and end dates in the JSON I get this:

If I just add 30 days to the start date and use that as the end date value I get this:

I'm assuming it's got something to do with start and end dates overlapping on a given row. But I've no idea how the rows are worked out, and why sometimes it moves something to a new row or doesn't. Looking at this output it looks like there might be a limit of five items per row. But that's just guessing.

At this point I don't really know how to progress..

Thanks.

[lauri457]

I assume the name and label of the fields you have in the data resource and script are a match?

I would log in console or something just to be sure your item objects are valid or to test your hypothesis you could try filtering the data to reduce the record count and see if it works with less records. 

[spike]

Hello.

Yes, the fields the data resource is returning match what is in the script. I've double checked the column names (they are from sn_cim_register).

I can reduce the number of rows returned. If I set it to anything 2 or below (!) it works. Anything above that and it doesn't render. This is the config:

I've logged the objects that my script is creating to the console and they are being created without issue. 

I'm pretty sure it's some feature of the component that's causing the issue. The lack of information and documentation from ServiceNow about it don't really help!

Thanks for your help here.