Sp-dev-fx-webparts: Yammer Webpart

[sprider]

Category

• [ ] Question

What is the best way to load the below code in SharePoint Framework WebPart?

<script type="text/javascript" src="https://c64.assets-yammer.com/assets/platform_embed.js"></script> <div id="embedded-feed" style="height:400px;width:100%"></div> <script> yam.connect.embedFeed({ container: '#embedded-feed', network: 'tenant.onmicrosoft.com', feedType: 'open-graph', config: { defaultGroupId: 12345, showOpenGraphPreview: false, promptText: "Comment on this article", header: false, footer: false } }); </script>

[waldekmastykarz]

I would start with trying to load the platform_embed.js as an external script in config.json. The rest of the script I'd execute in the render method in a if (this.renderedOnce === false) clause. I haven't tried it, so can't tell for sure if it works, but that's what I'd start with.

[sprider]

Hi Waldek,

Thank you for your guidance. I am trying to import the external file with the below approaches but i am unable to get this working. Am i doing anything wrong?

Error: Cannot find module 'yammer'.

Option -1
External configuration
"yammer": "https://c64.assets-yammer.com/assets/platform_embed.js"
WebPart code
import yammer from 'yammer';

Option -2
External configuration
"yammer": {
"path": "https://c64.assets-yammer.com/assets/platform_embed.js",
"globalName": "yammer"
}
WebPart code
import * as yammer from 'yammer';

[sprider]

@waldekmastykarz

Any suggestions?

[waldekmastykarz]

If you haven't installed TypeScript typings for yammer then you can't use import * as yammer.... Instead, you would have to use require('yammer').

[sprider]

@waldekmastykarz

I guess If I do not install typings for yammer then I will get the below error when I use yam.connect.embedFeed()

Cannot find name 'yam'

[waldekmastykarz]

I haven't worked with the Yammer API and can't say if it has typings and in what state they are. If there are none, or if you can't use them, you can always fall back to not using types at all like:

(yam as any).connect.embedFeed();

While you will loose TypeScript's type safety features, you should be able to use the API.

[sprider]

@waldekmastykarz

I am getting the below error now

[waldekmastykarz]

Have you installed Yammer TypeScript typings? Have you configured them as global typings in tsconfig.json?

[sprider]

@waldekmastykarz

No i did not install any typings and tried as per your previous suggestion

[sprider]

@waldekmastykarz

