Popular posts

Hi again, I finally I managed to make the dropdown react component work in my app. Now I have another dilema. I need to find a way to insert data into the dropdown. This is how my component looks like now:

import * as React from 'react';
import { Dropdown, DropdownMenuItemType } from "office-ui-fabric-react/lib/Dropdown";
import { BaseComponent } from "office-ui-fabric-react/lib/Utilities";
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 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>
    )
} 

export default footer;

I found a sample at MS home page that show how to create mockupDataProvider:

import { ISPList } from './HelloWorldWebPart';

export default class MockHttpClient  {

   private static _items: ISPList[] = [{ Title: 'Mock List', Id: '1' },
                                       { Title: 'Mock List 2', Id: '2' },
                                       { Title: 'Mock List 3', Id: '3' }];

   public static get(): Promise<ISPList[]> {
   return new Promise<ISPList[]>((resolve) => {
           resolve(MockHttpClient._items);
       });
   }
}

And how to implement it:

private _renderList(items: ISPList[]): void {
   let html: string = '';
   items.forEach((item: ISPList) => {
     html += `
   <ul class="${styles.list}">
     <li class="${styles.listItem}">
       <span class="ms-font-l">${item.Title}</span>
     </li>
   </ul>`;
   });

   const listContainer: Element = this.domElement.querySelector('#spListContainer');
   listContainer.innerHTML = html;
 }

As you see in the code sample, it is using a forEach to loop through the objects in the ISPList array.

My issue is how I replace this (from the dropdown component):

 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' }
                                ]}

With a loop like in the MS sample?

Here is the link to the MS sample for more details: Link