New answers tagged spfx
0
If you want to provide unique permissions to each list item then you have to first stop inheriting permissions at each item level and then assign the permissions to the required users. You can use pnpjs https://pnp.github.io/ role assignments to achieve this
https://pnp.github.io/pnpjs/sp/security/#role-assignments
please note the supported limit of unique ...
1
I suspect this is SharePoint site permissions related issue.
Try granting below permissions to your co-worker & it should work for you:
Site collection Administrator permissions on app catalog site - Manage site admins
SharePoint tenant administrator - Assign admin roles
0
If you just want to embed something on SharePoint online page using iframe, you can use SharePoint out of the box Embed web part.
And if you want to achieve this using SPFx react only, you should be able to use iframe without any problem --> I think this is the best way to embed external pages using SPFx react.
Similar threads:
How to embed Qlik Sense ...
0
Have you loaded all the js files(the order also matters) which are required to create and read the people picker values
clienttemplates.js
clientforms.js
clientpeoplepicker.js
autofill.js
sp.js
sp.runtime.js
sp.core.js
https://docs.microsoft.com/en-us/sharepoint/dev/sp-add-ins/use-the-client-side-people-picker-control-in-sharepoint-hosted-sharepoint-add-in
...
0
When you are trying to run the webpart on the SharePoint site workbench then close the window of the local workbench(https://localhost:4321/temp/workbench.html#/) and then check if the changes are reflecting or not.
OR
run "gulp serve --nobrowser" and then append
?debugManifestsFile=https%3A%2F%2Flocalhost%3A4321%2Ftemp%2Fmanifests.js&loadSPFX=...
0
You can add below css in the starting of the webpart scss file(yourwebpartname.module.scss)
:global {
#workbenchPageContent,
.CanvasComponent.LCS .CanvasZone {
max-width: 100% !important;
}
}
2
You can use approaches like SP.Web.mapToIcon as Rob says (as a general rule, you should always listen to what Rob says!), but if you simply want to render a file icon, you can use the PnP React Reusable Controls; There is a FileTypeIcon control which does all the hard work for you.
After you install the control in your SPFx project (using npm install @pnp/...
1
You can use the SP.Web.mapToIcon method to map a file name to an icon. To use it from SPFx, you would make a REST API call to /_api/web/maptoicon(filename, progid, size).
An example call would be /_api/web/maptoicon(filename='filename.pdf', progid='', size='0').
Here are some additional resources that may help you.
SP.Web.mapToIcon Method
Getting the default ...
0
You can develop a SharePoint Framework web part for your requirements.
Check below SPFx sample which will help you to get started. You can download it & use it as is or enhance the functionality as per your requirements:
SPFx React Feedback web part
0
Check the value of "location" in your config/serve.json file.
1
We can get the List id from the getFileByUrl method. Based on that, we can get the List Name and its information.
const file = await sp.web.getFileByUrl("https://sample.sharepoint.com/:p:/r/sites/SampleSite/SampleLibrary/test/test.docx?d=w1db9f77e26354f7e8301ff3ddda7dff0&csf=1&web=1&e=O2hf6u").select('ListId').get()
const list = ...
0
Another way to achieve the same result is by building and deploying an spfx solution to the app catalog.
As @Ganesh mentioned the modern script editor, it's ok as a solution, but i always find myself needing of some other feature that could provide usefull.
A complete guide of how to build and deploy an spfx solution with custom user greeting can be found ...
0
You cannot directly bind the JSON object to DOM element. You have to loop through the list items & then bind individual property to DOM.
Check below article for detailed information: SharePoint Framework: Retrieve and Display SharePoint List Items using REST API and React JS
0
Why not use the readily accessible Office UI Fabric Icons?
I have never received a CORS error with Fabric UI Icons.
See UI Fabric Icon Palate here:
https://uifabricicons.azurewebsites.net/
Integration into your spfx project here:
https://docs.microsoft.com/en-us/sharepoint/dev/spfx/office-ui-fabric-integration
0
No. People usually do it with azuredevops
https://medium.com/@sekhar225/jenkins-for-spfx-951c979d706d
People usually do it with powershell or azure devops, if you have access to deploy the webpart from powershell I believe you can try to use the article above. If not you can write yourself a pipeline that can open puppeteer and do it "manually"
0
I was able to get it working by using the Transfonter conversion tool to reconvert my files and selected the option to embed files in the CSS.
1
I find alone the solution :)
Add the command gulp bundle
gulp clean
gulp bundle --ship
gulp build --ship
gulp package-solution --ship
0
you have to add baseUrl in the setup.
import { MsalClientSetup } from "@pnp/msaljsclient";
import { sp } from "@pnp/sp/presets/all";
sp.setup({
sp: {
baseUrl: "https://{my tenant}.sharepoint.com/sites/dev/",
fetchClientFactory: MsalClientSetup({
auth: {
authority: "https://...
0
I tried the below code and it's working fine
public async GetSampleListItems(ListTitle: string): Promise<any[]> {
debugger;
let ListCardItemsArray: ListCardListItem[] = [];
let ListCardListItm: ListCardListItem = null;
let resultsArray: any = [];
return await new Promise<any[]>(async (resolve, reject) => {
try {
...
0
Try this:
Change GetListItems() function to:
//here i am calling my method
let sourceID = await this.GetSourceID("https://contosa.sharepoint.com/:u:/r/sites/Sample/SampleLibrary/Sample.vsdx?d=we836259ffe4b4f6c96ca6dd1118e6629&csf=1&web=1&e=B2w69d");
ListCardListItm["SourceID"] = sourceID;
& use:
public async GetSourceID(...
0
There are no supported ways to tweak default list view search box using SPFx.
Workarounds:
If you want a permanent filter on list view, you can apply it from View settings.
Documentation: Use filtering to modify a SharePoint view
If you want a temporary filter/search via textbox, you can do this using query parameter in URL like:
https://tenant.sharepoint....
0
Issue fixed by using RegistrationId="101"
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
<CustomAction
Title="LeafletForSharePoint"
RegistrationId="101"
RegistrationType="List"
Location="ClientSideExtension.ListViewCommandSet.ContextMenu"
...
2
We cannot have document folder path URLs in multiple languages for one site. The URLs are generated as per the main language of your site that creator has selected during site creation.
It means if you have selected German during site creation, you will get URLs in German language. In the images that you have shared, please check the primary language of the ...
0
I've managed to solve the problem. I used deprecated js library sp-pnp-js (https://www.npmjs.com/package/sp-pnp-js). Now it also works in IE11.
I had to change the lines to:
import pnp from "sp-pnp-js";
....
let data = await pnp.sp.web.lists.getByTitle(listName).items.get();
0
App catalog is also available at the Site Collection level, so for your staging/testing SPFx web part, you could just deploy it to the Site Collection App Catalog. Once tested and verified, you could move it to the tenant level or to another production site collection.
For more information on how to enable App Catalog at the Site Collection Level, visit this ...
0
I believe you can use @pnp/sp/profiles
Gets properties for a specified user
const loginName = "i:0#.f|membership|testuser@mytenant.onmicrosoft.com";
const profile = await sp.profiles.getPropertiesFor(loginName);
console.log(profile.DisplayName);
console.log(profile.Email);
console.log(profile.Title);
console.log(profile.UserProfileProperties.length)...
0
Based on their GitHub Page
as per your code you can use "iar.item" to get new list item details
pnp.sp.web.lists.getByTitle("Tasks").items.add({
Title: "My Item Title"
}).then(r => {
// this result will have two properties "data" and "item"
// data is what was returned from SharePoint ...
1
It has nothing to do with a leak in the ts-loader. The issue comes from NodeJS 8 where they introduced really low memory cap 1.4GB per NodeJS process. The only option to get around this limitation is to start gulp server using the following command.
gulp serve --max-old-space-size=8192
This will set the appropriate Node flag to use a max of 8Gb or whatever ...
1
As you are using Office UI Fabric/Fluent UI button control, it must have the ms-Button class applied to it.
So, you can override the CSS of that class in your code like below. You can change the color codes as per your requirements.
.ms-Button:hover {
color: #fff !important;
border-color: #0460a9 !important;
background-color: #0460a9 !important;
}...
0
yeah, you should break inheritance on that list and give users update permissions on just that list.
the other alternative is to call an azure function to do the update.
0
Set IsRequired = false, e.g.:
[DataMember(Name = "CanvasContent1", IsRequired = false)]
MSDN Source: DataMemberAttribute.IsRequired Property
Gets or sets a value that instructs the serialization engine that the
member must be present when reading or deserializing.
0
For anyone still stuggling with this issue, the resolution for me was as follows:
npm uninstall @microsoft/sp-http
npm uninstall @microsoft/sp-application-base
npm install @microsoft/sp-application-base
I suspect there was a version incompatibility somewhere.
0
Below are the advantages of the SPFx webpart:
Capability to create Responsive UI using Office UI Fabric
SharePoint Framework is available as a “No JavaScript Framework”,” React”, “Knockout” thus, it provides a flexibility to choose the JavaScript framework to deploy the solution.
With the SPFx solution, the user can experience responsive property pane, in ...
1
If you want this for a particular site page, you can use the Modern Script editor web part.
After adding web part on your page, enable _spPageContextInfo option in Modern Script Editor Web Part:
Then you can add below code to get the current user name:
<p id="pWelcomeMsg"></p>
<script type="text/javascript">
...
Top 50 recent answers are included
