Thursday, June 13, 2019

Procedure to use new custom properties to SPFx ListView Command project

If you need to add a new custom property like "sampleTextThree" with value "This is new text." to be used in SPFX extension ListView Command project. You should following the following steps.
1. Add sampleTextThree as string in the interface
sampleTextOne: string;
sampleTextTwo: string;
sampleTextThree: string;

2. Add property to serve.json like below.

"default": {
"pageUrl": "https://mysompont.sharepoint.com/sites/HarryTestX/Shared%20Documents/Forms/AllItems.aspx",
"customActions": {
"4de6483f-cccf-465d-b0ee-4aa6ebb0eb81": {
"location": "ClientSideExtension.ListViewCommandSet.CommandBar",
"properties": {
"sampleTextOne": "One item is selected in the list",
"sampleTextTwo": "This command is always visible.",
"sampleTextThree": "This is new text."
...

3. Change the default alert to use new property.

switch (event.itemId) {
case 'COMMAND_3':
Dialog.alert(${this.properties.sampleTextThree});
...

4. Gulp serve run locally is fine. However, after this deployed to tenant, the property cannot be found and is "null" as indicated in here.

You should add another step#5.
5. Add the new custom property to "elements.xml" like below.
 ClientSideComponentProperties="{"sampleTextOne":"One item is selected in the list.", "sampleTextTwo":"This command is always visible."**, "sampleTextThree":"This command is new text."**}">

From my understanding, the serve.json is used by run locally "gulp serve" and the elements.xml is used by SharePoint online tenant. At this point, the new property can be picked up locally or deployed to SPO tenant.
I'm hoping the SPFx can enhance the build process to incorporate the configuration from serve.json and build to element.xml.

One trick to resolve SPFx extension ListView Commands loading manifests script error

As a SharePoint framework (SPFx) developer, three is continues challenge on daily development. There is a common error after run the SPFx extension ListView Commands project locally. The issue is after you have run "gulp serve" once against one site collection and then stopped the local gulp serve, there is always a error message when you browse the site. Here is the error message and the screenshot.

"Error loading debug script. Ensure the server is running and the “debugManifestsFile” parameter URL is correct."

Error: Script error for "https://localhost:4321/temp/manifests.js" 
https://requirejs.org/docs/errors.html#scripterror


Even you have the solution deployed and the SPFx command added to the site, after this message, the commands will NOT appear on the list or library.

After frustration debugging this issue, here is the procedure to resolve this issue.

1. Logout from SharePoint online.
2. Clear browse cache.
3. Login to SharePoint again

You might need to do this few time until cache is cleaned. You could also open another private browser to avoid this issue.



Wednesday, June 12, 2019

How to add office fabric icon to SharePoint framework extension ListView Commands

When you use SharePoint framework extension ListView Commands, you will notice that the icon is configured to point to the local file like the configuration below.

  "items": {
    "COMMAND_1": {
      "title": { "default": "Eln Init" },
      "iconImageUrl": "icons/cancel.png",
      "type": "command"
    }
  }

Unless you download and place the icon to some where, there is no OoB easy way to point to office fabric icon. There is a user voice you should vote so this can be added in the future. At meantime, here is the way to use as base64-encoded image described here as the workaround.

Here is the detailed procedure to convert Office fabric UI icons to base64-encoded image so you could use in the SPFx extension ListView Commands.

1. Search the Office fabric UI icons you need here and copy the icon name like "Archive".

2. Use Josh's tool online to convert to base64-encoded image. You could change the color and some other parameters. After clicking the "Render Front Icon", you could copy the "Data URL" as the base64-encoded image.



3. You could "Color picker" online to identify the color you need as the screenshot below.


4. You could paste the copied to serve.json.

  "items": {
    "COMMAND_1": {
      "title": { "default": "Eln Archive" },
      "iconImageUrl": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA......",
      "type": "command"
    }

  }

Now the icon will be displayed after solution deployed.


Of cause you could also download the icon and placed to CDN or local SharePoint site. Hope the future enhancement will allow us to direct point to office fabric icon.

Monday, June 3, 2019

Different ways to add icon to your react office fabric UI project

You might need to add icons to your react office fabric UI project and here are different ways for your reference.

1. Add Office fabric icon directly if the component accept icon attribute. Here is one example for Pivot component for "Search" icon and "SearchAndApps" icons. The UI is displayed as the screenshot below.

              <Pivot>
                  <PivotItem headerText="Search by Isis Numbers" itemIcon="Search">
                    {/* Some React components here*/}
                  </PivotItem>
                  <PivotItem headerText="Search by Compound or Target" itemIcon="SearchAndApps" onRenderItemLink={this._customRenderer}>
               {/* Some React components here*/}                   
                  </PivotItem>

              </Pivot>


2. Add icon as separate component. Here is example to display lightbulb. There is limited style you could apply.

<div className={styles.row}>
<div className={styles.column}>
<Label required={true}> Submission Content </Label>
<Icon iconName={'Lightbulb'} className="ms-IconExample" />
</div>
</div>


You will see the lightbulb icon is in different row and it's difficult to display next to the Label in the same row. Another challenge is it's not possible to add event handler to the icon. The third challenge is the icon size is as default and will be difficult to change.

3. The third way is to convert icon to "svg" format and display in the component as below.

<div className={styles.row}>
<div className={styles.column}>
<Label required={true}> Submission Content </Label>
<svg className="umbrella" xmlns="http://www.w3.org/2000/svg"
width="32" height="32" viewBox="0 0 32 32" aria-labelledby="title">
<title id="title">Umbrella Icon</title>
<path d="M27 14h5c0-1.105-1.119-2-2.5-2s-2.5
0.895-2.5 2v0zM27 14c0-1.105-1.119-2-2.5-2s-2.5
0.895-2.5 2c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5
2v0 14c0 1.112-0.895 2-2 2-1.112 0-2-0.896-2-2.001v-1.494c0-0.291
0.224-0.505 0.5-0.505 0.268 0 0.5 0.226 0.5 0.505v1.505c0
0.547 0.444 0.991 1 0.991 0.552 0 1-0.451
1-0.991v-14.009c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5
2c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5
2c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2c0-5.415 6.671-9.825
15-9.995v-1.506c0-0.283 0.224-0.499 0.5-0.499 0.268 0 0.5 0.224
0.5 0.499v1.506c8.329 0.17 15 4.58 15 9.995h-5z"/>
{/* This is not wrorking!!! onMouseOut={() => this.mouseOut()}
onMouseOver={() => this.mouseOver()}>{this.label(this.state.displayDescription)} */}
</svg>
</div>
</div>


As you can see the same issue the icon is in separate line and cannot add event to the component. However, it's very easy to adjust the size of the icon. You could search the different methods to convert existing icon to svg format.

4. The forth way is to add emoji icon as text direct to the label. Here is one example.


  private label = displayDescription => {
    if (displayDescription === null) {
        return 'Mouse over to see the magic!';
      }
      return displayDescription ? 'Submission Content Details' : 'Submission Content 🔍';

  }

<div className={styles.row}>
<div className={styles.column}>
<Label required={true} onMouseOut={() => this.mouseOut()}
onMouseOver={() => this.mouseOver()}>{this.label(this.state.displayDescription)}
</Label>
</div>
</div>

You can see the icon is next to the label in same line. You could add event to the component. The only challenge is difficult to change the size of the icon.

Now you have the different ways to add icons to your React Office UI project. There are many different icons you could use. Here is the list.


  • Office fabric UI icons here and examples here
  • Material UI icons here and examples here
  • Semantic icons here
  • Fount awesome icons here
  • Other icon here
If you need to add icons to SharePoint list as list format, you could refer the good articles here.