Temporarily I have added the platform_embed.js code(https://c64.assets-yammer.com/assets/platform_embed.js) directly in my angular controller file to make this work.

I will have to figure out a way to load this platform_embed.js from external CDN

[sidjustsid]

Hi sprider ,
I have the same requirement of calling yammer api in sharepoint framework. Just wanted to check did you had any luck? If yes , could you help me with the snippet?

Thanks

[sprider]

@sidjustsid

For now I just added the platform_embed.js code directly in my JS file and it is working. You can check here

[sidjustsid]

Hi Sprider,
Firstly thanks for the reply.
In the article you have provided, there is only data coming from group feed. I want to call another yammer api and retrieve the results from json output. Can i do that?

Many thanks

[sprider]

@sidjustsid

Could you please share the api details? I will try and let you know

[sidjustsid]

Hi Sprider,
I tried to use home controller.js and included my own js. It is working fine.
But how can i call the functions specified in js in .ts file?
Also, can i use this without angular JS?

My api is a simple yammer api: https://www.yammer.com/api/v1/messages.json

Thanks
Sid

[waldekmastykarz]

@sprider if yam is a global object, then you would have to change the way you reference it to (window as any).yam.

[sprider]

@waldekmastykarz

Will this work without installing typings for the platform_embed.js file?

[sprider]

@sidjustsid

Hope you went through this awesome example for your requirement.

This example describes about token generation logic. Once you get the token, you just need to pass that as a request header as shown below
Authorization: Bearer {TokenValue}

[waldekmastykarz]

@sprider yes, it should, because by casting the window object to any you basically explicitly state that you want to disregard typings and use it like plain JavaScript.

[sprider]

@waldekmastykarz

Perfect, Thank you. Let me try and keep you posted.

[sidjustsid]

@waldekmastykarz So can we call a function inside that js like (window as any).yammer.platform.request

[waldekmastykarz]

@sidjustsid yes, you should be able to do that.

[sidjustsid]

Hi @waldekmastykarz
I don't know where i am doing wrong,
Please find the steps i am following below:
Specifying details in config.json:
"externals": {},
"localizedResources": {
"oneSpfxStrings": "webparts/oneSpfx/loc/{locale}.js",
"yammer": {
"path": "https://c64.assets-yammer.com/assets/platform_js_sdk.js",
"globalName": "yammer",
"globalDependencies": [ "yammer" ]
}

Calling in .ts file:

(window.any).yammer.platform.request

Error:
platform is not identifying by (window.any).yammer

[sidjustsid]

I want to call this function
yam.platform.request(
{
url: "https://api.yammer.com/api/v1/messages/in_group/GroupID.json" //replace the group ID with yours
, method: "GET"  

  ,success: function (data) { }

)};

[waldekmastykarz]

Ok, so by adding yammer to externals you only specify its URL but actually not load it. So on top of what you're already doing you'd need to add require('yammer'); just under the last import statement in your web part.

If you want to call yam.platform.request then you should use (window as any).yam.platform.request instead of (window as any).yammer.platform.request

[sidjustsid]

@waldekmastykarz I would be thankful if you can tell me where iam going wrong by looking those images attached.

[waldekmastykarz]

yammer in config.json should go to externals instead of localizedResources

[sidjustsid]

Now

My Config file:

[waldekmastykarz]

One more thing I noticed in your externals section is that you defined yammer as dependency for itself. You should remove the globalDependencies entry from the yammer definition in your config.json file.

[sidjustsid]

Hi @waldekmastykarz I have removed global dependencies, but why is yammer module not recognizing by SPFX? Im afriad..!!

[sidjustsid]

Hi @waldekmastykarz

A big Cheers for you!

Finally i have called a js file function. The only issue is i am able to call the function only if i enable CORS extension in the browser.
Because i am getting below error.
XMLHttpRequest cannot load https://www.yammer.com/api/v1/messages/in_thread/GID.json. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'SharepointURL' is therefore not allowed access.

[waldekmastykarz]

This could have to do with how Yammer is hosting its scripts and is nothing you can really do about other than not use their SDK and call the REST API instead.

[sidjustsid]

@waldekmastykarz I am facing the same issue if i use Yammer RESTAPI as well by using httpClient.

[waldekmastykarz]

Unfortunately I don't know the Yammer API so I'm afraid I won't be able to much of much more help. Perhaps you could reach out to Yammer and see if they can help?

[sidjustsid]

@waldekmastykarz Thanks a ton. This thread will perhaps helps more folks by your valuable suggestions which you have given above. Cheers..!!!!

Thanks
Siddhartha

[sidjustsid]

@waldekmastykarz This issue got resolved by providing the site URL in the javascript origin of Yammer app.

[waldekmastykarz]

Excellent!

[sprider]

As we resolved this issue, I am going to close this thread.

[jasong1987]

what was your final code on config.json and your web part - I am too have the same issue

I have the following:

config.json

"externals": {
    "YammerEmbed": {
      "path": "https://c64.assets-yammer.com/assets/platform_embed.js",
      "globalName": "YammerPlatformEmbedJS"
    }
  }

webpart.ts
require("YammerEmbed");

but get this error
Uncaught (in promise) Error: *Failed to load path dependency "YammerEmbed" from component "938b56a1-6e30-49fe-b8df-b3af9d1c7441" (YammerOpenGraphWebPart).
Original error: Error loading https://component-id.invalid/938b56a1-6e30-49fe-b8df-b3af9d1c7441_0.0.1/YammerEmbed
Evaluating https://c64.assets-yammer.com/assets/platform_embed.js
YammerEmbed is not defined
at t [as constructor] (sp-webpart-workbench-assembly_en-us_0853d745e94eacb644a72e3d0fef43f3.js:formatted:34188)
at new t (sp-webpart-workbench-assembly_en-us_0853d745e94eacb644a72e3d0fef43f3.js:formatted:71178)
at Function.e.buildErrorWithVerboseLog (sp-webpart-workbench-assembly_en-us_0853d745e94eacb644a72e3d0fef43f3.js:formatted:70883)
at Function.e.buildLoadPathDependencyError (sp-webpart-workbench-assembly_en-us_0853d745e94eacb644a72e3d0fef43f3.js:formatted:70817)
at sp-webpart-workbench-assembly_en-us_0853d745e94eacb644a72e3d0fef43f3.js:formatted:73335
at sp-webpart-workbench-assembly_en-us_0853d745e94eacb644a72e3d0fef43f3.js:formatted:73358