Git Product home page Git Product logo

sp-dev-fx-extensions's Introduction

page_type products languages extensions
sample
office-sp
typescript
contentType technologies createdDate
samples
SharePoint Framework
6/1/2017 4:27:24 AM

SharePoint Framework Extensions Samples & Tutorial Materials

This repository contains the samples that demonstrate different usage patterns for the SharePoint Framework extensions.

We do welcome community contributions to the samples folder in this repository for demonstrating different use cases with SharePoint Framework. Notice that if you use 3rd party libraries, please make sure that library license allows distributions of it as part of your sample.

SharePoint extensions are controls that appear inside a SharePoint page but run locally in the browser. They're the building blocks of pages that appear on a SharePoint site. You can build extensions using modern script development tools and you can deploy your extensions to modern pages in Office 365 tenants. In addition to plain JavaScript projects, you can build extensions alongside common scripting frameworks, such as AngularJS and React. For example, you can use React along with components from Fluent UI to quickly create experiences based on the same components used in Office 365 natively.

Have issues or questions?

Please use following logic on submitting your questions or issues to right location to ensure that they are noticed and addressed as soon as possible.

Additional resources

Using the samples

To build and start using these projects, you'll need to clone and build the projects.

Clone this repo by executing the following command in your console:

git clone https://github.com/pnp/sp-dev-fx-extensions.git

Navigate to the cloned repository folder which should be the same as the repository name:

cd sp-dev-fx-extensions

To access the samples use the following command, where you replace sample-folder-name with the name of the sample you want to access.

cd samples
cd sample-folder-name

and for the tutorials, use the following command:

cd tutorials

Now run the following command to install the npm packages:

npm install

This will install the required npm packages and dependencies to build and run the client-side project.

Once the npm packages are installed, run the following command to start nodejs to host your extension and preview that in the SharePoint Online pages:

gulp serve

Authors

This repository's contributors are all community members who volunteered their time to share code samples. Work is done as an open source community project, with each sample contained in their own solution.

Contributions

