pnp/sp-dev-fx-controls-react

The EnhancedThemeProvider acts as a wrapper for React and non-React controls to ensure consistent styling across different hosting environments. It extends the standard Fluent UI ThemeProvider by adding logic to handle specific hosting scenarios:

• In SharePoint: It uses the theme passed via the theme property or defaults to the current site's theme.
• In Microsoft Teams: It ignores the theme property and instead uses the context property to detect the active Teams theme (Default, Dark, or High Contrast). It also includes a handler to update the theme in real-time when a user changes it in Teams, without requiring a reload of the Tab or Personal App.

Note on High Contrast in Teams: The High Contrast theme is manually emulated and only fully supports specific controls: ChoiceGroup, Checkbox, ComboBox, DatePicker, SpinButton, TextField, Toggle, PrimaryButton, DefaultButton, CompoundButton, and IconButton. Other Fluent controls may experience rendering issues.

<EnhancedThemeProvider context={this.props.context}>
  {/* controls to apply the theme to */}
</EnhancedThemeProvider>

When using ListItemAttachments alongside a DynamicForm (or any component using ETags for optimistic concurrency control), you must use the onAttachmentChange callback.

This callback provides updated item data, including a new ETag. You should pass this data to the form's updateETag method to prevent 412 Precondition Failed errors when saving the form after attachments have been modified.

import * as React from 'react';
import { DynamicForm } from '@pnp/spfx-controls-react/lib/DynamicForm';
import { ListItemAttachments } from '@pnp/spfx-controls-react/lib/ListItemAttachments';

export class MyFormComponent extends React.Component<any, any> {
  private dynamicFormRef = React.createRef<DynamicForm>();

  /**
   * Callback invoked when attachments are added or removed
   * Updates the ETag in DynamicForm to prevent 412 conflicts
   */
  private onAttachmentChange = (itemData: any): void => {
    if (this.dynamicFormRef.current) {
      this.dynamicFormRef.current.updateETag(itemData);
    }
  }

  public render(): React.ReactElement {
    return (
      <div>
        <ListItemAttachments
          listId={listId}
          itemId={itemId}
          context={this.props.context}
          onAttachmentChange={this.onAttachmentChange}
        />
        
        <DynamicForm
          ref={this.dynamicFormRef}
          context={this.props.context}
          listId={listId}
          listItemId={itemId}
          respectETag={true}
        />
      </div>
    );
  }
}

If your content is loaded dynamically (e.g., from an API), use the triggerPageEvent prop instead of providing a full array to element.

When triggerPageEvent is used:

1. You must provide a single JSX.Element to the element prop (the current slide).
2. You must provide canMoveNext and canMovePrev booleans to indicate if the buttons should be enabled.
3. The element elements are distinguished based on their key property.
4. After triggerPageEvent is executed, the carousel enters a processing mode and displays the loadingComponent (or a default Spinner).

<Carousel
  buttonsLocation={CarouselButtonsLocation.bottom}
  buttonsDisplay={CarouselButtonsDisplay.buttonsOnly}

  contentContainerStyles={styles.carouselContent}
  containerButtonsStyles={styles.carouselButtonsContainer}

  canMoveNext={this.state.canMoveNext}
  canMovePrev={this.state.canMovePrev}
  triggerPageEvent={this.triggerNextElement}
  element={this.state.currentCarouselElement}
/>

Instead of providing a static data object, you can use the datapromise property to load data asynchronously. This is useful when fetching data from an API or service.

When using datapromise, you can also provide:

• loadingtemplate: A function that returns a React element to display while the promise is pending (e.g., a Spinner).
• rejectedtemplate: A function that receives an error: string and returns a React element to display if the promise fails.

// 1. Define the async data loader
private _loadAsyncData(): Promise<Chart.ChartData> {
  return new Promise<Chart.ChartData>((resolve, reject) => {
    // Your data fetching logic here...
    const data: Chart.ChartData = {
      labels: ['Jan', 'Feb'],
      datasets: [{ label: 'Dataset 1', data: [10, 20] }]
    };
    resolve(data);
  });
}

// 2. Use it in the component
<ChartControl
  type='bar'
  datapromise={this._loadAsyncData()}
  loadingtemplate={() => <div>Please wait...</div>}
  rejectedtemplate={(error: string) => <div>Error: {error}</div>}
/>

The level property determines the scope of the permission check. Depending on the level selected, different properties become required:

• currentWeb: Checks permissions on the current web. Requires context and permissions.
• currentList: Checks permissions in the current loaded list. Requires context and permissions.
• remoteWeb: Checks permissions on a specified site URL. Requires context, permissions, and remoteSiteUrl.
• remoteListOrLib: Checks permissions on a specific list/library URL within a site. Requires context, permissions, remoteSiteUrl, and relativeLibOrListUrl.
• remoteListItem: Checks permissions on a specific item. Requires context, permissions, remoteSiteUrl, relativeLibOrListUrl, and itemId.
• remoteFolder: Checks permissions on a specific folder. Requires context, permissions, remoteSiteUrl, relativeLibOrListUrl, and folderPath.