5

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

enter image description here

I should get that

enter image description here

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

3
+50

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

  • The markup of the modern webpages changes constantly, so it is highly likely that the "classic" callout functionality, although it might work for a while right now, will stop working in the near future. Implementing this using Office UI fabric is the only sustainable solution here. (It's also relatively easy, and a lot of fun!) – Helge S Mar 12 '18 at 9:44
  • Hi @HelgeS, completely agreed with you. Since the user queried that he is porting an Add-in to SPFx, this might help for startup. After completely porting the Application, he might start leveraging the SPFx framework and will help him. I mentioned already Office Fabric UI is the MS recommended approach. – ThinkB4Code Mar 12 '18 at 16:28
  • I was able to remove the initial error but it is not behaving as expected. Am I missing something? – Student Mar 13 '18 at 9:23
  • Since, the SP JSOM is not available in modern sites, you are plugging them from the above command. Check if you are using any other component of SP JSOM as well, which is not included here. Also, if you are trying to display simple callouts, you must opt for Fabric UI. – ThinkB4Code Mar 13 '18 at 19:09
  • Checked your edit in post and identified that, this is the issue of CSS not loaded. You need include /_layouts/15/1033/styles/Themable/corev15.css. Use the same method above, but instead of loadScript method you need to call load loadStyle method. – ThinkB4Code Mar 13 '18 at 19:19
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.