I have extension which uses the term store as navigation and on the other hand, I have dropdown list where it has the normal text (SiteA, SiteB, SiteC) with different SP site links on it (href). So, when I click it, I navigate to another site but the navigation from term store is not loaded on this navigated site.
Means it loads the previous site navigation from term store, however after some time (15 mins) when I hit refresh then it loads the navigation.
Not sure how I can make the other sites load navigation as soon as I navigate from one site to another.
@override
public onInit(): Promise<void> {
Log.info(LOG_SOURCE, `Initialized ${strings.Title}`);
this.context.application.navigatedEvent.add(this, () => {
Log(LOG_SOURCE, 'Navigated event');
this.termStoreloadingMethod();
});
super.onInit().then(_ => {
console.log("super oninit called");
sp.setup({
spfxContext: this.context,
defaultCachingStore: "local",
defaultCachingTimeoutSeconds: 30,
globalCacheDisable: false
});
}).then((_) => {
console.log("Sp Initilize");
this.context.placeholderProvider.changedEvent.add(this, this._renderPlaceHolders);
});
.tsx
private store = new PnPClientStorage();
constructor(props: IGlobalNavProps) {
super(props);
this.state = {
loading: false,
terms: []
};
}
public componentDidMount() {
this.setState({}, async () => {
// this portion is responsible for getting terms from term store
const cachedTermInfo = await this.store.local.getOrPut(myKey, () => {
return sp.termStore.groups.getById(this.props.termGroupId).sets.getById(this.props.termSetId).getAllChildrenAsOrderedTree({ retrieveProperties: true });
}, dateAdd(new Date(), "minute", 10));
if (cachedTermInfo.length > 0) {
console.log(cachedTermInfo);
this.setState({ terms: cachedTermInfo });
}
});
}
private menuItems(menuItem: any, itemType: ContextualMenuItemType) {
return ({
key: menuItem.id,
name: menuItem.defaultLabel,
itemType: itemType,
href: menuItem.children.length == 0 ?
((menuItem.localProperties != undefined && menuItem.localProperties[0].properties !== undefined && menuItem.localProperties[0].properties.length > 0) ?
menuItem.localProperties[0].properties.filter(x => x.key == "_Sys_Nav_SimpleLinkUrl")[0].value !== undefined ? menuItem.localProperties[0].properties.filter(x => x.key == "_Sys_Nav_SimpleLinkUrl")[0].value : null
: null)
: null,
subMenuProps: menuItem.children.length > 0 ?
{ items: menuItem.children.map((i) => { return (this.menuItems(i, ContextualMenuItemType.Normal)); }) }
: null,
isSubMenu: itemType != ContextualMenuItemType.Header,
buttonStyles: buttonStyle
});
}
public render(): React.ReactElement<IGlobalNavProps> {
var commandBarItems: any[] = [];
if (this.state.terms.length > 0) {
commandBarItems = this.state.terms.map((i) => {
return (this.menuItems(i, ContextualMenuItemType.Header));
});
}
This is what my onInit looks like but I get error when I add the code.
"Value of type 'typeof Log' is not callable. Did you mean to include 'new'?ts(2348) " and Property 'termStoreloadingMethod' does not exist on type 'NavApplicationCustomizer'.ts