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]

Not sure if you figured this out already but I tested this again with an arbitrary payload. The component tries to fit the nearest next item on the same row. Doubt there are limitations on the number per row. I would hypothesize that there is something that breaks on that 3rd record of your query array in the client script. 

I would try wrap the foreach callback in a try catch block to see if there is anything rendered then and any errors thrown.

[spike]

Pretty sure the rendering isn't done as part of the foreach loop. That is only building the JSON (which is well formed by the end). The rendering is done when the client state parameter is updated since that parameter is bound to the component. I don't think there's anyway to catch that in a try catch block.

[lauri457]

I might've written that bad, I meant that maybe an exception is thrown inside the callback on the third item for some reason and your state param ends empty/not updated. By wrapping the contents of the callback function in a try catch you can just disregard/log any exceptions and see if your state parameter and roadmap gets updated with at least >2 items

[lauri457]

Tried recreating what you have using sama data resources and a state param etc. and different ways to make it break with data but no luck. 

Might be worth creating a duplicate of the data resource on another table that has the same fields and enough data and see if this works after changing the client script accordingly. Other than that if the whole component borks, maybe you have a reference in some other component property to api.state.roadmapItems and it causes an error (empty datetimes for example get turned into "NaN-NaN-NaN NaN:NaN:00")

Or maybe update the roadmap component application if its not current?

[spike]

OK, I see what you mean.

Tried it, no error. I wasn't expecting one as if I print the JSON after the loop it's well formed and shows no issue.

Just to test things though I throw an arbitrary an error in the loop and the try block caught it as it should.

Therefore I conclude that it's not an issue in creating the JSON.

It's something in the component that can't render the data for some reason. But when it can't it's not providing any error. Very annoying!

Thanks for your help though.