Next Js as WebPart
Hi there, I have an application that was made using Next Js and my team wants to put it on a share point page, I have been trying to find information to know if this is even possible. I found WebParts but I am not sure if that is compatible with Next Js and I haven't found any resources that could help me with this. Any help will be appreciated. Thanks.
not able to view the files from sharepoint in react file viewer
when i try the react file viewer from this repo file viewer repo i am able to view files from online samples but not sharepoint url, when i do so i am getting the cros error Access to XMLHttpRequest at 'https://sharepoint.com/sites/DevL/Clients/AVM001103/Forms/AllItems.aspx?id=%2Fsites%2FDevL%2FClients%2FAVM001103%2FResults%2Edocx&parent=%2Fsites%2FDevL%2FClients%2FAVM001103' from origin 'https://w2hpd.csb.app' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
where to add PnPTelemetry code in SPFX PnP solution
Hi all, I need to include PnP Telemetry in my code. I am working on SPFX React based solution. I haven't used it before. Can you guide me where to use below lines of code, in Constructor or render method? const telemetry = PnPTelemetry.getInstance(); telemetry.optOut(); This is one of app deployment requirement, haven't found much documentation about it. Will apricate your help on this.Include X-ClientTag header
I am working on react based SPFX solution and using PnP module for retrieving list data. IT Deployment teams asked me to must include X-ClientTag header on SharePoint client side calls. I am using below line of code for retrieving date. import { sp } from "@pnp/sp"; sp.web.lists.getById(<list id>).items.get(); //sample line Let me know if we can add X-ClientTag header with above code?
SPFX 18.2 gulp serve issues
I have recently updated a number of modern spfx webparts to spfx 18.2 and this morning when I try to debug in workbench (locally and on tenant) I am getting serve errors in relation to react and react-dom I am able to serve projects not using react successfully but when using spfx 18.2 but not react 16.8.4 - has anybody else encountered this issue. I have restored to previous code backup, as well as restoring to previous days last git commit neither had a positive effect. I get no errors in terminal but workbench shows the following message: SPLoaderError.loadComponentError]: ***Failed to load component "174429f3-8ff8-4143-8f12-7c398d264e9a" (FusionWebPartWebPart). Original error: ***Failed to load URL 'https://localhost:4321/node_modules/react/dist/react.js' for resource 'react' in component '174429f3-8ff8-4143-8f12-7c398d264e9a' (FusionWebPartWebPart). The file was not found in the server. Make sure that you are running 'gulp serve'. ***INNERERROR: ***Failed to load URL 'https://localhost:4321/node_modules/react/dist/react.js' for resource 'react' in component '174429f3-8ff8-4143-8f12-7c398d264e9a' (FusionWebPartWebPart). The file was not found in the server. Make sure that you are running 'gulp serve'. ***CALLSTACK: Error at SPLoaderError.SPError [as constructor] (https://localhost:4321/temp/workbench-packages/@microsoft_sp-loader/dist/sp-loader-assembly_default.js:8390:24) at new SPLoaderError (https://localhost:4321/temp/workbench-packages/@microsoft_sp-loader/dist/sp-loader-assembly_default.js:4036:28) at Function.ErrorBuilder.buildErrorWithVerboseLog (https://localhost:4321/temp/workbench-packages/@microsoft_sp-loader/dist/sp-loader-assembly_default.js:3789:21) at Function.ErrorBuilder.buildLoadComponentError (https://localhost:4321/temp/workbench-packages/@microsoft_sp-loader/dist/sp-loader-assembly_default.js:3697:21) at https://localhost:4321/temp/workbench-packages/@microsoft_sp-loader/dist/sp-loader-assembly_default.js:6275:47 Vesa JuvonenCannot See File Type Icon in Document Card from the Fabruic UI-React
I am using the DocumentCard from Fabric-React to create a document library web part using the react framework. Currently my Document Library is mostly working. it looks like this But notice inside of my previews, the mini Icon for the File Type is not displayed. However, if i go into Chrome Dev Tools, and i find the ms-documentCardPreview-icon Div, and i add "Width:25%" the icon will appear. I cannot use CSS to give the ms-DocumentCardPreview-icon div a width, because webpack adds a series of digits to the div name on build. please help me understand why a width is not being applied and how to make it apply so both the icon and the preview image are displayed as in the example provided by microsoft here: https://developer.microsoft.com/en-us/fabric#/controls/web/documentcardSet width for `PivotItem` in Office UI Fabric
I am using Pivot and PivotItem from Office UI Fabric to display my content in tabs. Currently when the tab renders, all the tabs are left aligned. I need to display the tabs with equal width so that they occupy the 100% width of the page. Below is the code for Pivot. <Pivot linkFormat={PivotLinkFormat.tabs} linkSize={PivotLinkSize.large} styles={pivotStyles}> <PivotItem headerText="Foo"> <Label>Pivot #1</Label> </PivotItem> <PivotItem headerText="Bar"> <Label>Pivot #2</Label> </PivotItem> <PivotItem headerText="Bas"> <Label>Pivot #3</Label> </PivotItem> <PivotItem headerText="Biz"> <Label>Pivot #4</Label> </PivotItem> </Pivot> Below is the code that I could figure out to add styles to Pivot. But we do not have styles attribute for PivotItem. const pivotStyles:IPivotStyles = { link: {}, linkContent: {}, linkIsSelected: {}, text: {}, icon: {}, count: {}, root: { //background: DefaultPalette.greenDark } }; How can I apply style to PivotItem so that I can add width to it?
Best JS framework(Angular/React/Vue) to use in SharePoint 2013
Hi, We have tools (Basically CRUD operations in multiple lists across sites/site collections. Handles large amount of data and has lots of business functionalities/logic) that were built using jQuery and Datatables.js. We are planning to rebuild in 2013. Visual Studio/ server side coding is not allowed. Can anyone suggest which JavaScript framework (Angular Js1.x, Angular 2+, React, Vue/ Others) is best to use in SharePoint 2013? Difficult to get Node.JS/NPM/CLI on DEV environment. we have tried a PoC in Angular 4 using SystemJs-Manual mapping concept. But not sure how bundling and future upgrade will be if CLI/NPM is not used. Any suggestions please? Thanks, Puli
Obtaining full HTML of a SPO Site Page programatically
Hi I need to obtain the full HTML of a SPO Site Page programatically. I have a SPFx web part showing latest published site pages. So far I tried with PNPJS (ClientSidePage.fromFile) with Search (CanvasContent1OWSHTML) and with SP REST API (getbytitle('Site Pages')/Items?$select=CanvasContent1) All of them seem to return some HTML which is not the full page. Is there a way to obtain the full page without using iFrame? Greeitings, GeorgeUtilising Office UI Grid with React based Sharepoint Web Parts
I have been tying to utilise the https://developer.microsoft.com/en-us/fabric#/styles/layout with a React Sharepoint Web Part. It seems these are not fully compatible, as the breakpoints for the grid are browser width scoped and not Sharepoint column layout scoped. The result of this is that the grid can be utilised in a web part if a single column view is used on a page, but not if multiple columns are used. If this is correct, are there any alternatives to dealing with columns and layouts for the web parts that allow for scoping to the page columns rather than the browser width? I have attached two screenshots showing a single column view on mobile, with the grid working correctly, but an incorrect layout on desktop when multiple columns are used.