These samples are direct from the feature teams, SharePoint PnP core team (http://aka.ms/m365pnp) or shared by the community. We welcome your input on issues and suggestions for new samples. We do also welcome community contributions around the extensions. If you have any questions, just let us know.

Please have a look on our Contribution Guidance before submitting your pull requests, so that we can get your contribution processed as fast as possible.

Code of Conduct

This repository has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact [email protected] with any additional questions or comments.

Sharing is caring!

sp-dev-fx-extensions's People

Contributors

aaclage avatar ahmadiramin avatar ajixumuk avatar anoopt avatar arigunawan avatar dependabot[bot] avatar dingmaomaobjtu avatar franckyc avatar fredupstair avatar giuleon avatar gsellier avatar hugoabernier avatar joaojmendes avatar jonasbjerke89 avatar laurakokkarinen avatar luismanez avatar martinhatch avatar michaelmaillot avatar mpaukkon avatar nokafor avatar paolopia avatar pmatthews05 avatar russgove avatar stephanbisser avatar sudharsank avatar thechriskent avatar vesajuvonen avatar waldekmastykarz avatar wobba avatar zachroberts8668 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

sp-dev-fx-extensions's Issues

Not able to run the sample code

Not able to add webpart

Category

  • Question

Observed Behavior

As mentioned to test extensions, we need to run npm install at tutorial directory. But there is no package.json file due to which unable to install modules.
When running Field-Extension Tutorial sample not able to see add any webpart option.

Steps to Reproduce

follow the link Field-Extension Tutorial enter gulp serve.
err

Thanks for your contribution! Sharing is caring.

Bind script suddenly stopped working

  • Question
  • Bug
  • Enhancement

Observed Behavior

Have installed the app to the SharePoint app catalog and it has been binding with no issues to site collection and today stopped working with the error:
The property 'ClientSideComponentId' cannot be found on this object. Verify that the property exists and can be set.

Steps to Reproduce

Powershell open with admin rights
PnP-Connect with global admin account
run tenant customiser script

2018-05-10_13-09-47

react-application-tenant-global-navbar Menu disappears after navingating to _layouts/15/search.aspx

Configured react-application-tenant-global-navbar on communication site. In the menu, one menu items takes to _layouts/15/search.aspx. One the home page of the site, when clicked on search menu item, search page will open. Clicking back button to go to earlier page takes back to site home page however, menu is not shown on the page.

Category

  • Question
  • Bug
  • Enhancement

Expected or Desired Behaviour

Clicking back should show the home page with menu

Observed Behavior

Menu is not getting loaded

Steps to Reproduce

Create an item in the term site, in the URL provide https:///sharepoint.com/sites//_layouts/15/search.aspx
Open the site and click on that menu item to go to search page
on the search page click back button

Tenant Global Nav Bar overflow menu not working

Category

  • Question
  • Bug
  • Enhancement

Expected or Desired Behavior

When overflow menu is used the links no longer work.

Observed Behavior

When menu overflows the menu items are rendered but not clickable. How do i fix this?

Steps to Reproduce

Make screen small to cause overflow

typo in documentation for sample "Modern Team Sites" customizer

Category

  • Question
  • Bug
  • Enhancement

Expected or Desired Behavior

The instructions on one of the samples should be this:
gulp serve --nobrowser

but there is a typo that will confuse those not familiar with gulp commands.

Observed Behavior

Running "gulp server --nobrowser" results in the error,
"Task 'server' is not in your gulpfile"

Steps to Reproduce

Go to the page for sample for "Modern Team Sites (Office Groups) Navigation Application Customizer" and follow instructions.

After instruction "npm i -g gulp" is the line "gulp server --nobrowser" that produces the error.

Mobile/Responsive Support for React Global Navigation SPFx Extension solution?

Category

  • Question
  • Bug
  • Enhancement

Expected or Desired Behavior

I am working with the React Global Navigation SPFx Extension in this repo. I've noticed that when on a mobile device or within a very narrow browser, the navigation disappears instead of being collapsed into a mobile-friendly UI.

Is this the expected behavior with the CommandBar Office UI Fabric component?

On the Office UI Fabric site, these CommandBar items appear to auto-collapse which is the behavior I'm seeking (see the CommandBar with search box and overflowing menu items variant in the documentation).

If not, how can I extend this solution to collapse all command-bar items under an ellipses (overflowItems) at a given break-point?

react-application-tenant-global-navbar - is removed after using the search page

react-application-tenant-global-navbar
Category - Bug

Expected or Desired Behavior
The navbar is still visible on the page after the user navigates back from using the search page.

Observed Behavior
The Nav Bar disappears from the page when I navigate back from using the search page (new experinence).

Steps to Reproduce

  • Search in the left hand search box and click on 'Show more results'

  • Your are now in the new experience search results page.

  • Now click on the arrow on the left side (next to the Search term you entered)

  • When you are back on the page from which you performed the search the navbar is now missing.

Errors in console 'helloWorld'

Important

No matter if you use sample or try to generate extension from scratch

Category

  • Question
  • Bug
  • Enhancement

Expected or Desired Behavior

No errors in console when run gulp serve

Observed Behavior

2018-02-08_1553

Steps to Reproduce

  1. Clone https://github.com/SharePoint/sp-dev-fx-extensions/tree/master/samples/js-application-analytics
  2. Install all tools and dependencies
  3. run set NODE_NO_HTTP2=1 && gulp serve because of Node version

Submission Guidelines

When you create an extension from scratch and use the name other than "HelloWorld", yeoman should change it in all places.

At this point no place to define "exportName": ""

Please advise!

Kind regards,
Kolia Nalbandian

Unable to delete app from site recycle bin

Category

  • Question
  • Bug
  • Enhancement

Observed Behavior

When a spfx extension app is deleted, it goes to the recycle bin (with 0 kb). I'd go to the recycle bin to delete the extension app again, and would receive this error message:

Sorry, something went wrong
An unexpected error has occurred.
TECHNICAL DETAILS
Troubleshoot issues with Microsoft SharePoint Foundation.
Correlation ID: c492469e-60a1-5000-1cdd-86f5344ecc11

This happens on multiple site collections, as well as with spfx web part app.

After an app is deleted, when I re-add the app (usually with an updated version number if there's modification), I could get one of these two responses (the screen cap is what's happening at the same time):

image

Sorry, something went wrong
A different version of this App is already installed with the same version number. You need to delete the app from the site and the site recycle bin to install this version.
TECHNICAL DETAILS
Troubleshoot issues with Microsoft SharePoint Foundation.
Correlation ID: 3e93469e-e044-5000-e9c5-ad565dc578d6

I'm not sure if this is preventing me from re-installing an updated app, or if it's constantly restoring, but the version number from newer pkkg does show when an app is re-added.

**Also having this issue 775 with web part app showing in some site toolbox gallery but not others, it's why I'm deleting apps and re-adding them, per recommendation as a fix.

ListView Command set visible on List and not on Document Library.

Category

  • Question
  • Typo
  • Bug
  • Additional article idea

Expected or Desired Behavior

For Listview Command set, if RegID is 101, the command set should be deployed in document library.

Observed Behavior

Command set visible in List and not on Document Library
Elements.txt
@VesaJuvonen

Steps to Reproduce

Followed instructions on MS tutorial:
https://docs.microsoft.com/en-us/sharepoint/dev/spfx/extensions/get-started/building-simple-cmdset-with-dialog-api

Submission Guidelines

I have read that changing the RegId fixes the issue but does not seems to be happening in my case.
SharePoint/sp-dev-docs#1628

Thanks for your contribution! Sharing is caring.

Announcement Extension is not working ? I tried to install it in modern site and nothing showed up?

Category

  • Question
  • Bug
  • Enhancement

Expected or Desired Behavior

If you are reporting a bug, please describe the expected behavior. If you are suggesting an enhancement please describe thoroughly the enhancement, how it can be achieved, and expected benefit.

Observed Behavior

If you are reporting a bug, please describe the behavior you expected to occur when performing the action. If you are making a suggestion, you can delete this section.

Steps to Reproduce

If you are reporting a bug please describe the steps to reproduce the bug in sufficient detail to allow testing. Only way to fix things properly, is to have sufficient details to reproduce it. If you are making a suggestion, you can delete this section.

Submission Guidelines

Delete this section after reading

  • All suggestions or bugs are welcome, please let us know what's on your mind.
  • If you are reporting an issue around any of the samples, please ensure that you have clear reference on the sample and possibly code file, which should be fixed.
  • If you have technical questions about the framework, weโ€™ll be monitoring #spfx, #spfx-webparts, #spfx-extensions and #spfx-tooling on (SharePoint StackExchange)[http://sharepoint.stackexchange.com/]. You can also alternatively submit your question to (SharePoint Developer group)[https://network.office.com/t5/SharePoint-Developer/bd-p/SharePointDev] at Office Network.
  • Remember to include sufficient details and context.
  • If you have multiple suggestions or bugs please submit them in separate bugs so we can track resolution.

Thanks for your contribution! Sharing is caring.

My Favourites adds div tag to Description and hyperlink

Category

  • Bug

Expected or Desired Behavior

In My Favourites, when displaying or editing an item, the Description field should show plain text, and selecting the hyperlink opens the page in the browser.

Observed Behavior

The Description field shows the text inside a div tag. Example - <div class="ExternalClass329AE126306642329FD1F51BD5071352">Test2</div>

When clicking the link in My Favourites, creates error, likely because link also has div tag. Example - https://sitename.sharepoint.com/testsub1/SitePages/%3Cdiv%20class=%22ExternalClassEAAE154620D849B3ABCB3EFE9537BF7E%22%3Ehttps&#58;//sitename.sharepoint.com/testsub1/SitePages/TestPage1.aspx?loadSPFX=true&amp;debugManifestsFile=https&#58;//localhost&#58;4321/temp/manifests.js&amp;customActions=&#123;&quot;5c715e3b-fb6f-43d7-a8a7-52bb5db34e50&quot;&#58;&#123;&quot;location&quot;&#58;&quot;ClientSideExtension.ApplicationCustomizer&quot;,&quot;properties&quot;&#58;&#123;&#125;&#125;&#125;</div>

Steps to Reproduce

Ran all the steps to install My Favourites sample on Windows 7 PC.

Freshly installed all tools for npm and related.

Manually created the Favourites list in SharePoint site.

Ran 'gulp serve' at command line, launching SharePoint site in IE 11 browser.

Used Add to My Favourites to create the item. Used Show My Favourites to display item. Saw div tag in Description. Clicked link and saw page error.

Global Navigation example often loads everything in overflow menu (ellipsis)

Category

  • Question
  • Bug
  • Enhancement

Expected or Desired Behavior

When a command bar is used in the top placeholder, it should show all menu items and the overflow menu when there is enough width available.

Observed Behavior

Often the command bar will load to 100% width but for some reason the entire menu is placed within the overflow menu and hidden in an ellipses. See attachment images for example.

This seems to happen the most when the menu is loaded in a document library. It's not all the time, but consistent enough to be an issue. When it happens, all menu items are available and function, they are just all tucked away under the ellipse.

2018-03-15_19-00-10

2018-03-15_19-00-49

Application Customizer and search index

Category

  • [x ] Question
  • Bug
  • Enhancement

Will the Application Customizer in PageHeader placeholder get indexed as a content? Meaning if we store some custom metadata there, can we use search to look for the page?

ListView Commands dont render in Edge

Category

  • Question
  • Bug
  • Enhancement

Expected or Desired Behavior

When using Microsoft Edge the ListView Command buttons should show when debugging.

Observed Behavior

Debugging ListView Commands work as expected when switching to Google Chrome, however don't render on Microsoft Edge.

Steps to Reproduce

npm install @microsoft/generator-sharepoint

yo @Microsoft/sharepoint

-Choose Extension
-Choose ListView Command Set
-Choose Default Command Set Name
-Choose Default Command Set Description

npm install

gulp serve --nobrowser

Open up SharePoint online website in Edge with the debugging query string. Browse to list and note the commands aren't there. Switch browser and use the same URL including the query string and note that it's working.

Tracking Page Views on Navigation Changes (js-application-appinsights sample)

I have a solution similar to the js-application-appinsights sample which uses a spfx extension (application customizer) to inject Azure Application Insights on modern SharePoint pages.

However, I have noticed that this current sample (as well as my solution) are not capturing page views when navigating between pages on a modern SP site because a full post-back and DOM load isn't occurring.

How would you recommend a sample like this be extended to detect navigation changes? I'm aware of the navigatedEvent, but that's not usable given how this sample injects JS into the page. Off hand, the only option I can see would be to trigger a page view to be captured on hash change.

Any guidance or updates to this sample would greatly appreciated!

Category

  • Question
  • Bug
  • Enhancement

Expected or Desired Behavior

Page Views are tracked when navigating between pages in a modern SharePoint site.

Observed Behavior

Page Views are tracked by AAI when initially arriving on the page (window/DOM load) or when refreshing (F5) a page, but not when navigating between pages internally since the entire DOM isn't reloaded.

Steps to Reproduce

This behavior can be seen using the sp-dev-fx-extensions/samples/js-application-appinsights sample.

Error when running extensions samples

When running the extension samples for Application customizer. I get the following error. Error details: Error: Killswitches are not initialized. Killswitch requested: 19a3ca15-2aa2-4b0d-a563-4fbee7d77208

I have tried the Hello World extensions and that was working previously, but now has stopped working. Is this has anything to do with the extension being in dev preview?

Steps to Reproduce

  • Clone the sample
  • npm install
  • gulp server --nobrowser
  • Browse to the SharePoint site with the following query string ?loadSPFX=true&debugManifestsFile=https://localhost:4321/temp/manifests.js&customActions={"<>":{"location":"ClientSideExtension.ApplicationCustomizer","properties":{"testMessage":"Hello"}}}

How to localize Command Sets?

Category

  • Question
  • Typo
  • Bug
  • Additional article idea

Question

How do we localize Command Sets? I noticed there is an id property on the items object in the manifest file, which has the following description:

image

  1. If I use the expression as in the screenshot: "id": "$CommandSetTestCommandSetStrings:CommandSetTestCommandSetStrings.Command1;"
  2. and add a nl-nl.js file with dutch values.
  3. and debug the extension on a dutch site
    => it will load the value from the Command1 property on the localized resource, but only in the default (english) language.

Is this expected behavior? Should I write the expression differently? Or is it a bug?

Hope someone can shine a light on this!

Screenshot step 1:
image

Screenshot step 2:
image

Screenshot result:
image

Cannot find module '@microsoft/node-core-library'

Thank you for reporting an issue or suggesting an enhancement. We appreciate your feedback - to help the team to understand your needs, please complete the below template to ensure we have the necessary details to assist you.

Category

  • Bug

Expected or Desired Behavior

Solution should build successfully. Already setup my dev machine and tested webpart on dev machine workbench and SharePoint Online workbench as well. Still the old solution working fine.

Observed Behavior

If you are reporting a bug, please describe the behavior you expected to occur when performing the action. If you are making a suggestion, you can delete this section.

Steps to Reproduce

With the new solution
When i am using gulp serve or gulp serve--, its throwing the following error

at Module.load (module.js:487:32) code: 'MODULE_NOT_FOUND' }
Error - Unknown
Cannot find module '@microsoft/node-core-library'

