SharePoint Webhooks -- now Generally Available!
Hello everyone, Just wanted to announce that SharePoint Webhooks is now Generally Available. First announced https://dev.office.com/blogs/sharepoint-webhooks-developer-preview-now-available in September, Webhooks https://dev.office.com/blogs/sharepoint-webhooks-is-now-generally-available-build-service-oriented-processes-in-sharepoint. Webhooks are based on industry standard patterns around how services fire notifications that developers can intercept and react to. In particular, within SharePoint we've added support for webhooks against SharePoint list data, including events like Item Added, Updated, and Deleted. A developer could then choose to kick off a process, or programmatically update a document, or fire off a tailored notification to users using information you can get from webhooks. You can find an end-to-end overview and "getting started" with webhooks https://dev.office.com/sharepoint/docs/apis/webhooks/overview-sharepoint-webhooks. Look forward to seeing what you all build with these! -- Mike Ammerlaan, Office Ecosystem Marketing teamSPFx Extensions not showing at customer tenant
Hi all, We are having some problems with 2 SPFx Extensions we have deployed to a customer tenant. Both of them are properly deployed to the App Catalog (Site Collection Catalog), but they are not showing and when we try to debug them, the Extensions code is not being reached. We have also created a dummy extension and it’s not shown at customer tenant once we deploy there. Those 2 extensions are properly deployed in two other different tenants so we don’t have a clue of what the problem could be in the customer tenant. I would appreciate any tip aimed to know what could be happening here. cc VesaJuvonen
Hide modern list Command Bar button
Is it currently possible to hide a default Command Bar Button using a CustomAction? We would like for example to hide the default 'Export to Excel' button. In the Classic view this could be done by a Custom Action: <CustomAction Id="RemoveRibbonButtonLibrary" Location="CommandUI.Ribbon" RegistrationId="101" RegistrationType="List">> <CommandUIExtension> <CommandUIDefinitions> <CommandUIDefinition Location="Ribbon.Library.Actions.ExportToSpreadsheet" /> </CommandUIDefinitions> </CommandUIExtension> </CustomAction> But this doens't work for the Modern button. When we try location 'ClientSideExtension.ListViewCommandSet.CommandBar'. We get error: "The specified properties CommandUIExtension are not supported for client-side custom action". We also cannot found anything related to hiding a button in the documentation: https://docs.microsoft.com/en-us/sharepoint/dev/solution-guidance/modern-experience-customizations-customize-lists-and-librariesCan I show a Rich Text inside Popup for our SPFX web part instead of Plain-Text
I want to build an SPFX web part which render 2 buttons and when the user clicks on the buttons, 2 Popups should be shown + have 2 fields ("Who We Are" & "Our Value") to enter the 2 Popups text inside the web part's settings, something as follow:- So i did the following:- inside the `MyModalPopupWebPart.ts`:- import * as React from 'react'; import * as ReactDom from 'react-dom'; import { Version } from '@microsoft/sp-core-library'; import { IPropertyPaneConfiguration, PropertyPaneTextField } from '@microsoft/sp-property-pane'; import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base'; import * as strings from 'MyModalPopupWebPartStrings'; import MyModalPopup from './components/MyModalPopup'; import { IMyModalPopupProps } from './components/IMyModalPopupProps'; export interface IMyModalPopupWebPartProps { description: string; WhoWeAre: string; OurValue:string; } export default class MyModalPopupWebPart extends BaseClientSideWebPart<IMyModalPopupWebPartProps> { public render(): void { const element: React.ReactElement<IMyModalPopupProps> = React.createElement( MyModalPopup, { description: this.properties.description, WhoWeAre: this.properties.WhoWeAre, OurValue: this.properties.OurValue } ); ReactDom.render(element, this.domElement); } protected onDispose(): void { ReactDom.unmountComponentAtNode(this.domElement); } protected get dataVersion(): Version { return Version.parse('1.0'); } protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration { return { pages: [ { header: { description: strings.PropertyPaneDescription }, groups: [ { groupName: strings.BasicGroupName, groupFields: [ PropertyPaneTextField('WhoWeAre', { label: "who We Are" }), PropertyPaneTextField('OurValue', { label: "Our value" }), PropertyPaneTextField('description', { label: "Description" }), ] } ] } ] }; } } inside the `MyModalPopup.tsx`:- import * as React from 'react'; import { IMyModalPopupProps } from './IMyModalPopupProps'; import { DefaultButton } from '@fluentui/react/lib/Button'; import { MYModal } from './MYModal'; import { MYModal2 } from './MYModal2'; interface IPopupState { showModal: string; } export default class MyModalPopup extends React.Component<IMyModalPopupProps, IPopupState> { constructor(props: IMyModalPopupProps, state: IPopupState) { super(props); this.state = { showModal: '' }; this.handler = this.handler.bind(this); this.Buttonclick = this.Buttonclick.bind(this); } handler() { this.setState({ showModal: '' }) } private Buttonclick(e, whichModal) { e.preventDefault(); this.setState({ showModal: whichModal }); } public render(): React.ReactElement<IMyModalPopupProps> { const { showModal } = this.state; return ( <div> <DefaultButton onClick={(e) => this.Buttonclick(e, 'our-value')} text="Our Value" /> { showModal === 'our-value' && <MYModal2 OurValue={this.props.OurValue} myprops={this.state} handler={this.handler} />} <DefaultButton onClick={(e) => this.Buttonclick(e, 'who-we-are')} text="Who We Are" /> { showModal === 'who-we-are' && <MYModal WhoWeAre={this.props.WhoWeAre} myprops={this.state} handler={this.handler} />} </div> ); } } inside the `MYModal.tsx` :- import * as React from 'react'; import { useId, useBoolean } from '@fluentui/react-hooks'; import { getTheme, mergeStyleSets, FontWeights, Modal, IIconProps, IStackProps, } from '@fluentui/react'; import { IconButton, IButtonStyles } from '@fluentui/react/lib/Button'; export const MYModal = (myprops) => { const [isModalOpen, { setTrue: showModal, setFalse: hideModal }] = useBoolean(false); const [isPopup, setisPopup] = React.useState(true); const titleId = useId('title'); React.useEffect(() => { showModal(); }, [isPopup]); function ExitHandler() { hideModal(); setisPopup(current => !current) myprops.handler(); } return ( <div> <Modal titleAriaId={titleId} isOpen={isModalOpen} onDismiss={ExitHandler} isBlocking={true} containerClassName={contentStyles.container} > <div className={contentStyles.header}> <span id={titleId}>Modal Popup</span> <IconButton styles={iconButtonStyles} iconProps={cancelIcon} ariaLabel="Close popup modal" onClick={ExitHandler} /> </div> <div className={contentStyles.body}> <p>{myprops.WhoWeAre} </p> </div> </Modal> </div> ); }; const cancelIcon: IIconProps = { iconName: 'Cancel' }; const theme = getTheme(); const contentStyles = mergeStyleSets({ container: { display: 'flex', flexFlow: 'column nowrap', alignItems: 'stretch', }, header: [ // eslint-disable-next-line deprecation/deprecation theme.fonts.xLarge, { flex: '1 1 auto', borderTop: '4px solid ${theme.palette.themePrimary}', color: theme.palette.neutralPrimary, display: 'flex', alignItems: 'center', fontWeight: FontWeights.semibold, padding: '12px 12px 14px 24px', }, ], body: { flex: '4 4 auto', padding: '0 24px 24px 24px', overflowY: 'hidden', selectors: { p: { margin: '14px 0' }, 'p:first-child': { marginTop: 0 }, 'p:last-child': { marginBottom: 0 }, }, }, }); const stackProps: Partial<IStackProps> = { horizontal: true, tokens: { childrenGap: 40 }, styles: { root: { marginBottom: 20 } }, }; const iconButtonStyles: Partial<IButtonStyles> = { root: { color: theme.palette.neutralPrimary, marginLeft: 'auto', marginTop: '4px', marginRight: '2px', }, rootHovered: { color: theme.palette.neutralDark, }, }; inside the `MYModal2.tsx`:- import * as React from 'react'; import { useId, useBoolean } from '@fluentui/react-hooks'; import { getTheme, mergeStyleSets, FontWeights, Modal, IIconProps, IStackProps, } from '@fluentui/react'; import { IconButton, IButtonStyles } from '@fluentui/react/lib/Button'; export const MYModal2 = (myprops) => { const [isModalOpen, { setTrue: showModal, setFalse: hideModal }] = useBoolean(false); const [isPopup, setisPopup] = React.useState(true); const titleId = useId('title'); React.useEffect(() => { showModal(); }, [isPopup]); function ExitHandler() { hideModal(); setisPopup(current => !current) myprops.handler(); } return ( <div> <Modal titleAriaId={titleId} isOpen={isModalOpen} onDismiss={ExitHandler} isBlocking={true} containerClassName={contentStyles.container} > <div className={contentStyles.header}> <span id={titleId}>Modal Popup</span> <IconButton styles={iconButtonStyles} iconProps={cancelIcon} ariaLabel="Close popup modal" onClick={ExitHandler} /> </div> <div className={contentStyles.body}> <p>{myprops.OurValue} </p> </div> </Modal> </div> ); }; const cancelIcon: IIconProps = { iconName: 'Cancel' }; const theme = getTheme(); const contentStyles = mergeStyleSets({ container: { display: 'flex', flexFlow: 'column nowrap', alignItems: 'stretch', }, header: [ // eslint-disable-next-line deprecation/deprecation theme.fonts.xLarge, { flex: '1 1 auto', borderTop: '4px solid ${theme.palette.themePrimary}', color: theme.palette.neutralPrimary, display: 'flex', alignItems: 'center', fontWeight: FontWeights.semibold, padding: '12px 12px 14px 24px', }, ], body: { flex: '4 4 auto', padding: '0 24px 24px 24px', overflowY: 'hidden', selectors: { p: { margin: '14px 0' }, 'p:first-child': { marginTop: 0 }, 'p:last-child': { marginBottom: 0 }, }, }, }); const stackProps: Partial<IStackProps> = { horizontal: true, tokens: { childrenGap: 40 }, styles: { root: { marginBottom: 20 } }, }; const iconButtonStyles: Partial<IButtonStyles> = { root: { color: theme.palette.neutralPrimary, marginLeft: 'auto', marginTop: '4px', marginRight: '2px', }, rootHovered: { color: theme.palette.neutralDark, }, }; Currently the "Who We Are" & "Our Value" fields only allow to enter plain-text, and even if i add HTML code inside the "Who We Are" & "Our Value" fields>> the popup will show the HTML as-is and not as a Rich-Text. So is there a way to allow my popup to show rich text instead of just a plain-text? either by entering pure HTML code inside the "Who We Are" & "Our Value" fields and allow the popup to render HTML rich text? or have the "Who We Are" & "Our Value" fields as Rich Text editors and allow the popup to render the entered rich text? is this possible? ThanksCustom page layouts/default content for Modern Pages?
I am trying to come to grips with the best model for creating a template/layout for custom modern pages. For example, in classic Publishing pages, we could create page layout templates that included default web parts and layouts. This would allow users to quickly scaffold content while also filling in some metadata about the page itself. This isn't currently possible with modern pages. My question-- are there plans to do this or provide this type of extensibility? For example, the modern "Events" page seems to be a modern take on this type of functionality. Users can set metadata (time/date) on the page itself, while also filling in some pre-added web parts (text, images, etc.). However, there is no way to update this template or inherit from it to add a custom layout or additional metadata to the page.SharePoint Patterns & Practices - PnP Core and PnP PowerShell SIG recording - 5th of October
SharePoint Patterns and Practices (PnP) - PnP Core, PnP PowerShell and provisioning engine Special Interest Group (SIG) bi-weekly call recording from the 5th of October meeting is now available from PnP YouTube channel at http://aka.ms/sppnp-videos. The presentation is available from the PnP docs at http://aka.ms/sppnp-docs. Topics covered on 5th of October 2017 Miscellaneous announcements - 2:22 Quick look on latest SharePoint Developer Roadmap - 5:26 Modern themes and site designs - Provisioning - 10:36 DEMO - End-to-end Site Design provisioning process - How to setup, configure and extend with your own logic? - Vesa Juvonen - 31:02 PnP Core Component, PnP PowerShell and provisioning engine Special Interest Group bi-weekly calls are targeted for anyone who's interested in the PnP Core component and PnP PowerShell capabilities in SharePoint Online and in SharePoint on-premises. You can download recurrent invite from http://aka.ms/SPPnP-Core-SIG-Call. Welcome and join the discussion. If you have any questions, comments or feedback, feel free to provide your input as comments to this post as well.
