New landing page.

If a new landing page is needed, this section provides assistance for its implementation.

There are two approaches to creating a new landing page: one can develop it as internal code or as a new Fusion application. If the decision is made to develop it as an application, some effort will be required to enable the same functionality as the existing landing pages, as they utilize core functionality that is not accessible via npm.

PortalPage.ts

export const PortalPage = (prop: { route?: Omit<PortalRoute, 'path'> }) => {
    switch (prop.route?.pageKey) {
        case 'project-portal':
            return <ProjectPortalPage />;
        case 'project':
            return <ProjectPage />;
        case 'facility':
            return <FacilityPage />;
        case 'newPageKey': // new page kan be added here 
            return <NewLandingPageComponent />;
        default:
            return <LoadPage pageKey={prop.route?.pageKey} message={prop.route?.messages?.loadingMessage} />; // new page kan be loaded here if landing page is application 
    }
};

You will need to configure the route for the new landing page. this can be done in the portal-framework-config.tsx file

portal-framework-config.tsx

        enablePortalConfig(config, (builder) => {
            builder.setConfig({
                portalId: portalConfig.portalId,
                portalEnv: portalConfig.fusionLegacyEnvIdentifier,
            });

            builder.setRoutes({
                root: {
                    pageKey: 'project-portal',
                },

                routes: [
                    {
                        path: 'project/*',
                        pageKey: 'project',
                        messages: {
                            errorMessage: 'Fail to load project page',
                        },
                        children: [
                            {
                                messages: {
                                    errorMessage: 'Fail to load project page',
                                },
                                path: ':contextId',
                                pageKey: 'project',
                            },
                        ],
                    },
                    {
                        path: 'facility/*',
                        pageKey: 'facility',
                        messages: {
                            errorMessage: 'Fail to load facility page',
                        },
                        children: [
                            {
                                messages: {
                                    errorMessage: 'Fail to load facility page',
                                },
                                path: ':contextId',
                                pageKey: 'facility',
                            },
                        ],
                    },

                    // new landing page route is configured.
                    {
                        path: 'new-landing-page/*',
                        pageKey: 'newLandingPage', // this ned to be the same as used in switch case for page loading or appKey of the landing page application
                        messages: {
                            errorMessage: 'Fail to load new landing page',
                        },
                        children: [
                            {
                                messages: {
                                    errorMessage: 'Fail to load new landing page',
                                },
                                path: ':contextId',
                                pageKey: 'newLandingPage',
                            },
                        ],
                    },
                ],
            });
        });

if the page is going to be accessed when a context is selected this can be add here in the ContextSelector.tsx file

ContextSelector.tsx

    useEffect(() => {
        //TODO: this should be configurable!
        modules.event.addEventListener('onCurrentContextChanged', (event) => {
        
            // Add any logic here for navigation to new landing page
            const url = new URL(getContextPageURL(event.detail.next), location.origin);


            // Do not navigate if we are on a application route
            if (location.href !== url.href && !location.href.includes('apps/')) modules.navigation.replace(url);
        });
    }, []);