SPComponentLoader error in SPFx application extension

Category

  • Question
  • [x ] Bug
  • Enhancement

I'm using SPComponentLoader to load SP.js and other files in a SPFx application extension. This works fine, if the extension is loaded on the start page of a web. But as soon as the extension is loaded on e.g. a document library (/Shared Documents/Forms/AllItems.aspx), the SPComponentLoader produces an unknown error when loading module.
This is the code that is supposed to work on every page:

SPComponentLoader.loadScript('/_layouts/15/init.js', {
globalExportsName: '$_global_init'
})
.then((): Promise<{}> => {
return SPComponentLoader.loadScript('/_layouts/15/MicrosoftAjax.js', {
globalExportsName: 'Sys'
});
})
.then((): Promise<{}> => {
return SPComponentLoader.loadScript('/_layouts/15/SP.Runtime.js', {
globalExportsName: 'SP'
});
})
.then((): Promise<{}> => {
return SPComponentLoader.loadScript('/_layouts/15/SP.js', {
globalExportsName: 'SP'
});
})
.then((): Promise<{}> => {
return SPComponentLoader.loadScript('/_layouts/15/SP.Taxonomy.js', {
globalExportsName: 'SP'
});
})
.then((): Promise<{}> => {
return SPComponentLoader.loadScript('/_layouts/15/SP.Search.js', {
globalExportsName: 'SP'
});
})
.then((): void => {
//code here
})
.catch((reason: any) => {
//...log error
});

