Comments (39)
@waldekmastykarz This issue got resolved by providing the site URL in the javascript origin of Yammer app.
from sp-dev-fx-webparts.
Perfect, Thank you. Let me try and keep you posted.
from sp-dev-fx-webparts.
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.
from sp-dev-fx-webparts.
@waldekmastykarz Thanks a ton. This thread will perhaps helps more folks by your valuable suggestions which you have given above. Cheers..!!!!
Thanks
Siddhartha
from sp-dev-fx-webparts.
Excellent!
from sp-dev-fx-webparts.
As we resolved this issue, I am going to close this thread.
from sp-dev-fx-webparts.
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.
from sp-dev-fx-webparts.
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';
from sp-dev-fx-webparts.
Any suggestions?
from sp-dev-fx-webparts.
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')
.
from sp-dev-fx-webparts.
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'
from sp-dev-fx-webparts.
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.
from sp-dev-fx-webparts.
I am getting the below error now
from sp-dev-fx-webparts.
Have you installed Yammer TypeScript typings? Have you configured them as global typings in tsconfig.json?
from sp-dev-fx-webparts.
No i did not install any typings and tried as per your previous suggestion
from sp-dev-fx-webparts.
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
from sp-dev-fx-webparts.
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
from sp-dev-fx-webparts.
For now I just added the platform_embed.js code directly in my JS file and it is working. You can check here
from sp-dev-fx-webparts.
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
from sp-dev-fx-webparts.
Could you please share the api details? I will try and let you know
from sp-dev-fx-webparts.
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
from sp-dev-fx-webparts.
@sprider if yam
is a global object, then you would have to change the way you reference it to (window as any).yam
.
from sp-dev-fx-webparts.
Will this work without installing typings for the platform_embed.js file?
from sp-dev-fx-webparts.
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}
from sp-dev-fx-webparts.
@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.
from sp-dev-fx-webparts.
@waldekmastykarz So can we call a function inside that js like (window as any).yammer.platform.request
from sp-dev-fx-webparts.
@sidjustsid yes, you should be able to do that.
from sp-dev-fx-webparts.
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
from sp-dev-fx-webparts.
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) { }
)};
from sp-dev-fx-webparts.
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
from sp-dev-fx-webparts.
@waldekmastykarz I would be thankful if you can tell me where iam going wrong by looking those images attached.
from sp-dev-fx-webparts.
from sp-dev-fx-webparts.
from sp-dev-fx-webparts.
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.
from sp-dev-fx-webparts.
Hi @waldekmastykarz I have removed global dependencies, but why is yammer module not recognizing by SPFX? Im afriad..!!
from sp-dev-fx-webparts.
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.
from sp-dev-fx-webparts.
@waldekmastykarz I am facing the same issue if i use Yammer RESTAPI as well by using httpClient.
from sp-dev-fx-webparts.
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?
from sp-dev-fx-webparts.
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
from sp-dev-fx-webparts.
Related Issues (20)
- react-kanban-board - Error: Cannot find module 'node:os' HOT 4
- Custom layout template hangs page and never loads entries
- react-script-editor: Your dev environment is running NodeJS version v20.10.0 which does not meet the requirements for running this tool. HOT 1
- react-list-search - HOT 1
- js-advanced-commenting ping user notification? HOT 1
- react-modern-version-history - How to set up and make it work.
- react-calendar - why really slow when first opening a page with this webpart on it? HOT 1
- react-birthdays - HOT 2
- Script editor web part for modern pages stopped working HOT 6
- error while running the webpart
- react-calendar - HOT 1
- Twitter feed not appearing on React Twitter webpart after configuring profile.
- Issue with calendar category component to filter.
- Calendar webpart - Facing issue while creating weekly recurrence event
- react-script-editor - HOT 4
- react-script-editor - cannot add two body HOT 1
- react-script-editor - Will this still work post November 2024? HOT 1
- React Rhythm of Business Calendar not correctly rendering recurring events on month view HOT 8
- Recurring Events not working
- React Pages Hierarchy SPFx - changing the style of button styles HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from sp-dev-fx-webparts.