New answers tagged spfx
1
You need to add and set the property loadLegacyFabricCss to true in your webpart's manifest.json file.
The value needs to be set as below:
"loadLegacyFabricCss": true,
So, your <webpart>.manifest.json file will look something like:
"alias": "Test182WebPart",
"componentType": "WebPart",
// The "*" signifies that the version should be taken from ...
0
It looks like there is some change in the back-end because of which the code has kinda stopped working in Edge and IE.
As a workaround for now, would suggest that you set the header values explicitly.
You need to add the below code for headers, don't forget to import ISPHttpClientOptions from @microsoft/sp-http module:
let httpOptions: ...
1
It is not possible at the moment using pure CSOM code. It is only possible via REST APIs.
Having said that, you can use PnP CSOM Core library to perform the deployment of SPFx webparts or extensions. It is basically a wrapper over the underlying REST APIs.
To upload the app to the app catalog, you can do that as below:
string webUrl = "https://tenant-...
1
The following CSS style for your reference.
<style>
.ms-HubNav-nameLink{
font-size:18px !important;
}
.ms-HorizontalNavItem-link{
font-size:18px !important;
padding:0 !important;
}
</style>
1
my suggestion is to fire up the console inspector and point to the items you are looking to customize
not sure if we're using the same site/nav, but this might be the one you are looking for:
/*modern*/
.ms-HorizontalNavItem-link {
font-size: 16px;
}
/*classic*/
.ms-core-listMenu-horizontalBox li.static > .ms-core-listMenu-item {
font-size: ...
0
I am afraid you can't get items directly from view. You will get viewQuery field from below method using v.ViewQuery. then you have to use getItemsByCAMLQuery method to get items. Below are reference methods.
Main method calling resua
public getListViewData():void{
let listName = "Custom List"; //The display name of the sharepoint list.
let ...
0
Here is an example of passing pageContext to React component:
Add property to component interface. Note that I import PageContent declaration for nice IntelliSence pop-ups (I use VS Code)
import { PageContext } from '@microsoft/sp-page-context'; // load page context declaration
export interface IHelloWorldProps {
description: string;
...
0
TomB,
It can be quite daunting to learn the array syntax, especially since many examples out there show older code syntax.
It really depends on where in your code you're defining the arrays.
If you're doing it within a method, you'll probably want to use this syntax:
public render(): React.ReactElement<IHelloWorldProps> {
const customerList: ...
0
Finally found the solution. What I was doing was that I was importing the polyfills after the statements of
import * as React from 'react';
import * as ReactDom from 'react-dom';
I moved all my polyfills before even react loaded and the code started working on Internet Explorer. So the in my <WebPartName>WebPart.ts looked something like this.
...
0
Rename it to a .zip extension and extract it. But you won't get the typescript, you'll get the bundled JS.
0
You will need anyone of the below subscription to create app catalog:
Office 365 Midsize Business
Office 365 Enterprise E1, E3, E4, or K1
Office 365 Education A2, A3, or A4
Office 365 Government G1, G3, G4, or K1
You can find the steps to create app catalog in Office 365 SharePoint tenant in below article: Set up your Office 365 tenant.
Following all the ...
0
Just as I finally asked question on stackexchange i got apps site collection "creating" in site collection, it took about two hours for creation to even start.
0
It is possible to create a list item within a folder using AddValidateUpdateItemUsingPath.
You need to use the request body similar to below code:
{
"listItemCreateInfo": {
"FolderPath": { "DecodedUrl": "https://contoso.sharepoint.com/lists/Test/Folder/SubFolder" },
"UnderlyingObjectType": 0
},
"formValues": [
{
...
0
Yes you can via the addValidateUpdateItemUsingPath method of which accepts a path to your subfolder as a parameter.
const listPath = `${webRelativePath}/Lists/ListUri`;
sp.site.rootWeb.lists.getById(ListId).addValidateUpdateItemUsingPath([
{ FieldName: 'Title', FieldValue: 'TestItem' }
], `${listPath}/FolderPath`).then(console.log);
2
Kelank,
I think you may be experiencing issues because you need to add an element and give it the .rssApp class name. For example, try this:
import styles from '../RssApp.module.scss';
let newsElement = (element: IRssItem)=> { //Newly added
return (
<div className = {styles.row} >
<div className={...
0
Did you take a look at the sample command extension found at https://github.com/SharePoint/sp-dev-fx-extensions/tree/master/samples/react-command-print
?
2
As I was going through your code, I see you are missing adding top level class to wrapper container. Dont get confused here, the SCSS works in a similar way as CSS. When you nest css classes in SCSS file, it means they will follow the HTML DOM hierarchy. See the below explanation:
SCSS File Content:
.rssApp {
width: 100%;
padding: 10px;
....
3
Try using something like below:
const list = sp.web.lists.getById(ListId);
const folderName = 'My subfolder';
list.items.add({
FileSystemObjectType: 1,
ContentTypeId: '0x0120'
FileLeafRef: folderName
}).then(console.log);
Reference: Folders and sub folders inside Generic List.
0
You'd need an item of type folder (i.e. set listItemCreateInfo.UnderlyingObjectType to 1) to do this.
Compare here.
I'm not sure how to do this in pnpjs, though.
0
It seems you have crossed the List item threshold of 5000 items. Below are pointers to follow when you want to query a list with more than 5000 items.
Make sure your query must return below 5000 items.
Filters columns used in Query should be indexed.
This columns has to be indexed before list items has crossed this 5000 limits.
If it has already crossed, ...
0
In SharePoint REST we used to use data.d.__next to fetch more than 5000 items by calling same function recursively.
Reference: Rest to read more than 5000 items from document library
Solution For You:
First of all add index on columns you are using for filter: Add an index to a SharePoint column.
Use getPaged method added in PnP JS to fetch the multiple ...
0
Krunal,
It can be a bit daunting to become familiar with the SPFx project structure, but I hope that these instructions will help.
To create a base SCSS that is used by all web parts:
1. Create a shared or common folder under the src folder. For this example, I'll used shared
2. In the shared folder, create a new file and name it shared.module.scss
3. Copy ...
0
Have you tried creating a common "base" scss and import using the @import statement?
Have a look at the Recommendations for working with CSS in SPFx and especially
how office-ui-fabric can be imported in a WebPart.
0
Dan,
You will have to include the Bing Maps as an external script in webpart as described here- https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/basics/add-an-external-library
In webpart's config.json (inside config folder) include something similar to this:
"externals": {
"bingmaps": {
"path": "https://www.bing.com/api/maps/...
2
So even though this issue no longer persists (as of May 2019), heres a link to the relevant comment (solution) I used to fix this issue. Long story short this was due to some problems on both AAD authentication and the client libraries so Micorosoft had to work on a fix for quite a while. As of now, the comment I linked to is the only solution to this ...
2
You'd need to call Microsoft.Office.Server.ReputationModel.Reputation.setLike() using CSOM.
There is a dicussion here that might help you.
0
Basically the problem is that your state is can and will show only one last item. You need to change it to be able to save an array in there:
export interface IRssItem{
title: string;
description: string;
author: string;
}
export interface IRssAppState{
items: IRssItem[];
}
Then:
showSomeXML(){
var xhttp = new XMLHttpRequest();
...
0
You have to do the following:
Install nvm (https://github.com/coreybutler/nvm-windows/releases)
Then install the 64-Bit version for windows:
nvm install 8.9.4 64
Then type the following to use the earlier version:
nvm use 8.9.4 64
Then run your project as before, for example:
gulp serve
Here is more info: https://o365insights.com/downgrade-npm-for-...
0
You need to select the person field and use expand to get more information about the user like below
sp.web.lists.getByTitle('Projects').items.get().select('PersonField/FirstName,PersonField/LastName,PersonField/EMail').expand('PersonField').then(items => {
//console.log(items)
})
Here are the values you can expand from the person field
0
AAANNDDD found it, thanks to @MikeSmith and @Gautam Sheth, I could make it work.
For now, I haven't tested the Hubsites (even if it seems to work).
Here is the query I used to get all sites minus personal sites and minus Appcatalog.
Make sure to try it on SearQueryTool v2 first ! :)
_api/search/query?querytext='(contentclass=STS_Site OR contentclass=...
0
I guess in your private method _onRenderRow you are using a missleading if clause. You check if ANY User Id is set, instead you should check if the current item is the one which is checked out.
I'm not familiar with the components you're using but I guess that's the reason why every row gets a check out icon instead of just one/some.
If I'm wrong and didn'...
0
there are very few information you give but I guess your problem will be solved by giving CallBack functions to your ChildElement like this:
parentElement.ts
public render(){
...
<MyChildComponent
optionsA={this.props.OptionsA} //give some properties to your Component
optionsSelected={this.optionsSelected.bind(this)} ...
0
Even though it is not clearly stated in the documentation at this point, the ability to connect (and have authentication and authorization) automatically to AAD secured APIs (including the Microsoft Graph) is limited to SharePoint online only.
This is because SharePoint Online registers AAD applications, declares and approves the permissions/scopes behind ...
1
TSX allows for embedding JSX elements inside the file, and is largely used by React.
TS files are plain old Typescript files and do not support adding JSX Elements.
Typically you would seperate concerns by placing only code relating to presentation in the TSX files.
The following link is useful for understanding some of the key differences
https://...
Top 50 recent answers are included