Enhancement request for the react-application-breadcrumb samples

Category

  • Question
  • Bug
  • Enhancement

Module

React-Application-BreadCrumb

Desired Behavior

Able to show the folder structure inside a document library

Observed Behavior

Currently, only the site name, doclib or list name will be used to compose the breadcrumb.

Steps to Reproduce

  1. create a folder/subfolder in a document library, and navigate into it
  2. the breadcrumb bar is still showing "SiteName" > "DocLib Name" only,
    instead of "Site Name" > "DocLib Name" > "Folder Name" > "Sub-folder Name"

SPFx Commandset title not changing

Important

Use the following form to submit an issue only if it's related to samples in this repo. If you have an issue related to the SharePoint Framework or its documentation, please submit the issue at https://github.com/SharePoint/sp-dev-docs/issues/new. This will help us respond to your issue faster.


Thank you for reporting an issue or suggesting an enhancement. We appreciate your feedback - to help the team to understand your needs, please complete the below template to ensure we have the necessary details to assist you.

Category

  • Question
  • [x ] Bug
  • Enhancement

Expected or Desired Behavior

I'm using node 6.12, npm 3.10, and SPFx 1.4 on a Modern site.
I generate a commandset extension (new project), deploy - everything works as expected.
Now, I want to change the logic .. I want to show change the title of "COMMAND_1" to reflect the number of rows selected.

I change my onListViewUpdated as follows,

public onListViewUpdated(event: IListViewCommandSetListViewUpdatedParameters): void {
const compareOneCommand: Command = this.tryGetCommand('COMMAND_1');
if (compareOneCommand) {
// This command should be hidden unless exactly one row is selected.
compareOneCommand.visible = event.selectedRows.length > 0;
console.log(event.selectedRows.length);
compareOneCommand.title = "Selected " + event.selectedRows.length;
}
}

Now I go about selecting rows - but even though in debug mode event.selectedRows.length shows me the correct value, and compareOneCommand.title shows the proper value, the in UX, the title always says "Selected 0".

Expected: Selected x .. where x is number of rows selected.

Observed Behavior

The title always says "Selected 0" which is incorrect.

Steps to Reproduce

As above ..

**** UPDATE *****
I have put this issue at the right place -SharePoint/sp-dev-docs#1177 .. (ok to close this one)

SPFx Extension Header flicker Issue.

SPFx Extension Header flicker Issue.

To customize the Header we have used sharepoint extension model. Its Working but there is a Flicker in loading.
It Loads the Old Header (By Default header provided in modern pages) and then my extension work.

Category

  • Question
  • Bug
  • Enhancement

Expected or Desired Behavior

Extension should load without Flicker

Observed Behavior

To customize the Header we have used sharepoint extension model. Its Working but there is a Flicker in loading.
It Loads the Old Header (By Default header provided in modern pages) and then my extension work.

Thanks for your contribution! Sharing is caring.

Documented this.context.placeholderProvider does not exist

Category

  • Question
  • Bug
  • Enhancement

Expected or Desired Behavior

As documented here, this.context.placeholderProvider must be used in order to create content within a page placeholder.

Observed Behavior

After creating a ListCommandSet extension using the latest yeoman generator, the property placeholderProvider is not available within this.context.[...]

Steps to Reproduce

Create a new SPFX extension (list command set) and try looking for this.context.placeholderProvider

Issue in js-application-analytics code while installation

[BUG]

Dear Team,

I am having the unexpected behavior while running npm install command for the solution js-application-analytics. It gives me error 404 not found for a while. I assumed this might be due to old version installed on my laptop but that is also not the case as I updated SharePoint templates.
Other Solutions in the same git repository are working fine for me.
I am attaching the log file and error screen as well
googleanalyticserrorscreen
2017-11-05T15_22_26_754Z-debug.log

Please let me know if I am doing something wrong.

Thanks and best regards,
Sumesh Kashyap

react-application-tenant-global-navbar Styling and Mobile support

Category

  • Question
  • Bug
  • Enhancement

Expected or Desired Behavior

Navigation should have the same design UI regardless of what page it is on and should work for mobile.

Observed Behavior

  1. If you go to any page that has the OOB CommandBar ie. "/Shared%20Documents/Forms/AllItems.aspx" the navigation color is different.
  2. On pages where OOB CommandBar is not present in mobile or smaller window the navigation dissappears but if there is a OOB CommandBar present mobile rendering is fine. Tells me it's missing some css classes or something similar.

Question about extension behavior on modern route change

Hi,
I have interesting use case - I'm using extensions for notifications to show some message to the user which is working fine when I do standard redirect to the page and extension is reloaded, but when I click on the link to redirect to other page in the same site then extension remains and only page content is reloaded which is expected with react (modern) routing, but I would like to call my function on each redirect (even on modern routing). Possibly it is not supported on extensions, but would you think to include such a feature in the future release - I mean some kind a function (e.g. onPageRouteChange) which would be only called in extension on modern routing, but extension would remain as is?

The issue I found is on the root site, e.g. https://tenant.sharepoint.com/SitePages/Home.aspx and then you navigate to SharePoint page (click on the link in suite bar) https://tenant.sharepoint.com/_layouts/15/sharepoint.aspx and click back button on your browser. Extension is not loaded then.

Category

  • [ x] Question / Suggestion
  • [ x] Issue

Thanks
Saulius

Security Trimming for the react-application-tenant-global-navbar SPFx menu

Category

  • Question
  • Bug
  • Enhancement

Expected or Desired Behavior

I am using the https://github.com/SharePoint/sp-dev-fx-extensions/tree/master/samples/react-application-tenant-global-navbar extension in the production environment and it is working really well. So a big thank you first for the extension code.
It would be great if the menus are security trimmed similar to managed metadata navigation with friendly urls, which will only show menus if the user has access to the page the menu links to.

Observed Behavior

Currently, the menu from the term store is not security trimmed. Users will see the menu and if they click on a menu, which links to a page they don't have access to, it takes them to an access denied page. It would have been great to not show the menu at all.

Steps to Reproduce

Set up as detailed in the Readme and set a few of the menu terms to pages the user does not have access to.

Thanks for your contribution! Sharing is caring.

SPFX Extensions FieldCustomizers onRenderCell not called when navigating

Category

  • Question
  • Bug
  • Enhancement

I'm trying out the SPFx Extensions Field Customizer, following this guide https://docs.microsoft.com/en-us/sharepoint/dev/spfx/extensions/get-started/building-simple-field-customizer

Expected or Desired Behavior

Successfully applied the percentage field customizer. when accessing nested item inside folder, the nested item should be rendered correctly, and the breadcrumb should work.

Observed Behavior

There are some unexpected behavior when navigating within the document library.

  • when accessing nested item inside folder, the field customizer is not rendered
  • the root link on document library breadcrumb is not working.

Steps to Reproduce

  1. Follow the article, deploy the SPFx, and create following structure in the document library
    -ROOT
    --FolderA
    ---ItemA1
    --ItemB
    --ItemC

  2. ItemB and ItemC rendered properly

  3. Navigate into FolderA, ItemA1 will not rendered properly, I check from console.log, it seems the onRenderCell function still watching the root folder.

  4. Use the list breadcrumb, click on Root folder, It will not redirect to root folder, instead will throw console error regarding knockout js and stuck on the folder.

  5. refresh the page, and ItemA1 will be rendered correctly, and able to navigate to root folder using the breadcrumb.

How to make it work

After the step 3,

  • Select the any list item / check the item selector on the left side, the Field Customizer will be rendered.
  • Once the field Customizer is rendered, the breadcrumb link will work as well.
  • I believe the process should not require me to click on any document in order to make the field Customizer able to work

Field Customizer isn't initialized on new rows in a Document Library (possible other list types also)

Category

  • Question
  • Bug
  • Enhancement

Expected or Desired Behavior

When uploading a new file to a Document Librarary that uses SPFX Field Customizer Extension we expect the new item to also get the Field Customizer and that they are initialized.

Observed Behavior

Right now the default behaviour of the column is removed but the Field Customizer isn't added

Steps to Reproduce

  1. Have a Document Library with some files and use a field customizer on a column.
  2. Upload a new item
  3. Observe

Calling REST Api with SPHtttpClient get 403

Category

  • Question

I call the list api in my tenant with SPHttpClient, and get 403, also try to call same api using jQuery ger method wich work.

Can you tell me the recommended way to REST call from the Shared Point Extension?

Thank you.

Just doesn't work

