JqueryUI Tooltip with SharePoint Framework Field Customizer

Two weeks ago I wrote a blog post about new SharePoint Framework Extensions – Application Customizers. Another part of new SharePoint Framework Extensions are Field Customizers. They are for client-side Field customizing in SharePoint Lists & Libraries Views.

For my SPFx Field Customizer example I’m going to show you scenario with additional text from some other field on mouse-over event inside specific field.

Lets start. Create new SPFx Extension named spfx-fieldcustomizer with Yeoman generator. Choose Extension (Preview) as the client-side component type and Field Customizer (Preview) as the extension type to be created.

In additional install JQuery v1.12.4 and JQueryUI v1.11.1 for JqueryUI Tooltip with commands below:

npm install --save jquery@1.12.4
npm install --save jqueryui@1.11.1

Then install SP-PnP-JS which we will use it for reading additional field from specific list item.

npm install --save sp-pnp-js

Open project with Visual Studio Code. Then firstly add specific import statements at the top of the HelloWorldFieldCustomizer.ts file:

import * as jQuery from 'jquery';
import 'jqueryui';

import { Log } from '@microsoft/sp-core-library';
import { override } from '@microsoft/decorators';
import {
  CellFormatter,
  BaseFieldCustomizer,
  IFieldCustomizerCellEventParameters
} from '@microsoft/sp-listview-extensibility';

import * as strings from 'helloWorldStrings';
import styles from './HelloWorld.module.scss';

import pnp, { List, ItemUpdateResult, Item } from 'sp-pnp-js';
import { SPComponentLoader } from '@microsoft/sp-loader';

Clean export interface because we don’t need any additional properties:

export interface IHelloWorldProperties {
}

Load Jquery-UI CSS inside onInit() method:

@override
public onInit(): Promise<void> {
    SPComponentLoader.loadCss('//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css');

    return Promise.resolve<void>();
}

We need to update onRenderCell() method. There we read additional description from AdditionalDescription field which is hidden from view. Because of that we need to get content of field via sp-pnp-js from specific list item (ID as reference). In the end we need to call JqueryUI Tooltip.

@override
public onRenderCell(event: IFieldCustomizerCellEventParameters): void {
pnp.sp.web.lists.getByTitle(this.context.pageContext.list.title).items.getById(parseInt(event.row.getValueByName('ID').toString()))
            .get()
            .then(r => {
              event.cellDiv.innerHTML = '&lt;div class="spfx-tooltip"&gt;&lt;a href="#" title="' + r.AdditionalDescription + '"&gt;' + CellFormatter.renderAsText(this.context.column, event.cellValue) + '&lt;/a&gt;&lt;/div&gt;';         

              jQuery(function() {
                  jQuery('.spfx-tooltip').tooltip();
              });
            });
}

This is all of code for this example. Serve project with command below:

gulp serve --nobrowser

Then go to your O365 developer tenant site. Create list named Tasks with three fields:

  • Title: single line
  • Description: single line
  • AdditionalDescription: multiple lines (hidden from view)

Add new test task and append this query string to your list view URL (replace with your extension ID from manifest.json file):

?loadSPFX=true&debugManifestsFile=https://localhost:4321/temp/manifests.js&fieldCustomizers={"Description":{"id":"[your-extension-id]"}}

As you can see, now we have JQueryUI Tooltip on Description field (defined in query string).

2017-07-22_2226

[ Complete code on GitHub ]

Cheers!
Gašper Rupnik

{End.}

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Powered by WordPress.com.

Up ↑

%d bloggers like this: