Need Custom Widget to Cause Section View to Change

211
3
Jump to solution
01-10-2022 12:05 PM
JonathanKressin
New Contributor

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

0 Kudos
1 Solution

Accepted Solutions
Grant-S-Carroll
Esri Contributor

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

View solution in original post

0 Kudos
3 Replies
Grant-S-Carroll
Esri Contributor

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

0 Kudos
JonathanKressin
New Contributor

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!

 

0 Kudos
JonathanKressin
New Contributor

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

Jonathan

0 Kudos