Forum Discussion

Americo Perez's avatar
Americo Perez
Iron Contributor
Jan 31, 2019

Using dataprovider in SPFX app customizer?

Hi,

 

I have a app customizer that shows a footer and in this footer there is a dropdown component that should get data from a sharepoint list. 

The dropdown component is the same that you can find in the microsoft fabric ui page: Dropdown

 

What I don't know is whow to create a dataprovider to fill the options property of the Dropdown component. 

 

I took a look tho this sample : connect to sharepoint where I can see how to use  mockupdata and loop through item with a forEach. The problem is that sample shows how to create a list and what I need is fill the options property of the Dropdown. 

 

This is how my code looks right now: 

FooterApplicationCustomizer.ts

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { override } from '@microsoft/decorators';
import { Log } from '@microsoft/sp-core-library';
import {
     BaseApplicationCustomizer, PlaceholderContent, PlaceholderName
} from '@microsoft/sp-application-base';
import * as strings from 'FooterApplicationCustomizerStrings';
import Footer from './components/Footer';

const LOG_SOURCE: string = 'FooterApplicationCustomizer';

export interface IFooterApplicationCustomizerProperties {
}

export default class FooterApplicationCustomizer
     extends BaseApplicationCustomizer<IFooterApplicationCustomizerProperties> {
 @override
 public onInit(): Promise<void> {
       Log.info(LOG_SOURCE, `Initialized ${strings.Title}`);
       let placeholder: PlaceholderContent;
       placeholder = this.context.placeholderProvider.tryCreateContent(PlaceholderName.Bottom);
       const elem = React.createElement(Footer);
       ReactDOM.render(elem, placeholder.domElement);
      return Promise.resolve();
}
}

This is the Footer component: For this I have two versions and I don't know which one is better to use: 

V1: 

import * as React from 'react';
import { Dropdown, DropdownMenuItemType } from "office-ui-fabric-react/lib/Dropdown";
import styles from './Footer.module.scss';
const footer = (props) => {
      return (
           <div className={styles.footer}>
                 <div className={styles.main}>
                        <div className="ms-Grid">
                                <div className="ms-Grid-row">
                                       <div className="ms-Grid-col ms-sm6 ms-md8 ms-lg10">
                                                 <p>other text</p>
                                        </div>
                                      <div className="ms-Grid-col ms-sm6 ms-md4 ms-lg2">
                                               <Dropdown
                                                       placeHolder="select an option"
                                                       options={[
                                                               { key: 'Header', text: 'Actions', itemType: DropdownMenuItemType.Header },
                                                               { key: 'A', text: 'Option a', title: 'I am option a.' },
                                                              { key: 'B', text: 'Option b' },
                                                             { key: 'C', text: 'Option c', disabled: true },
                                                            { key: 'D', text: 'Option d' },
                                                        ]}
                                               />
                                   </div>
                           </div>
                 </div>
        </div>
</div>

 )

}

export default footer;

V2:

import * as React from 'react';
import { Dropdown, DropdownMenuItemType } from "office-ui-fabric-react/lib/Dropdown";
import styles from './Footer.module.scss';

export class Footer extends React.Component<{}, {}> {
         constructor(props: {}) {
                super(props);
         }

         public render(): JSX.Element {
              return (
                   <div className={styles.footer}>
                              <div className={styles.main}>
                                         <div className="ms-Grid">
                                                    <div className="ms-Grid-row">
                                                                  <div className="ms-Grid-col ms-sm6 ms-md8 ms-lg10">
                                                                             <p>Other text</p>
                                                                   </div>
                                                                  <div className="ms-Grid-col ms-sm6 ms-md4 ms-lg2">
                                                                               <Dropdown
                                                                                             placeHolder="select a option"
                                                                                             options={[
                                                                                                      { key: 'Header', text: 'Actions', itemType: DropdownMenuItemType.Header },
                                                                                                      { key: 'A', text: 'Option a', title: 'I am option a.' },
                                                                                                      { key: 'B', text: 'Option b' },
                                                                                                      { key: 'C', text: 'Option c' },
                                                                                                      { key: 'D', text: 'Option d' },
                                                                                                      { key: 'E', text: 'Option e' }
                                                                                             ]}
                                                                                 />
                                                                  </div>
                                                  </div>
                                    </div>
                       </div>
           </div>
)
}
}

 

I appreciate any help!

Best regards

Americo

developer

Resources