How to get data from external file in render function in tsx file

Question

I am developing an ApplicationCustomizer SPFX extension for SharePoint Online using visual studio code and react and Typesctipt. I am trying to generate a commandbar fabric ui component in the header section to render a fabric ui drop down menu. I have managed to get this working as per the getting started samples available online.

I need to read the menu items string from an external text file stored in SiteAssets folder on SharePoint which is in the required menu items format. Can someone please guide me on the correct way to update the code in getItems() functions to return the text from external file, below is 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: '#',
            },
          ],
        },
      },          
    ];  
  }  
}

score 0 · Accepted Answer · answered Sep 07 '20 at 06:01

@Osden Pereira,

Please take a reference of below code:

import * as React from 'react';
import styles from './Externalfile.module.scss';
import { IExternalfileProps } from './IExternalfileProps';
import { escape } from '@microsoft/sp-lodash-subset';
import { CommandBar } from 'office-ui-fabric-react/lib/CommandBar';
import { SPHttpClient, SPHttpClientResponse } from '@microsoft/sp-http';
import { IExternalfileState } from './IExternalfileState';

export default class Externalfile extends React.Component<IExternalfileProps, IExternalfileState> {

  constructor(props: IExternalfileProps) {
    super(props);
    this.state = {
      Items: []
    };
  }

  public render(): React.ReactElement<IExternalfileProps> {
    return (
      <div className={styles.externalfile}>
        <div className={"ms-bgColor-themeDark ms-fontColor-white"}>
          <CommandBar items={this.state.Items} />
        </div>
      </div>
    );
  }

  public componentDidMount() {
    this.getItems01();
  }

  // Data for CommandBar
  private getItems01() { 
    let url = this.props.ctx.pageContext.site.serverRelativeUrl + "/SiteAssets/testjson.txt";
    this.props.ctx.spHttpClient.get(url, SPHttpClient.configurations.v1).then(res => {
      return res.json();
    }).then(e => {
      this.setState({
        Items: e
      });
    });
  } 
}

IExternalfileState.ts:

export interface IExternalfileState {
  Items: [];
}

Json file:

[
   {
      "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":"#"
            }
         ]
      }
   }
]

BR

How to get data from external file in render function in tsx file

1 Answers1