Sample: Global Navbar.
Sorry but this doesn't deploy like any other extension I've used. I've copied over the files and published the package all successfully but adding the app to any site does nothing. It works perfectly in debug mode. What am I missing? Incidentally the ps1 script doesn't work either.

Category

  • Bug

Expected or Desired Behavior

Same as debug mode

Observed Behavior

Nothing, no errors just nothing.

Steps to Reproduce

build and package solution in --ship
copy files to cdn
publish package
add app to modern site

Thanks.

The Readme Instructions need Updating to 1.4.0

Important

Use the following form to submit an issue only if it's related to samples in this repo. If you have an issue related to the SharePoint Framework or its documentation, please submit the issue at https://github.com/SharePoint/sp-dev-docs/issues/new. This will help us respond to your issue faster.


Thank you for reporting an issue or suggesting an enhancement. We appreciate your feedback - to help the team to understand your needs, please complete the below template to ensure we have the necessary details to assist you.

Category

  • Question
  • Bug
  • [ X] Enhancement

Expected or Desired Behavior

You do not need to drag and drop the deploy folder contents anymore in 1.4.0 as everything is packaged in the .sppkg file

Observed Behavior

Current Instructions say drag and drop deploy contents of folder.

Thanks for your contribution! Sharing is caring.

Are the dates correct on the template correct - 2018 ??

Thank you for reporting an issue or suggesting an enhancement. We appreciate your feedback - to help the team to understand your needs, please complete the below template to ensure we have the necessary details to assist you.

Category

  • [X ] Question
  • Bug
  • Enhancement

Expected or Desired Behavior

If you are reporting a bug, please describe the expected behavior. If you are suggesting an enhancement please describe thoroughly the enhancement, how it can be achieved, and expected benefit.

Observed Behavior

If you are reporting a bug, please describe the behavior you expected to occur when performing the action. If you are making a suggestion, you can delete this section.

Steps to Reproduce

If you are reporting a bug please describe the steps to reproduce the bug in sufficient detail to allow testing. Only way to fix things properly, is to have sufficient details to reproduce it. If you are making a suggestion, you can delete this section.

Submission Guidelines

Delete this section after reading

  • All suggestions or bugs are welcome, please let us know what's on your mind.
  • If you are reporting an issue around any of the samples, please ensure that you have clear reference on the sample and possibly code file, which should be fixed.
  • If you have technical questions about the framework, weโ€™ll be monitoring #spfx, #spfx-webparts, #spfx-extensions and #spfx-tooling on (SharePoint StackExchange)[http://sharepoint.stackexchange.com/]. You can also alternatively submit your question to (SharePoint Developer group)[https://network.office.com/t5/SharePoint-Developer/bd-p/SharePointDev] at Office Network.
  • Remember to include sufficient details and context.
  • If you have multiple suggestions or bugs please submit them in separate bugs so we can track resolution.

Thanks for your contribution! Sharing is caring.

Extension not loading/rendering after site page "modern redirecting"

Important

Thank you for reporting an issue or suggesting an enhancement. We appreciate your feedback - to help the team to understand your needs, please complete the below template to ensure we have the necessary details to assist you.

Category

  • [ x] Question
  • [ x] Bug
  • Enhancement

Expected or Desired Behavior

Extension should load/render when navigating/"modern redirecting" to other site pages.

Observed Behavior

I have created an extension based on "react-application-tenant-global-navbar" sample.
When I navigate between site pages, extension is not loaded. If full postback/refresh extension is loaded/rendered.

  • Extension .js files are visible under "sources" in the browser developer tool.
  • I added some console logging to onInit() method and it is not called.
  • Extension loading/rendering needs some additional step for this "modern redirecting"?

Steps to Reproduce

