24
The JSON files that gulp package-solution --ship looks for are created by first running gulp bundle --ship. Failure to run the bundle command prior to invoking package-solution will cause the package-solution command to fail, as shown in the OP.
This is not exactly obvious. The error message (shown in the OP) prompts the user to ensure they have completed a ...
13
You can make use of the EnvironmentType enum that is available via the sp-core-library.
The code for that would be as below:
Add the below import statement.
import { Environment, EnvironmentType } from '@microsoft/sp-core-library';
In your method, you can detect it as below:
if(Environment.type == EnvironmentType.ClassicSharePoint){
//do some stuff ...
12
this.context.pageContext is available on render() method within top level class that extends BaseClientSideWebPart.
Simply pass this.context as a props of to HelloWorld.tsx to reuse it.
Sample (HelloWorldWebpart.ts):
public render(): void {
const element: React.ReactElement<any > = React.createElement(
HelloWorld,
{
description: this....
11
"tells my Client all the Front-End dev I did in the past is
oldfashioned"
Depends on what you did and what he is talking about... in my perspective SharePoint is going client side just like its Windows operating system because of loading speeds. That being said the key here is to look at the trends in what is being picked up at a fast rate. The framework ...
10
In the 0.1.0 version of @microsoft/generator-sharepoint it has started setting gulp serve to use https. This is the right approach so you don't have to set your browser to allow unsafe scripts, but for this to work properly you have to configure certificates.
I guess we'll get a nice description of how to configure this rightly, but for now the easiest ...
10
You can deploy web parts in 3 ways as follow:
1.
Deploy SPFx client web part's JS files and JSON files in to Style Library
Note: Here I haven't enable CDN for Style Library.
Open write-manifests.json file from Config folder from Web Part folder hierarchy.
Change cdnBasePath as show below:
"cdnBasePath": "https://<server-name>.sharepoint.com/Style%...
10
The thing with SPFx is that it is 100 % client side solution. It will always run in the context of the current user. There is no OOTB way to elevate permissions.
To elevate privileges, you will have to build a hybrid solution.
So, besides the options that you have mentioned in the question, you are left with (IMHO) 2 options:
1) Azure Functions
Its ...
9
You are trying to load javascript library as css. That's not correct.
What you can do is to include jquery as your dependency under config and the use it inside web part.
Here are the steps:
Under config/config.json, externals section add below code:
"jquery": {
"path": "https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js",
"...
9
as you state, SPFX doesn't have some special way to call REST endpoints that is faster. The sphttpclient object makes a standard web call (and uses the standard browser request underneath). Depending on how the original solution was implemented (iframes anyone?) it can be faster, in the same way that a SEWP is faster than an iframe. At the end of the day ...
9
Add a property to your IAutoCompleteProps interface for your click handler. Then pass the function from the AutoCompleteWebPart into the interface as one of the component's properties.
So in your IAutoCompleteProps something like this:
export interface IAutoCompleteProps {
//Other properties
clickHandler: () => void;
}
Then in your ...
8
The workbench.aspx inherits from Microsoft.SharePoint.WebControls.ClientSidePage which I assume uses the specified ClientSideApplicationId to load a specific Client Side Application.
The id 8be81a5c-af38-4bb2-af97-afa3b64dfbed is the Workbench app which as part of the html includes:
<script type="text/javascript" src="https://spoprod-a.akamaihd.net/...
8
In SPFX GA version the ModuleLoader was renamed to SPComponentLoader.
import { SPComponentLoader } from `'@microsoft/sp-loader';
It continues to be userd in constructor:
constructor() {
super();
SPComponentLoader.loadCss('...');
}
Please check the reference reply:
8
This would only work with on-premises if you are using exactly the same identities cross environments. This most likely would require ADFS setup or on-premise being connected to Azure AD.
Key point is to ensure that when the identity is passed through the cookie from SharePoint Online, on-premises can use that to map it to on-premises identity.
We have not ...
8
Are you using Node.js v8 by any chance? If so, there is a known issue with the http/2 experimental feature. You can disable it by setting the NODE_NO_HTTP2=1 environment variable. More information about the fix is available at https://github.com/SharePoint/sp-dev-docs/issues/1002.
8
TLDR;
The short answer is no, the package doesn't contain all of the code from node_modules, yet it contains some very small amount of proven code (mostly css-loader code from corresponding webpack loader).
Long answer
SharePoint Framework uses webpack to bundle your code into a single file (aka package). Apart your code SharePoint Framework ...
7
Short answer - no, it's not required.
Longer answer - The toolchain we'll provide and invest in will be TypeScript based, as that is what we use internally for our own work, and we've found that it is better for us to focus on one solution than spread out across many. That said, the plan is to
a) create additional documentation on what the final output ...
7
I'll add one more thing here. The plan in the near future is to standardize the most common libraries and host a single version on the Microsoft Cdn, and then recognize that a developer is including "jQuery" or "handlebars" or whatever, and load it once. That should reduce the size of the page download and increase the cache hit size. Of course you will be ...
7
The easiest way to do this would be to load the data in your OnInit() method, and then reference it in your property pane. That won't work if you need the data to be more reactive (ie, you first select a list, then you select a list item), but if you are simply showing the current set of lists in the current web (for example), that should work.
We need ...
7
By running npm update typings you updated a tool, which is used to install typescript definitions. But you didn't install actual type definitions for react.
Actually you don't even need typings, because MS provided their own types publisher. Use this page to search for any type definitions. What you need to do is to run npm install --save @types/react-...
7
The SPFX source code is not open source at this point.
7
Yes, you can have multiple webparts or extensions in the same solution. Think of it as a Visual Studio solution with multiple projects (i.e one sln file and multiple dlls).
To add a webpart/extension in the existing solution, you simply need to run the yeoman generator again.
yo @microsoft/sharepoint - run this command in your current solution and the ...
7
You can use the PnPJS to create modern team and communication sites.
For that, simply add the below packages:
npm install @pnp/logging @pnp/common @pnp/odata @pnp/sp --save
After that, you can add the below import statement:
import { sp } from "@pnp/sp";
And in the webpart, you can use it as below to create modern sites:
1) Modern communication sites:
...
6
The easiest way to load CSS from CDN is using the ModuleLoader class.
First you import ModuleLoader in your code:
import ModuleLoader from '@microsoft/sp-module-loader';
Then, in the web part's constructor you use it to load the CSS file from CDN:
public constructor(context: IWebPartContext) {
super(context);
ModuleLoader.loadCss('https://maxcdn....
6
SPFX webparts will not have any server side code and it is all written in Javascript/typescript with Calls made to SharePoint using REST API or using JSOM. But if you need to write some server side code for e.g.: query something from external database or for some other scenario, then you need to create an ODATA Rest WebAPI for it and consume it in your SPFX ...
6
In the SampleWebpart.ts, you can use it as below:
export default class AnnouncementsWebPart extends BaseClientSideWebPart<IAnnouncementsProps> {
public constructor() {
super();
SPComponentLoader.loadCss('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css');
SPComponentLoader.loadCss('https://maxcdn.bootstrapcdn.com/...
6
The mystery is solved. The typescript version is pulled in by tslint and in turn by the internal gulp-related typescript.
The output of "TypeScript version: 2.1.6" happens when the tslint task starts a typescript compilation:
Looking at the "package.json" in "node_modules/@microsoft/sp-tslint-rules" I can see this typescript dependency:
"@microsoft/gulp-...
6
spfx has some utility classes to help. start by
import { UrlQueryParameterCollection } from '@microsoft/sp-core-library';
Then in your onRender:
var queryParameters = new UrlQueryParameterCollection(window.location.href);
if (this.properties.mode !== modes.NEW) {
if (queryParameters.getValue("Id")) {
const id: number = parseInt(...
6
Workflow is not supported in SharePoint Framework.
Use PnP or Microsoft Flow instead.
6
You can use SPFx webparts in modern pages and classic pages both.
Once uploaded in the app catalog and installed in the site collection, you can use it on the your classic pages which have custom page layouts and master page.
It will appear in the webpart gallery under the "Under development" section and then you add it like you add a normal webpart.
...
6
This web part has already been created. but read General thoughts on a modern script editor webpart before you use it.
Only top voted, non community-wiki answers of a minimum length are eligible
