Currently, I am working on developing an ApplicationCustomizer SPFX extension for SharePoint Online using visual studio code and react with Typescript. My goal is to incorporate a commandbar fabric UI component in the header section to display a fabric UI drop-down menu. So far, I have successfully implemented this based on the available sample codes.
However, I now need to retrieve the menu items string from an external text file located in the SiteAssets folder on SharePoint. This text file contains the required menu items format. Can someone provide me with guidance on how to modify the code within the getItems() function to fetch the text from an external file? Below is an excerpt of my tsx code file:
import * as React from "react";
import { Link } from 'office-ui-fabric-react/lib/Link';
import { CommandBar } from 'office-ui-fabric-react/lib/CommandBar';
import { SPHttpClient, SPHttpClientResponse, SPHttpClientConfiguration } from '@microsoft/sp-http';
export interface IReactHeaderProps { }
export default class ReactHeader extends React.Component<IReactHeaderProps> {
constructor(props: IReactHeaderProps) {
super(props);
}
public render(): JSX.Element {
return (
<div className={"ms-bgColor-themeDark ms-fontColor-white"}>
<CommandBar items={this.getItems()} />
</div>
);
}
// Data for CommandBar
private getItems = () => {
return [
**
{
key: 'menu1',
name: 'Main Menu 1',
cacheKey: 'myCacheKey',
iconProps: { iconName: 'ChevronDown' },
href: '#' ,
subMenuProps: {
items: [
{
key: 'submenu1',
name: 'Option 1',
href: '#',
},
{
key: 'submenu2',
name: 'Option 2',
href: '#',
},
],
},
},
{
key: 'menu2',
name: 'Main Menu 2',
cacheKey: 'myCacheKey',
iconProps: { iconName: 'ChevronDown' },
href: '#',
subMenuProps: {
items: [
{
key: 'submenu3.1',
name: 'Option 1',
href: '#',
subMenuProps: {
items: [
{
key: 'submenu3.2',
name: 'Option 1.1',
href: '#',
},
{
key: 'submenu4.2',
name: 'Option 1.2',
href: '#',
},
],
},
},
{
key: 'submenu4',
name: 'Option 2',
href: '#',
},
],
},
},
];
}
}