راهنمای گام به گام توسعه افزونه اکسل با استفاده از React.js

افزونه اکسل چیست؟

MS Excel Add-in نوعی برنامه یا ابزاری است که به شما امکان می دهد فرآیندهای اساسی را با سرعت بیشتری انجام دهید. این کار را با ادغام ویژگی های جدید در برنامه اکسل انجام می دهد که قابلیت های اساسی آن را در پلتفرم های مختلف مانند ویندوز، مک و وب افزایش می دهد.

افزونه اکسل، به عنوان بخشی از پلتفرم آفیس، به شما امکان می دهد فرآیندهای کسب و کار خود را تغییر داده و سرعت بخشید. افزونه های آفیس به دلیل استقرار متمرکز، سازگاری بین پلتفرم ها و توزیع AppSource معروف هستند. این برنامه توسعه دهندگان را قادر می سازد از فناوری های وب از جمله HTML، CSS و جاوا اسکریپت استفاده کنند.

مهمتر از آن، چارچوب و کتابخانه جاوا اسکریپت Office.js را برای ساخت افزونه های اکسل فراهم می کند. در این آموزش، فرآیند اصلی و در عین حال موثر ایجاد افزونه اکسل با استفاده از ReactJS را مرور خواهیم کرد.

پیش نیازهای راه اندازی محیط توسعه شما

قبل از شروع ایجاد افزونه های اکسل، مطمئن شوید که این پیش نیازها را روی رایانه شخصی خود نصب کرده اید.

• NPM
• Node.js
• ویژوال استودیو
• یک حساب مایکروسافت 365 با اشتراک

به دنبال بهترین شرکت توسعه افزودنی اکسل هستید؟ اکنون ما را وصل کنید

نحوه ساخت افزونه اکسل با استفاده از React

برای شروع، مولد Yeoman و Yeoman را برای توسعه افزونه Office 365 پیکربندی و نصب کنید.

npm install -g yo generator-office

اکنون دستور yo زیر را برای ایجاد یک افزونه اجرا کنید

yo office

پس از اجرای دستور بالا، نوع Project را به عنوان چارچوب React انتخاب کنید. به تصویر مرجع زیر دقت کنید.

پس از انتخاب پروژه، TypeScript را به عنوان نوع اسکریپت خود انتخاب کنید.

اکنون نام پروژه افزونه اکسل خود را مطابق شکل زیر نام گذاری کنید. شما می توانید هر نامی را که دوست دارید بگذارید، اما دادن یک نام مرتبط با پروژه یک حرکت ایده آل خواهد بود.

بیشتر بخوانید: React Element vs Component: شیرجه عمیق به تفاوت ها

از آنجا که ارائه پشتیبانی برای برنامه آفیس بسیار مهم است، Excel را به عنوان مشتری آفیس انتخاب کنید.

تبریک می گویم!! اولین افزونه اکسل شما با موفقیت ایجاد شد.

چگونه افزونه اکسل را اجرا کنیم؟

افزونه ها به طور پیش فرض در اکسل فوراً در دسترس نیستند. قبل از استفاده از آنها باید آنها را فعال کنیم. بیایید نگاهی به نحوه استفاده از خط فرمان برای اجرای افزونه ها در MS Excel داشته باشیم.

از دستور زیر استفاده کنید و پوشه پروژه را در خط فرمان باز کنید.

cd Excel_Tutorial

اکنون سرور dev-server را مطابق شکل زیر راه اندازی کنید.

npm run dev-server

برای آزمایش Add-in در اکسل خود، دستور زیر را در پوشه اصلی پروژه اجرا کنید.

npm start

هنگامی که اجرای این دستور را کامل کردید، باید یک پنجره وظیفه به اکسل اضافه شود که مانند یک Excel Add in عمل می کند.

چگونه با استفاده از ReactJS یک جدول ایجاد کنیم؟

کسب‌وکارها معمولاً از جداول برای ارائه داده‌های تجاری خود استفاده می‌کنند، اعم از قیمت، مقایسه، مقایسه مالی و غیره. React.js مدیریت حجم زیادی از داده‌ها را برای سازمان‌ها ساده و سریع می‌کند. بیایید روند ایجاد جدول با استفاده از React.js را درک کنیم.

برای شروع،

آیا قصد دارید توسعه دهندگان اختصاصی ReactJS را استخدام کنید؟ اکنون با ما تماس بگیرید.

1. پروژه را با کد VS باز کنید
2. فایلی را که در src\taskpane\components\app.tsx قرار دارد باز کنید
3. متد componentDidMount() و متد click() را از app.tsx حذف کنید
4. تمام تگ هایی را که داخل متد بازگشتی هستند حذف کنید و یک دکمه در روش بازگشت اضافه کنید تا جدول ایجاد شود

5. App.tsx

import * as React from "react";
import Progress from "./Progress";

export interface AppProps {
  title: string;
  isOfficeInitialized: boolean;
}

export default class App extends React.Component<appprops> {
  constructor(props, context) {
    super(props, context);
    this.state = {
      listItems: [],
    };
  }

  render() {
    const { title, isOfficeInitialized } = this.props;

    if (!isOfficeInitialized) {
      return (

      );
    }

    return (
        <>
         <button>Generate Table</button>

    );
  }
}

</appprops> 

یک تابع کنترل کننده رویداد برای دکمه ایجاد کنید که حاوی منطق ایجاد یک جدول جدید باشد.

<appprops><button onclick="{this.handleCreateTable}">Generate Table</button>

</appprops>

منطق تجاری Excel.js به تابع handleCreateTable که به متد Excel.run ارسال می شود، اضافه می شود.
متد context.sync تمام دستورات معلق را که در صف هستند برای اجرا به اکسل می فرستد.

متد Excel.run توسط بلوک catch دنبال می شود.

handleCreateTable = async () => {
    await Excel.run(async (context) => {

      // logic for create table

      await context.sync();
    }).catch((err) => {
        console.log("Error: " + err);
      });
  }

در روش Excel.run ابتدا باید کاربرگ فعلی را بدست آوریم و برای این کار از روش زیر استفاده کنید.

const currentWorksheet = context.workbook.worksheets.getActiveWorksheet();

هنگامی که کاربرگ را دریافت کردیم، یک جدول ایجاد می کنیم. برای ایجاد جدول از روش زیر استفاده کنید.

const salaryTable = currentWorksheet.tables.add("A1:D1", true);

جدول با استفاده از تابع add() در مجموعه جدول کاربرگ فعلی ایجاد می شود. این روش اولین پارامتر را به عنوان محدوده ای از ردیف بالای جدول می پذیرد.

ما همچنین می توانیم به جدول خود نامی مانند شکل زیر بدهیم.

  salaryTable.name = "SalaryTable";

اکنون با استفاده از کد زیر یک ردیف سرصفحه اضافه کنید.

 salaryTable.getHeaderRowRange().values = 
[["Name", "Occupation", "Age","Salary"]];

سپس ردیف‌های جدول با استفاده از تابع add() مجموعه ردیف‌های جدول درج می‌شوند. ممکن است با ارسال آرایه ای از مقادیر سلول در آرایه والد، چندین ردیف را در یک درخواست اضافه کنیم.

 salaryTable.rows.add(null /*add at the end*/, [
  ["Poojan", "Software Developer","39", "50,000"],
        ["Meera", "Fashion Designer","23", "30,000"],
        ["Smit", "Teacher", "25","35,000"],
        ["Kashyap", "Scientist", "29","70,000"],
        ["Neha", "Teacher","34", "15,000"],
        ["Jay", "DevOps Developer","31", "65,000"]
      ]);

می توانیم قالب حقوق را به اعشار تغییر دهیم. برای این کار، باید ایندکس مبتنی بر ستون صفر را به متد getItemAt() منتقل کنیم.

salaryTable.columns.getItemAt(3).getRange().numberFormat = [['##0.00']];

وقتی از جدول برای نمایش داده های کسب و کار استفاده می کنیم، مهم است که مطمئن شویم محتوا به وضوح نمایش داده می شود. با استفاده خوب از متدهای autofitColumns() و autofitRows()، می‌توانیم محتوا را کاملاً در سلول‌ها قرار دهیم.

salaryTable.getRange().format.autofitColumns();
salaryTable.getRange().format.autofitRows();

بیشتر بخوانید: Flutter در مقابل React Native: بهترین ها را برای برنامه خود در سال 2022 انتخاب کنید

بیایید نگاهی بیندازیم که کل تابع چگونه به نظر می رسد.

handleCreateTable = async () => {
    await Excel.run(async (context) => {

      const currentWorksheet=context.workbook.worksheets.getActiveWorksheet();
      const salaryTable = currentWorksheet.tables.add("A1:D1", true );
      salaryTable.name = "SalaryTable";

      salaryTable.getHeaderRowRange().values =
        [["Name", "Occupation", "Age", "Salary"]];

      salaryTable.rows.add(null /*add at the end*/, [
        ["Poojan", "Software Developer", "39", "50,000"],
        ["Meera", "Fashion Designer", "23", "30,000"],
        ["Smit", "Teacher", "25", "35,000"],
        ["Kashyap", "Scientist", "29", "70,000"],
        ["Neha", "Teacher", "34", "15,000"],
        ["Jay", "DevOps Developer", "31", "65,000"]
      ]);

      salaryTable.columns.getItemAt(3).getRange().numberFormat = [['##0.00']];
      salaryTable.getRange().format.autofitColumns();
      salaryTable.getRange().format.autofitRows();

      await context.sync();

    }).catch((err) => {
      console.log("Error: " + err);
    });
  }

حالا از دستور npm start برای اجرای کد استفاده کنید. این تمام چیزی است که در آن وجود دارد. اکنون، زمانی که کاربر دکمه تولید جدول را می‌زند، نتیجه زیر را مشاهده می‌کند.

خروجی:

چگونه داده ها را در جدول فیلتر کنیم؟

فیلتر کردن داده ها بسیار مهم است زیرا سازمان ها از آن برای حذف نتایج نامطلوب برای تجزیه و تحلیل استفاده می کنند. بیایید ببینیم چگونه ممکن است داده های یک جدول برای تجزیه و تحلیل بهتر فیلتر شوند.

<button>Filter Data</button>

<button onclick="{this.filterData}">Filter Data</button>

1. فایلی را که در src\taskpane\components\app.tsx قرار دارد باز کنید
2. یک دکمه جدید برای داده های فیلتر در زیر دکمه Generate Table اضافه کنید.
3. یک تابع کنترل کننده رویداد برای دکمه ای ایجاد کنید که حاوی منطق داده فیلتر است.
   4. تابع filterData:

filterData = async () => {
    await Excel.run(async (context) => {
      await context.sync();
    }).catch((err) => {
      console.log("Error: " + err);
    });
  }

سپس کاربرگ و جدول فعلی را دریافت خواهیم کرد.

const currentWorksheet = context.workbook.worksheets.getActiveWorksheet();
const salaryTable = currentWorksheet.tables.getItem('salaryTable');

برای شروع فیلتر کردن داده ها، ابتدا باید به ستونی که از آن داده ها را فیلتر می کنیم دسترسی داشته باشیم.

const occupationFilter = salaryTable.columns.getItem('Occupation').filter;

در اینجا، Occupation نام ستونی است که می خواهیم فیلتر را روی آن اعمال کنیم.

در مرحله بعد، مقادیر را به عنوان یک جستجوی فیلتر ارسال کنید.

occupationFilter.applyValuesFilter(['Software Developer', 'Teacher']);

در همین حال، نگاهی به نحوه ظاهر کل تابع بیندازید.

filterData = async () => {
    await Excel.run(async (context) => {

      const currentWorksheet=context.workbook.worksheets.getActiveWorksheet();
      const salaryTable = currentWorksheet.tables.getItem('salaryTable');
      const occupationFilter=salaryTable.columns.getItem('Occupation').filter;
      occupationFilter.applyValuesFilter(['Software Developer', 'Teacher']);

      await context.sync();
    }).catch((err) => {
      console.log("Error: " + err);
    });
  }

در نهایت کد را با استفاده از دستور npm start اجرا کنید. اکنون وقتی کاربر روی دکمه فیلتر داده کلیک می کند، نتیجه زیر را مشاهده می کند.

خروجی:

چگونه داده ها را در جدول مرتب کنیم؟

مرتب‌سازی داده‌ها نیز مهم است، زیرا به دستیابی به داده‌های سازمان‌یافته به شیوه‌ای متوالی کمک می‌کند. بیایید به روش های ساده بفهمیم که چگونه داده ها را می توان در یک جدول مرتب کرد.

برای شروع،

<button>Sort Data</button>

به دنبال بهترین راه حل های توسعه Microsoft 365 هستید؟ جستجوی شما در اینجا به پایان می رسد.

<button onclick="{this.sortData}">Sort Data</button>

1. پروژه را با کد VS باز کنید
2. فایل را از مسیر: src\taskpane\components\app.tsx باز کنید
3. یک دکمه جدید برای مرتب سازی داده ها در زیر دکمه داده فیلتر اضافه کنید.
4. یک تابع کنترل کننده رویداد برای دکمه ایجاد کنید که حاوی منطق مرتب سازی داده ها باشد.
   5. تابع sortData:

sortData=async()=>{
   await Excel.run(async (context) => {
    await context.sync();
    }).catch((err) => {
      console.log("Error: " + err);
    });
  }   

بیایید با گرفتن کاربرگ و جدول فعلی شروع کنیم.

const currentWorksheet = context.workbook.worksheets.getActiveWorksheet();
const salaryTable = currentWorksheet.tables.getItem('salaryTable');

در تابع، یک شی فیلد مرتب سازی می سازیم و دو پارامتر به آن ارائه می دهیم: کلید و نوع مرتب سازی (صعودی یا نزولی).

توجه داشته باشید:
ویژگی کلیدی، شاخص مبتنی بر صفر ستون است و برای مرتب سازی استفاده می شود. تمام ردیف های داده بر اساس کلید مرتب شده اند.

const sortFields = [
        {
          key: 3,
          ascending: false,
        }
      ];

در ادامه از متد sort and application روی جدول استفاده می کنیم و شی sortFields را پاس می کنیم.

salaryTable.sort.apply(sortFields);

بیشتر بخوانید: تجزیه و تحلیل مقایسه ای Blazor، Angular، React، Vue و Node برای توسعه وب

در اینجا کل تابع ممکن است به نظر برسد. <<>

sortData = async () => {
    await Excel.run(async (context) => {

      const currentWorksheet=context.workbook.worksheets.getActiveWorksheet();
      const salaryTable = currentWorksheet.tables.getItem('salaryTable');

      const sortFields = [
        {
          key: 3,
          ascending: false,
        }
      ];

      salaryTable.sort.apply(sortFields);

      await context.sync();
    }).catch((err) => {
      console.log("Error: " + err);
    });
  }

کد را با استفاده از دستور npm start اجرا کنید
در نهایت کد را با دستور npm start اجرا کنید. کاربر با هر بار کلیک بر روی دکمه مرتب سازی داده ها، نتیجه زیر را مشاهده خواهد کرد.

خروجی

نتیجه

افزونه‌های آفیس با عملیات و فرآیندهای سریع‌تر برای کسب‌وکارها مفید هستند. در افزونه‌های آفیس، می‌توانید از فناوری‌های آشنا مانند HTML، CSS و جاوا اسکریپت برای ایجاد افزونه‌های Outlook، Excel، Word و PowerPoint استفاده کنید. در این وبلاگ نحوه ایجاد یک افزونه اکسل با کتابخانه React را از ابتدا و نحوه ایجاد جداول، فیلتر و مرتب سازی داده ها در اکسل با استفاده از افزونه اکسل را یاد گرفتیم.