SOLVED

Using dataprovider in SPFX app customizer?

Regular Contributor

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

2 Replies
best response confirmed by Americo Perez (Regular Contributor)
Solution

I would suggest taking a look at the PnP SPFx Controls. They have a ListItemPicker control that does this for you.

 

https://sharepoint.github.io/sp-dev-fx-controls-react/controls/ListItemPicker/

 

 

Thanks!

The listItemPicker doesn't fetch with the customer requirement but in the same page there is a ListPicker that I will give it a try.

 

Thanks ofr the link.

 

Regards

Americo