Situation
When opening a Now Experience page with a List component and click on the'New' button, nothing happens.
You would expect that clicking on the New button would open a new page to allow you to create a new record. For some unexplainable phenomenon it's not the case, but don't worry there is a ...
Solution
to make the 'New' button in the List component work.
The list component has been updated in Quebec Patch 8 and Rome Patch 1 (*) and now exposes an event "New Button Clicked" that we can use to bridge this gap.
(*) to be released on September 16, 2021,
Steps
In your Now Experience page containing the List component follow these steps:
1. Open the Page scripts section (</> symbol in left menu bar)
2.click "Add"
a) name the script "Open Record from List",
b) add "recordRoutesMapping" as a script include
c) add the following code body:
function handler({api, helpers, event, imports}) {
const { buildDefaultRoutePayload
} = imports["global.recordRoutesMapping"]();
var route = 'record';
var targetRoute = '';
const defaultRoutePayload = buildDefaultRoutePayload(route, targetRoute, event);
api.emit('NAV_ITEM_SELECTED', defaultRoutePayload);
}
3. Close the Page scripts section to return to the "Pages" section.
4. Click the list component and switch to the "Events" tab.
5. Connect the New button to the Script
a. Under the "New Button Clicked" dropdown, click "Add a new event handler"
b. Select the "Open Record from List" script, then click "Add".
6. Save the page
7. Launch your experience, click on the New button and Voila! it now opens a new page to allow you to create a new record.
