Is Callouts available in SharePoint Framework

Question

I have a classic SharePoint Add-in and I am trying to convert it into SharePoint framework Webpart.

I am getting the following error

Cannot read property 'getFromLaunchPointIfExists' of undefined

So I was wondering if callouts are available in Spfx. I can not find any information about it on the internet?

If it is not available what are the alternatives to achieve the same results?

Edit By including the below mentioned files and core.js I was able to remove the error but now on clicking the button which uses call out I get this

I should get that

It is the same code so I expected it to behave same

Answer 1

SPFx framework by default doesn't include SP JS. There are following two solutions,

1. Include the JS Reference (In order to reduce the code change)
2. Use the Office Fabric UI (Microsoft recommended way in SPFx)

1. Add JS Reference
In order to get Callout feature to SPFx solution you need to include following JS references:

1. /_layouts/15/init.js"
2. /_layouts/15/mQuery.js"
3. /_layouts/15/sp.ui.dialog.js"
4. /_layouts/15/sp.runtime.js"
5. /_layouts/15/sp.js"
6. /_layouts/15/callout.js"

To add these references you can use following line of code:

import {SPComponentLoader} from '@microsoft/sp-loader';
public onInit(): Promise<any>{
        const siteColl = this.context.pageContext.site.absoluteUrl;
        const curr = this;
        return SPComponentLoader.loadScript(`${siteColl}/_layouts/15/init.js`, 
            { globalExportsName: '$_global_init'}
        ).then(() => {
            return SPComponentLoader.loadScript(`${siteColl}/_layouts/15/init.js`, 
                { globalExportsName: '$_global_mquery'}
            ).then(() => {
                // Include rest of JS in same nested manner. After last JS added, in its resolve part add following line;
                curr.render();
                return;
            });
        });
    }

2. User Fabric UI
SPFx comes with Fabric UI, which is the Microsoft way of creating the UI in Modern Sites. You can use the same to make your application adapt Modern site look and feel.

You can learn how to use Fabric UI from the site. It has list of components it offers and the examples on how to implement it. For callout follow the URL: https://developer.microsoft.com/en-us/fabric#/components/callout

Answer 2

The modern webpages of SharePoint Online are completely different from the old ones. You no longer have the SP.UI-library available, you don't even have _spPageContextInfo available.

You should not try to "hack" this to work, even if you make it work for a short while, I can guarantee you that it will stop working eventually.

To do this properly, you need to follow the new standards, and luckily, they're quite easy and fun to work with!

Follow this guide to get started.

Use SPHttpClient to query the REST-services, and use Office UI Fabric to display your callout.