How to open a new workspace tab and close an existing tab in UI Builder

[Jon G Lind]

You may want to close the existing tab and open a new tab in response to a user interaction.  E.g., click the "Next" button which closes the current page and opens a new page.

Existing solutions, using "SCREEN_STATUS_CHANGED" have been surfaced, but the issue is that if you immediately open a new tab it's not in the foreground (you will likely end up with the List tab selected).

To solve this I have done two things.  One, I'm updating the screen status without adding a dispatched event using "helpers.screen.updateStatus" and two, yes, I'm using a timer. 

1. Add a new client script called "Delay and close" with the following line of script.

function handler({api, event, helpers, imports}) {
   helpers.timing.setTimeout(() => helpers.screen.updateStatus({status:"closed"}), 2000);
}

2. On your page navigate to the new page as you normally would, e.g. with "Link to destination" on a button, then call the Delay and close script after that.

Note: Don't judge me.  I don't love using timers for a variety of reasons.  Since this is effectively cleanup and won't block the new page from loading, this could be a good solution in many cases.  

[Reece Poulsen]

This is fantastic, you helped me connect the dots on a lot of things. Thanks for posting this! For anyone else that comes along, here is the documentation for the helpers.screen.updateStatus method 

[IronPotato]

Hi @Jon G Lind ,

thank you for this knowledge. I’d like to ask if you could maybe explain more about helpers.updateStatus method.

After reading docs….yes person knows what it should do, but what is the real use case and what it really does? What this properties mean for the outer shell? How the page will react after modifying properties of this method?

Any help would be appreciated.

Thank You.

[valter479]

Hi @Jon G Lind ,

This can be accomplish by only a script. It doesn't need a delay. 

function handler({api, event, helpers, imports}) {
    //Navigate to record
    helpers.navigate.to(
        "record", {
            table: event.payload.table,
            sysId: event.payload.sysId,
        },
        false,
        false,
        api.context.props.interactionRecordOpenedFor ? "current" : ""
    );

    //Close current tab
    api.emit("SCREEN_STATUS_CHANGED", {
        status: "closed",
        skipNextScreenActivation: true,
    });
}​

[IronPotato]

Hi@valter479 ,

do you happen to have any documentation how to properly use "SCREEN_STATUS_CHANGED" in UI builder?

Thanks.

[valter479]

@Hi @IronPotato,

No, I can't find any document on events used in UI Builder.

Thanks.