Communication Site -> Deploy sample react-application-tenant-global-navbar and configure required terms.

  1. In homepage, in the events webpart navigate to "All events" (/_layouts/15/Events.aspx?ListGuid=XXXX)
  2. Events page is loaded using "modern redirecting" (I don't know the name of the feature)
  3. Extension is not rendered

Deploy sharepoint framework extension to sharepoint site collection #spfx #spfx-extensions

Category

  • Bug

Expected or Desired Behavior

Deploy sharepoint framework extension to my sharepoint site collection

Observed Behavior

My package not valid when upload it on my App Catalog

Steps to Reproduce

I try it with both, my sharepoint framework extension and with react-slider-field-customizer([https://github.com/SharePoint/sp-dev-fx-extensions/tree/master/samples/react-field-slider]) in both cases i get this:
deploy-error

my app packages is not valid.

Here is my configuration files:
package-solution:
package-solution

manifest:
manifest json

elements.xml
elements xml

I executed comands:

  • gulp bundle
  • gulp package-solution

problem following deployment

Hello,
I have followed the deployment indcations but nothing happens when I run the script, even if I have no error in the shell, I do not see the menu in my site collection or in my site "modern". Can anyone help me ?

Global menu from loads from Term Store and but renders the menus as text without href - so unable to click through

Thank you for reporting an issue or suggesting an enhancement. We appreciate your feedback - to help the team to understand your needs, please complete the below template to ensure we have the necessary details to assist you.

Category

  • Bug

Expected or Desired Behavior

The global menu loads up from term store and when clicked, the menu links should redirect the user to the appropriate link from the Term Store.

Observed Behavior

This is a great feature and exactly what I was looking for but have sadly run into a few issues. Any help would be greatly appreciated.
The global menu does loads up correctly from term store but the menus don't seem to have any HREF loaded from the Term Store. So they are not clickable links just plain text menu items.
image

image

This has been deployed in the tenancy app store.

Steps to Reproduce

I followed the steps to deploy as detailed in your instructions.

Thanks for your contribution! Sharing is caring.

Command set extension only showing up when gulp serve is running

Category

  • Question
  • Bug
  • Enhancement

Expected or Desired Behavior

Am following this article, and developed a command set. Deployed in my site collection, and able to see the commandset for my List. Step 6 says I have to run gulp serve --nobrowser & its working only when the above command is running. I wanted this to work even when powershell is not running.

Observed Behavior

Step 6 says I have to run gulp serve --nobrowser & its working only when the above command is running.

Steps to Reproduce

Deploy the command set in site collection following the exact steps in above said article. And test it.

ListView command button is not working dynamically based on REST async call

Category

  • Question
  • Bug
  • Enhancement

Expected or Desired Behavior

I would like to add a list view command set button dynamically based on the selected row

Observed Behavior

The button is not being shown/hidden dynamically

Steps to Reproduce

I'm using @microsoft/sp-listview-extensibility. I used the tutorial from link.
I'm checking if the selected row is present in FavouritesList(a SP list having all the favourite files/folders). If present, donot show the button else show the button. PFB the piece of code under onListViewUpdated method.

const addFavButton: Command = this.tryGetCommand('AddFavourite');
addFavButton.visible = false;
var selectedFavInList;

if (addFavButton) {
  if (event.selectedRows.length === 1) {
    var url = this.context.pageContext.web.absoluteUrl;
    let web = new Web(url);
    web.currentUser.get().then((user) => {
      this.currentUserId = user.Id;
      web.lists.getByTitle(FavouriteSource).items
       .filter("(UserNameStringId eq " + this.currentUserId + ")")
        .select("FolderUri,Id").get().then(favItems => {
            this.favouriteItems = favItems;
            selectedFavInList = jQuery.grep(this.favouriteItems, favItem => {
                return favItem.FolderUri == event.selectedRows[0].getValueByName("FileRef");
            });
            
            if (selectedFavInList.length > 0) {
            addFavButton.visible = false;
            }
            else {
            addFavButton.visible = true;
            }
        });
    });
  }
}

Please help me understand how to accomplish the same.

Extension throwing error: Killswitches are not initialized

When performing "gulp serve" on a new empty extension (app customizer) an error is thrown:

Killswitches are not initialized. Killswitch requested: aca19dad-e178-47bd-882e-5633af7b7ff0
CALL STACK:
Error: Killswitches are not initialized. Killswitch requested: aca19dad-e178-47bd-882e-5633af7b7ff0
at Function.e.isActivated (https://spoprod-a.akamaihd.net/files/sp-client-prod_2018-03-02.016/sp-core-library_en-us_7572ea1dfcf36c9fe486c603f1fb4180.js:70:14914)
at t._forEachPropertyWithMetaData (https://spoprod-a.akamaihd.net/files/sp-client-prod_2018-03-02.016/sp-webpart-base_en-us_6e989e91f47afa507f7a18d98578f5f8.js:84:25477)
at t._reInstateServerProcessedData (https://spoprod-a.akamaihd.net/files/sp-client-prod_2018-03-02.016/sp-webpart-base_en-us_6e989e91f47afa507f7a18d98578f5f8.js:84:24160)
at t._deserialize (https://spoprod-a.akamaihd.net/files/sp-client-prod_2018-03-02.016/sp-webpart-base_en-us_6e989e91f47afa507f7a18d98578f5f8.js:84:27069)
at t._internalDeserialize (https://spoprod-a.akamaihd.net/files/sp-client-prod_2018-03-02.016/sp-webpart-base_en-us_6e989e91f47afa507f7a18d98578f5f8.js:84:28284)
at https://spoprod-a.akamaihd.net/files/sp-client-prod_2018-03-02.016/sp-webpart-base_en-us_6e989e91f47afa507f7a18d98578f5f8.js:84:29330
at new Promise ()
at t._internalFirstTimeRender (https://spoprod-a.akamaihd.net/files/sp-client-prod_2018-03-02.016/sp-webpart-base_en-us_6e989e91f47afa507f7a18d98578f5f8.js:84:28874)
at e._initializeAndRenderWebPart (https://spoprod-a.akamaihd.net/files/sp-client-prod_2018-03-02.016/sp-pages-assembly_en-us_043bdad7f703a3fc5c0880b7c7495359.js:428:73263)
at https://spoprod-a.akamaihd.net/files/sp-client-prod_2018-03-02.016/sp-pages-assembly_en-us_043bdad7f703a3fc5c0880b7c7495359.js:428:59061

This seems to happen wherever web parts are on the page. It doesn't occur in library pages, for example. In my communication site the error doesn't show up in the console although the web parts don't load. In other pages the error shows on the page itself and is thrown to the console once I try to interact with the page like when attempting to edit it.

I'm on Windows 10 using SPFx framework v1.4.1, node v6.13.0, npm v3.10.10.

Category

  • Question
  • [ X] Bug
  • Enhancement

Steps to Reproduce

Instantiate a vanilla extension and serve it, as far as I can tell, on a page that has web parts in it.

Extension showing when using debug url but not when deployed using .sppkg

Category

  • Question
  • [ ?] Bug
  • Enhancement

Expected or Desired Behavior

Hi, Ive built an spfx extension, i started from jquery application toastr to build my code. This was working ๐Ÿ‘

Ive tested using the url ?loadSPFX=true&debugManifestsFile=https://localhost:4321/temp/manifests.js&customActions={"a861c815-e425-416d-9520-04bcdf557e27":{"location":"ClientSideExtension.ApplicationCustomizer"}}
and deployed the .sppkg and it worked.

Then I added my code, now i get the following behavior

Observed Behavior

Using the debug url, i can see my spfx extension building.

Deployed using the package, i see nothing worrying from the console neither in the UI. How to further troubleshooting ?

I only see :

  • Not one page nav, startPrefetch
  • Initialized ClientSideExtensionHelper

Steps to Reproduce

I shared my source code https://github.com/seaSide974/spfxmega.
It is a mega menu based on term store (using CSOM), using JQUERY.
Ive added the sppkg, no errors are showing on the app catalog, the feature is correctly on my site collection, i have added the app to the site collection.
The assets are in : /sites/devjeff/style library/MIS.GlobalNavigation.Modern/deploy/ (file generated from temp/deploy)

Thank you !

Tenant Global NavBar Application Customizer > Deployment > TenantGlobalNavBarProvisionCustomizer.ps1

Thank you for reporting an issue or suggesting an enhancement. We appreciate your feedback - to help the team to understand your needs, please complete the below template to ensure we have the necessary details to assist you.

Category

  • Question
  • Bug
  • Enhancement

Expected or Desired Behavior

Simple addition: I was searching for a way to remove the application customizer once deployed with PS, this can be done via:
$context = Get-PnPContext
$web = Get-PnPWeb
$context.Load($web)
Execute-PnPQuery
$web.UserCustomActions.Clear()
$context.Load($web.UserCustomActions)
Execute-PnPQuery

Also needed when running deploy more than once because it will load the customizer two times.

Observed Behavior

Run twice or try to delete the customizer

Steps to Reproduce

Tenant Global NavBar Application Customizer > Deployment

TenantGlobalNavBarProvisionCustomizer.ps1
Run twice or try to delete the customizer

Thanks for your contribution! Sharing is caring.

Build your first extension fails

Category

  • Question
  • Bug
  • Enhancement

Expected or Desired Behavior

According with this get started:
https://dev.office.com/sharepoint/docs/spfx/extensions/get-started/using-page-placeholder-with-extensions
after the command gulp serve I have the following error:

Error - [write-manifests] Manifest validation error (./src/extensions/appCustomizerHelloWorld/AppCustomizerHelloWorldApplicationCustomizer.manifest.json):
(#/) Data does not match any schemas from 'oneOf'
(#/) Missing required property: description
(#/alias) String is too long (44 chars), maximum 40
(#/componentType) No enum match for: Extension
(#/) Missing required property: preconfiguredEntries
(#/) Missing required property: commands

Observed Behavior

After the scaffolding I have to be able to run the client side web part

Steps to Reproduce

Please follow these guidelines:
https://dev.office.com/sharepoint/docs/spfx/extensions/get-started/build-a-hello-world-extension
https://dev.office.com/sharepoint/docs/spfx/extensions/get-started/using-page-placeholder-with-extensions

Thanks for your contribution! Sharing is caring.

DEployment instructions for react-application-regions footer reference wrong package

Important

Use the following form to submit an issue only if it's related to samples in this repo. If you have an issue related to the SharePoint Framework or its documentation, please submit the issue at https://github.com/SharePoint/sp-dev-docs/issues/new. This will help us respond to your issue faster.


Thank you for reporting an issue or suggesting an enhancement. We appreciate your feedback - to help the team to understand your needs, please complete the below template to ensure we have the necessary details to assist you.

Category

  • Question
  • [ X] Bug
  • Enhancement

Expected or Desired Behavior

If you are reporting a bug, please describe the expected behavior. If you are suggesting an enhancement please describe thoroughly the enhancement, how it can be achieved, and expected benefit.

The deployment instructions should say :-
add to the "Apps for SharePoint" library of the AppCatalog in your tenant the react-application-regions footer.spppkg file that you will find under the ./sharepoint/solution subfolder of the sample root folder

Observed Behavior

If you are reporting a bug, please describe the behavior you expected to occur when performing the action. If you are making a suggestion, you can delete this section.

The deployment instructions say :-
add to the "Apps for SharePoint" library of the AppCatalog in your tenant the spfx-discuss-now.spppkg file that you will find under the ./sharepoint/solution subfolder of the sample root folder

Thanks for your contribution! Sharing is caring.

ListViewCommandSet not showing anything in SPO

Category

  • Question
  • Bug
  • Enhancement

Expected or Desired Behavior

When building a ListViewCommandSet extension using the latest yeoman generator's default configurations with the following commands :

  • gulp bundle --ship
  • gulp package-solution --ship

And we deploy the resulting .sppkg file to the app catalog, and we install the app on a site, we should see the list command button appear as expected when navigating in a library.

Observed Behavior

Nothing happens, both list command buttons do not appear, the script isn't even loaded in the Network tab of the browser. When debugging the extension using the URL query string and gulp serve, everything works perfectly, the load debug scripts modal appears, I can accept, then list extension is loaded and everything works.

However, when I deploy the official .sppkg to the app catalog, everything goes smoothly, I can install the app in my site collection, but once the app is finished installing nothing happens.

Steps to Reproduce

  • Create a ListViewCommandSet using the latest yeoman generator like here.
  • Leave everything as is
  • Deploy the final sppkg to the app catalog (gulp bundle --ship / gulp package-solution --ship)
  • Add the app to a modern site collection
  • Once the app is installed, go in a library and notice the list buttons that aren't showing

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.