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

2 thoughts on “JqueryUI Tooltip with SharePoint Framework Field Customizer

Add yours

  1. Quick and efficient ! thx
    Which deployment method do you use ? Feature or global deployment ? I have had issue with the feature deployment… switched every deployment to global one

    1. This project and GitHub code sample was made by an older version of Yeoman template and there wasn’t that choice yet … just feature deployment … I think you must have some configuration mistakes

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 )

Google+ photo

You are commenting using your Google+ 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 )

w

Connecting to %s

Powered by WordPress.com.

Up ↑

%d bloggers like this: