در پستهای قبلیام، با استفاده از کامپوننت PnP-JS-Core، مقدمهای برای کتابخانه PnP JS Core و تکههای کد اصلی برای دسترسی به اشیاء شیرپوینت ارائه کرده بودم، که مرجع آن در زیر آمده است:
- مقدمه ای بر PnP-JS-Core
- عملیات اصلی وب شیرپوینت با استفاده از PnP-JS-Core
- فیلتر کردن مجموعه اشیاء شیرپوینت با استفاده از PnP-JS-Core
جزئیات ذکر شده در پیوندهای داده شده در بالا، ایده اولیه ای در مورد کتابخانه PnP-JS-Core و نحوه استفاده از کتابخانه در دسترسی به شیرپوینت ارائه می دهد.
قبلاً از کتابخانه PnP-JS-Core برای ادغام با Angular JS برای نشان دادن سایتهای فرعی موجود از سایت مادر استفاده میکردم. در این مقاله، من قصد دارم با استفاده از چارچوب React JS،
همین نتیجه را شبیه سازی کنم تا سایت های فرعی را با جزئیات اولیه در قالب جدول نمایش دهیم. فایل های مورد نیاز چیست؟
- React.js یک کتابخانه جاوا اسکریپت برای ساخت رابط کاربری.
- بسته React-dom.js React برای کار با DOM.
- Browser.js شما را قادر می سازد جاوا اسکریپت را با فرمت xml با in text/babel به جاوا اسکریپت کامپایل کنید.
- کتابخانه جاوا اسکریپت Pnp.js PnP.
- Fetch.js توسط فایل PnP js برای رسیدگی به درخواستها و پاسخهای وب استفاده میشود (الزامی برای IE).
- Promise.js توسط فایل PnP js برای رسیدگی به درخواست های وب و پاسخ ها استفاده می شود (الزامی برای IE).
توجه: فایلهای JS & Promise JS را که برای اجرای روشهای PnP در برخی از مرورگرها (IE) لازم است، واکشی کنید.
شامل فایلهای اسکریپت
من فایل اسکریپت مورد نیاز را در کتابخانه داراییهای سایت آپلود کردهام و خطوط ارائه شده در زیر را به فایل HTML نمونه خود اضافه کردهام.
- <script type="text/javascript" src="/siteassets/scripts/pnp.min.js"></script>
- <script type="text/javascript" src="/siteassets/scripts/fetch.js"></script>
- <script type="text/javascript" src="/siteassets/scripts/promise.min.js"></script>
- <script type="text/javascript" src="/siteassets/scripts/react.js"></script>
- <script type="text/javascript" src="/siteassets/scripts/react-dom.js"></script>
- <script type="text/javascript" src="/siteassets/scripts/browser.min.js"></script>
شامل HTML
استایل های css داده شده در زیر را به نمونه فایل HTML اضافه کنید. Id with tableContainer با جدول sub sites جایگزین شده است.
- <!-- To style table in html -->
- <style type="text/css">
- .web-table th{ background-color:#ddd; border:2px solid #fff;}
- .web-table td{ background-color:#eee; border:2px solid #fff;}
- .web-heading{ padding:2px;}
- </style>
- <div id='tableContainer'></div>
- <script type=’text/babel’>
- <!- - Insert React JSX Code - -></script>
شامل React JSX
برای ایجاد جدولی با جزئیات سایت فرعی در ردیفها، باید یک عنصر React جداگانه برای هر جزء ایجاد کنیم:
- ردیف
- جدول
- ظرف
- رندر
توجه: شامل فایل browser.js برای کامپایل خطوط react jsx به جاوا اسکریپت استفاده می شود
جزء ردیف در React JSX
- //Create Row component
- var ResultItem = React.createClass({
- render: function(){
- return (
- <tr>
- <td>{this.props.webTitle} </td>
- <td>{this.props.webId} </td>
- <td>{this.props.webCreated.toLocaleString()}</td>
- <td>{this.props.webTemplate}</td>
- </tr>
- );
- }
- });
در جدول برای هر ردیف، <ResultItem> را با ویژگی های ویژگی در جزء جدول اضافه کنید. از روش رندر برای نمایش عنوان وب، شناسه، تاریخ ایجاد و شناسه الگو به عنوان خروجی استفاده می شود.
جزء جدول در React JSX
- //Create Table component - Within a table component, we have declared the headings for the table
- var Results = React.createClass({
- render: function() {
- var resultItems = this.props.pnpResponse.map(function(result) {
- return <ResultItem webId = {
- result.Id
- }
- webTitle = {
- result.Title
- }
- webTemplate = {
- result.WebTemplate
- }
- webCreated = {
- new Date(result.Created)
- }
- />
- });
- return ( < table width = "100%"
- cellPadding = "10"
- cellSpacing = "2"
- className = "web-table" > < thead > < tr > < th > Title < /th> < th > Id < /th> < th > Created < /th> < th > Web Template < /th> < /tr> < /thead> < tbody > {
- resultItems
- } < /tbody> < /table>);
- }
- });
در جزء جدول یک عنصر <Result> جدول را با سرصفحه و بدنه برمی گرداند. از {resultItems} برای رندر عنصر <ResultItem> استفاده میشود که هر ردیف را بر اساس ویژگی اولیه ارائه میکند.