Need Custom Widget to Cause Section View to Change

[JonathanKressin]

I have created a widget that queries and displays information when the map is clicked on.  For layout purposes, I am using a Section with three tabs (layers, legend, and results).  Does anyone know of a way to programmatically change the section view from inside the widget?  That way, when the map is clicked on, I can take users immediately back to the results view, potentially causing less confusion.

Thanks!

Jonathan

[Grant-S-Carroll · Accepted solution]

HI Jonathan

Yes, its possible, we are doing this for similar reasons to you, and we also have a custom navigation widget in our app. See the code below: 

 useSwitchView = (section: string, view: number) => {


        const state = getAppStore()?.getState();

        const views = state.appConfig.sections?.[section]?.views;
        const sectionNavInfo = state?.appRuntimeInfo?.sectionNavInfos?.[section];

        const visibleViews = sectionNavInfo?.visibleViews;
        
        if (views !== undefined) {
            let nextNavInfo = this.getProgressNavInfo(view, visibleViews, views);
            getAppStore().dispatch(appActions.sectionNavInfoChanged(section, nextNavInfo));
            
        }

    }

    getProgressNavInfo = (progress: number, visibleViews: ImmutableArray<string>, views: ImmutableArray<string> = Immutable([])): SectionNavInfo => {
        const result = getIndexFromProgress(progress, views.length);

        return Immutable({ visibleViews }).set('previousViewId', views[result.previousIndex])
            .set('currentViewId', views[progress])
            .set('useProgress', false)
            .set('progress', progress) as any;
    }

In the above you will need to have the following import statements from jimu-core

import { BaseWidget, AllWidgetProps, React, getAppStore, IMState, IMConfig, appActions, Immutable, ImmutableArray, SectionNavInfo, getIndexFromProgress } from 'jimu-core';

You can then use UseSwitchView to programatticaly change the view, where Section is the name of your section, and then View is the index number of the View you wish to switch to, you can find those details in the appConfig. 

There maybe better ways of doing this, but this was the approach I found and worked for me.

Hope that helps.

Cheers

[JonathanKressin]

Amazing!  Thank you so much for your help with this code.  Let me give it a shot and see how it works.  I'm slowly digging my way deeper into the framework, but there is still quite a learning curve understanding how to manipulate the various pieces.

Thanks again!

[JonathanKressin]

As a quick follow-up, your code worked perfectly!  Thanks again!

Jonathan

[MarkEastwood]

@Grant-S-Carroll, thank you for your solution. I'm currently trying to implement your solution in Experience Builder version 1.14 but encountering an issue. Initially, the code worked well, and the correct view opened as expected. However, when attempting to switch back to the previously opened view using a button linked to that view, nothing happened until I first opened another view.

Upon debugging, I observed that the view displayed in the URL did not change. For instance, if the Edit view was open, the URL would appear as follows:

https://localhost:3001/experience/dveg_bch/page/Page/?draft=true&views=Edit

Even after programmatically switching to the Map Layer view, the URL still showed views=Edit, despite the Map Layers view being open.

Additionally, I noticed that visibleViews always returns undefined, which may contribute to the issue.

Do you have any suggestions on how to resolve this and make it work in ExB v1.14?