Hướng Dẫn Lấy URL SharePoint Sử Dụng sp-pnp-js Trong SPFx [Chuẩn SEO]

Bạn đang gặp khó khăn trong việc lấy URL SharePoint khi phát triển các ứng dụng SPFx? Bài viết này sẽ cung cấp cho bạn một hướng dẫn chi tiết về cách sử dụng thư viện sp-pnp-js để lấy URL SharePoint một cách hiệu quả. Chúng tôi sẽ đi sâu vào các phương pháp, cung cấp ví dụ cụ thể và giải quyết các vấn đề thường gặp để giúp bạn nắm vững kiến thức này.

Vấn Đề Thường Gặp Khi Lấy URL SharePoint Trong SPFx

Khi phát triển các ứng dụng SharePoint Framework (SPFx), việc lấy URL SharePoint là một yêu cầu phổ biến. Tuy nhiên, việc sử dụng các thư viện và phương pháp khác nhau có thể gây ra một số khó khăn, đặc biệt là khi bạn đang sử dụng thư viện sp-pnp-js cũ. Các vấn đề thường gặp bao gồm:

• Không tương thích với các ví dụ trực tuyến sử dụng thư viện pnpJS mới hơn.
• Lỗi "context is deprecated" khi sử dụng this.context.pageContext.web.absoluteUrl.
• Khó khăn trong việc chuyển đối tượng context vào component.

Giải Pháp: Sử Dụng this.context.pageContext.web.absoluteUrl Với sp-pnp-js

Mặc dù có một số thách thức, bạn vẫn có thể sử dụng this.context.pageContext.web.absoluteUrl với thư viện sp-pnp-js cũ. Dưới đây là cách thực hiện:

1. Import thư viện cần thiết: Đảm bảo bạn đã import sp và Web từ sp-pnp-js.

            
                import { sp, Web } from 'sp-pnp-js';
            
        

2. Khởi tạo đối tượng Web: Sử dụng this.context.pageContext.web.absoluteUrl để khởi tạo một đối tượng Web mới.

            
                const web = new Web(this.context.pageContext.web.absoluteUrl);
            
        

3. Sử dụng đối tượng Web để thực hiện các thao tác: Bây giờ bạn có thể sử dụng đối tượng web để thực hiện các thao tác như lấy danh sách, mục, v.v.

            
                web.lists.getByTitle('Tên danh sách').items.getById(123).get();
            
        

Xử Lý Lỗi "context is deprecated"

Nếu bạn gặp lỗi "context is deprecated", điều này có thể do bạn đang sử dụng interface IWebPartContext cũ. Hãy thay thế nó bằng interface WebPartContext mới hơn. Ngoài ra, đảm bảo bạn đang chuyển đối tượng context một cách chính xác vào component của mình. Ví dụ:

        
            const element: React.ReactElement = React.createElement(Form, { context: this.context });
        
    

Interface props của web part của bạn nên trông giống như sau:

        
            export interface IFormWebPartProps { description: string; listName: string; context: WebPartContext; }
        
    

Ví Dụ Thực Tế: Lấy URL Trang Web Tuyệt Đối

Dưới đây là một ví dụ thực tế về cách lấy URL trang web tuyệt đối bằng cách sử dụng sp-pnp-js trong một SPFx web part:

        
            import { sp, Web } from 'sp-pnp-js';
            import { WebPartContext } from '@microsoft/sp-webpart-base';

            export interface IMyWebPartProps {
                context: WebPartContext;
            }

            export class MyWebPart extends React.Component {
                public render(): React.ReactElement {
                    const webUrl = this.props.context.pageContext.web.absoluteUrl;

                    return (
                        <div>
                            <p>URL Trang Web: {webUrl}</p>
                        </div>
                    );
                }
            }
        
    

Sử Dụng @pnp/sp (PnPJS) Trong Các Web Part SharePoint Framework (SPFx)

Thư viện @pnp/sp, một phần của PnPJS, cung cấp một API linh hoạt để xây dựng các truy vấn REST một cách trực quan. Nó hỗ trợ batching và caching, giúp tối ưu hóa hiệu suất ứng dụng SPFx của bạn.

Cài Đặt và Thiết Lập @pnp/sp

Sau khi tạo dự án SPFx, bạn cần cài đặt gói @pnp/sp. Bạn cũng có thể sử dụng tiện ích mở rộng @pnp/logging (tùy chọn). Thực hiện các bước sau:

        
            npm install @pnp/logging @pnp/sp --save
        
    

Cập Nhật onInit Trong PnPjsExampleWebPart.ts

Thư viện @pnp/sp cần biết URL để gửi các yêu cầu REST. Trong SPFx, bạn cần sử dụng đối tượng context được cung cấp bởi framework.

        
            import { getSP } from './pnpjsConfig';

            public async onInit(): Promise<void> {
                this._environmentMessage = this._getEnvironmentMessage();
                await super.onInit();
                getSP(this.context);
            }
        
    

Tạo Tệp Cấu Hình Dự Án

Tạo một tệp cấu hình dự án cho PnPjs. Tệp này cho phép bạn thiết lập các imports cần thiết và khởi tạo một instance của đối tượng sp. Ví dụ:

        
            import { WebPartContext } from "@microsoft/sp-webpart-base";
            import { spfi, SPFI, SPFx } from "@pnp/sp";
            import { LogLevel, PnPLogging } from "@pnp/logging";
            import "@pnp/sp/webs";
            import "@pnp/sp/lists";
            import "@pnp/sp/items";
            import "@pnp/sp/batching";

            var _sp: SPFI | null = null;

            export const getSP = (context?: WebPartContext): SPFI => {
                if (context != null) {
                    _sp = spfi().using(SPFx(context)).using(PnPLogging(LogLevel.Warning));
                }
                return _sp!;
            };
        
    

Kết Luận

Việc lấy URL SharePoint trong SPFx bằng sp-pnp-js có thể đòi hỏi một số điều chỉnh. Tuy nhiên, bằng cách làm theo hướng dẫn này và giải quyết các vấn đề thường gặp, bạn có thể dễ dàng truy cập và quản lý tài nguyên SharePoint của mình một cách hiệu quả. Đừng quên tận dụng sức mạnh của @pnp/sp để tối ưu hóa hiệu suất ứng dụng của bạn và xây dựng các giải pháp mạnh mẽ hơn.