بررسی اجمالی
بخش های وب مشتری SharePoint Framework برای توسعه سناریوهای تجاری هدف گذاری شده اند. کامپوننت Office 365 UI Fabric یکپارچه سازی یکپارچه با Office 365 ارائه می دهد و طیف گسترده ای از اجزای رابط کاربری را ارائه می دهد. با این حال، هنوز نوع کنترل نمودار سازمانی را ارائه نمی دهد. در این سناریوها، میتوانیم از بستههای npm منبع باز استفاده کنیم.
در این مقاله، کنترل چارت سازمانی را بررسی خواهیم کرد. ما از React JS برای توسعه مثال استفاده خواهیم کرد.
راه حل SPFx ایجاد کنید
خط فرمان را باز کنید. یک دایرکتوری برای راه حل SPFx ایجاد کنید.
- md spfx-react-orgchart
به دایرکتوری ایجاد شده در بالا بروید.
- cd spfx-react-orgchart
برای ایجاد راه حل، Yeoman SharePoint Generator را اجرا کنید.
- yo @microsoft/sharepoint
ژنراتور Yeoman با پرسیدن سوالاتی در مورد راه حلی که باید ایجاد شود، جادوگر را به شما معرفی می کند.
![](http://pezhvak24.ir/dl/10kcor/cscd/article/sharepoint-framework-react-based-orgchart-from-sharepoint-list/Images/01.png)
نام راه حل: برای داشتن نام پیش فرض (در این مورد spfx-react-orgchart) Enter را بزنید یا هر نام دیگری را برای راه حل خود تایپ کنید.
انتخاب انتخاب شده: Enter را بزنید
هدف برای کامپوننت: در اینجا، ما میتوانیم محیط هدفی را که در آن قصد استقرار بخش وب کلاینت را داریم، انتخاب کنیم، یعنی SharePoint Online یا SharePoint OnPremise (SharePoint 2016 به بعد).
انتخاب انتخاب شده: فقط شیرپوینت آنلاین (جدیدترین)
محل فایل ها: ممکن است انتخاب کنیم از همان پوشه استفاده کنیم یا یک زیرپوشه برای راه حل خود ایجاد کنیم.
انتخاب انتخاب شده: همان پوشه
گزینه Deployment: با انتخاب Y به برنامه اجازه می دهد تا فوراً در همه سایت ها مستقر شود و در همه جا قابل دسترسی خواهد بود.
انتخاب انتخاب شده: N (در هر سایت به طور صریح نصب کنید)
نوع کامپوننت سمت کلاینت برای ایجاد: ما می توانیم انتخاب کنیم که یک بخش وب سمت کلاینت یا یک برنامه افزودنی ایجاد کنیم. گزینه webpart را انتخاب کنید.
انتخاب انتخاب شده: WebPart
نام بخش وب: برای انتخاب نام پیش فرض یا تایپ هر نام دیگری، Enter را فشار دهید.
انتخاب انتخاب شده: OrgChartViewer