{"id":74614,"date":"2024-08-24T19:15:51","date_gmt":"2024-08-24T15:45:51","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/how-to-build-pcf-dataset-control-using-react-4e6m\/"},"modified":"2024-08-24T19:15:51","modified_gmt":"2024-08-24T15:45:51","slug":"how-to-build-pcf-dataset-control-using-react-4e6m","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/how-to-build-pcf-dataset-control-using-react-4e6m\/","title":{"rendered":"\u0646\u062d\u0648\u0647 \u0633\u0627\u062e\u062a \u06a9\u0646\u062a\u0631\u0644 \u0645\u062c\u0645\u0648\u0639\u0647 \u062f\u0627\u062f\u0647 PCF \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 REACT"},"content":{"rendered":"

Summarize this content to 400 words in Persian Lang
\n \u062f\u0631 \u0627\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634\u060c \u0634\u0645\u0627 \u06cc\u06a9 \u06a9\u0646\u062a\u0631\u0644 \u062f\u0627\u062f\u0647 \u062a\u0639\u0627\u0645\u0644\u06cc PCF \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 React \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc\u200c\u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u062f \u062f\u0631 \u0634\u0628\u06a9\u0647 \u0645\u0648\u062c\u0648\u062f\u06cc\u062a Dynamics CRM \u0627\u062f\u063a\u0627\u0645 \u0634\u0648\u062f.<\/p>\n

\u062a\u06a9\u0646\u06cc\u06a9 \u0647\u0627\u06cc\u06cc \u06a9\u0647 \u062f\u0631 \u0627\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634 \u062e\u0648\u0627\u0647\u06cc\u062f \u0622\u0645\u0648\u062e\u062a \u0628\u0647 \u0634\u0645\u0627 \u062f\u0631\u06a9 \u0639\u0645\u06cc\u0642 \u062a\u0631\u06cc \u0627\u0632 \u06a9\u0646\u062a\u0631\u0644 \u0647\u0627\u06cc PCF \u062f\u0631 Dynamics CRM \u0645\u06cc \u062f\u0647\u062f. \u062f\u0631 \u0633\u0631\u0627\u0633\u0631 \u0627\u06cc\u0646 \u0631\u0627\u0647\u0646\u0645\u0627\u060c \u0645\u0627 \u0647\u0645\u0647 \u0686\u06cc\u0632 \u0631\u0627 \u0627\u0632 \u0631\u0627\u0647\u200c\u0627\u0646\u062f\u0627\u0632\u06cc \u0645\u062d\u06cc\u0637 \u062a\u0648\u0633\u0639\u0647 \u062a\u0627 \u0627\u0633\u062a\u0642\u0631\u0627\u0631 \u0648 \u0622\u0632\u0645\u0627\u06cc\u0634 \u06a9\u0646\u062a\u0631\u0644 \u0633\u0641\u0627\u0631\u0634\u06cc \u0634\u0645\u0627 \u067e\u0648\u0634\u0634 \u062e\u0648\u0627\u0647\u06cc\u0645 \u062f\u0627\u062f.<\/p>\n

\u0686\u06cc \u0645\u06cc\u0633\u0627\u0632\u06cc\u061f<\/p>\n

\u062f\u0631 \u0627\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634\u060c \u06a9\u0646\u062a\u0631\u0644\u06cc \u062e\u0648\u0627\u0647\u06cc\u062f \u0633\u0627\u062e\u062a \u06a9\u0647 \u0641\u0627\u06cc\u0644 \u0627\u06a9\u0633\u0644 \u067e\u06cc\u0648\u0633\u062a \u0634\u062f\u0647 \u0628\u0647 \u06cc\u0627\u062f\u062f\u0627\u0634\u062a\u200c\u0647\u0627\u06cc \u062f\u0631\u0648\u0646 CRM \u0631\u0627 \u0646\u0645\u0627\u06cc\u0634 \u0645\u06cc\u200c\u062f\u0647\u062f \u0648 \u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0631\u0648\u0634\u06cc \u0628\u0635\u0631\u06cc\u200c\u062a\u0631 \u0648 \u0633\u0627\u0632\u0645\u0627\u0646\u200c\u062f\u0647\u06cc\u200c\u0634\u062f\u0647\u200c\u062a\u0631 \u0628\u0631\u0627\u06cc \u062f\u0633\u062a\u0631\u0633\u06cc \u0628\u0647 \u067e\u06cc\u0648\u0633\u062a\u200c\u0647\u0627\u06cc \u0627\u06a9\u0633\u0644 \u0645\u0631\u062a\u0628\u0637 \u0628\u0627 \u0631\u06a9\u0648\u0631\u062f\u0647\u0627\u06cc \u06cc\u0627\u062f\u062f\u0627\u0634\u062a \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc\u200c\u062f\u0647\u062f.<\/p>\n

\u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0628\u06cc\u0646\u06cc\u062f \u06a9\u0647 \u0648\u0642\u062a\u06cc \u06a9\u0627\u0631\u062a\u0627\u0646 \u062a\u0645\u0627\u0645 \u0634\u062f \u0686\u06af\u0648\u0646\u0647 \u0628\u0647 \u0646\u0638\u0631 \u0645\u06cc\u200c\u0631\u0633\u062f:<\/p>\n

\u062f\u0631 \u0628\u0631\u06af\u0647 Timeline\u060c \u0633\u0647 \u06cc\u0627\u062f\u062f\u0627\u0634\u062a \u0645\u0631\u062a\u0628\u0637 \u0628\u0627 \u062d\u0633\u0627\u0628 \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f \u06a9\u0647 \u0647\u0631 \u06a9\u062f\u0627\u0645 \u06cc\u06a9 \u0641\u0627\u06cc\u0644 \u0627\u06a9\u0633\u0644 \u067e\u06cc\u0648\u0633\u062a \u0634\u062f\u0647 \u0627\u0633\u062a.<\/p>\n

\u062f\u0631 \u062a\u0628 Notes\u060c \u06a9\u0646\u062a\u0631\u0644 \u0633\u0641\u0627\u0631\u0634\u06cc \u0645\u0627 \u0627\u0636\u0627\u0641\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a \u06a9\u0647 \u0627\u06cc\u0646 \u0641\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc \u0627\u06a9\u0633\u0644 \u0631\u0627 \u0627\u0633\u062a\u062e\u0631\u0627\u062c \u06a9\u0631\u062f\u0647 \u0648 \u062f\u0631 \u0645\u0646\u0648\u06cc \u0627\u0646\u062a\u062e\u0627\u0628 \u0641\u0627\u06cc\u0644 \u0641\u0647\u0631\u0633\u062a \u0645\u06cc\u200c\u06a9\u0646\u062f \u0648 \u0628\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u0641\u0627\u06cc\u0644\u060c \u0628\u0631\u06af\u0647\u200c\u0647\u0627\u06cc \u0622\u0646 \u0641\u0627\u06cc\u0644 \u0627\u06a9\u0633\u0644 \u062f\u0631 \u0645\u0646\u0648\u06cc \u0627\u0646\u062a\u062e\u0627\u0628 \u0628\u0631\u06af\u0647 \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f.<\/p>\n

\u0648\u0642\u062a\u06cc \u06a9\u0627\u0631\u0628\u0631 \u0628\u0631\u06af\u0647\u200c\u0627\u06cc \u0631\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u0645\u06cc\u200c\u06a9\u0646\u062f\u060c \u062f\u0627\u062f\u0647\u200c\u0647\u0627\u06cc \u0622\u0646 \u0645\u0637\u0627\u0628\u0642 \u0634\u06a9\u0644 \u0628\u0627\u0644\u0627 \u062f\u0631 \u0634\u0628\u06a9\u0647 \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f\u060c \u0648 \u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u0645\u062a\u0648\u062c\u0647 \u0634\u062f\u06cc\u062f \u0645\u0627 \u06cc\u06a9 \u0642\u0627\u0628\u0644\u06cc\u062a \u062f\u0627\u0646\u0644\u0648\u062f \u0633\u0641\u0627\u0631\u0634\u06cc \u0646\u06cc\u0632 \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u0641\u0627\u06cc\u0644 \u0627\u0646\u062a\u062e\u0627\u0628\u06cc \u0631\u0627 \u062f\u0631 \u0633\u06cc\u0633\u062a\u0645 \u0645\u0627 \u062f\u0627\u0646\u0644\u0648\u062f \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/p>\n

\u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u0628\u0631\u0627\u06cc \u0622\u0645\u0648\u0632\u0634<\/p>\n

\u0642\u0628\u0644 \u0627\u0632 \u0634\u0631\u0648\u0639 \u0633\u0627\u062e\u062a\u0646 \u06a9\u0646\u062a\u0631\u0644\u200c\u0647\u0627\u06cc PCF \u0628\u0627 React\u060c \u0645\u0637\u0645\u0626\u0646 \u0634\u0648\u06cc\u062f \u06a9\u0647 \u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc \u0644\u0627\u0632\u0645 \u0631\u0627 \u0631\u0648\u06cc \u062f\u0633\u062a\u06af\u0627\u0647 \u062e\u0648\u062f \u0646\u0635\u0628 \u06a9\u0631\u062f\u0647\u200c\u0627\u06cc\u062f:<\/p>\n

Node.js: \u0646\u0633\u062e\u0647 LTS \u062a\u0648\u0635\u06cc\u0647 \u0645\u06cc \u0634\u0648\u062f
\n\u06a9\u062f \u0648\u06cc\u0698\u0648\u0627\u0644 \u0627\u0633\u062a\u0648\u062f\u06cc\u0648 (VS Code): \u0628\u0631\u0627\u06cc \u062a\u062c\u0631\u0628\u0647 \u0628\u0647\u062a\u0631 \u06a9\u062f\u0646\u0648\u06cc\u0633\u06cc \u062a\u0648\u0635\u06cc\u0647 \u0645\u06cc \u0634\u0648\u062f \u0627\u0632 \u0648\u06cc\u0631\u0627\u06cc\u0634\u06af\u0631\u06cc \u0645\u0627\u0646\u0646\u062f Visual Studio Code \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.
\nMicrosoft Power Platform CLI: \u0628\u0631\u0627\u06cc \u0646\u0635\u0628 Power Platform CLI \u0627\u0632 \u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc Power Platform \u0628\u0631\u0627\u06cc VS Code \u06cc\u0627 Power Platform CLI \u0628\u0631\u0627\u06cc \u0648\u06cc\u0646\u062f\u0648\u0632 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n

\u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 \u062c\u062f\u06cc\u062f<\/p>\n

\u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u0645\u062d\u06cc\u0637 \u0634\u0645\u0627 \u0622\u0645\u0627\u062f\u0647 \u0634\u062f\u060c \u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 \u06a9\u0646\u062a\u0631\u0644 \u0645\u062c\u0645\u0648\u0639\u0647 \u062f\u0627\u062f\u0647 PCF \u062c\u062f\u06cc\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f.<\/p>\n

\u06a9\u062f \u0648\u06cc\u0698\u0648\u0627\u0644 \u0627\u0633\u062a\u0648\u062f\u06cc\u0648 \u0631\u0627 \u0628\u0627\u0632 \u06a9\u0646\u06cc\u062f \u0648 \u0627\u0632 \u062a\u0631\u0645\u06cc\u0646\u0627\u0644 \u0628\u0647 \u067e\u0648\u0634\u0647 \u0627\u06cc \u06a9\u0647 \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u062f \u067e\u0631\u0648\u0698\u0647 \u06a9\u0646\u062a\u0631\u0644 PCF \u0631\u0627 \u062f\u0631 \u0622\u0646 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f \u0628\u0631\u0648\u06cc\u062f.
\n\u062f\u0633\u062a\u0648\u0631 \u0632\u06cc\u0631 \u0631\u0627 \u0627\u0632 \u062a\u0631\u0645\u06cc\u0646\u0627\u0644 \u062e\u0648\u062f \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 \u06a9\u0646\u062a\u0631\u0644 PCF \u062c\u062f\u06cc\u062f \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f:<\/p>\n

pac pcf init –namespace SampleNamespace –name ReactDatasetControl –template dataset –framework react –run-npm-install<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

–namespace \u0641\u0636\u0627\u06cc \u0646\u0627\u0645 \u0631\u0627 \u0628\u0631\u0627\u06cc \u06a9\u0646\u062a\u0631\u0644 \u0634\u0645\u0627 \u0645\u0634\u062e\u0635 \u0645\u06cc \u06a9\u0646\u062f.
\n–name \u0646\u0627\u0645 \u06a9\u0646\u062a\u0631\u0644 \u0634\u0645\u0627 \u0631\u0627 \u0645\u0634\u062e\u0635 \u0645\u06cc \u06a9\u0646\u062f.
\n–template \u0646\u0648\u0639 \u06a9\u0646\u062a\u0631\u0644 \u0631\u0627 \u0645\u0634\u062e\u0635 \u0645\u06cc \u06a9\u0646\u062f (\u0645\u062b\u0644\u0627\u064b \u0641\u06cc\u0644\u062f \u06cc\u0627 \u0645\u062c\u0645\u0648\u0639\u0647 \u062f\u0627\u062f\u0647)
\n–framework (\u0627\u062e\u062a\u06cc\u0627\u0631\u06cc) \u0686\u0627\u0631\u0686\u0648\u0628 \u06a9\u0646\u062a\u0631\u0644 \u0631\u0627 \u0645\u0634\u062e\u0635 \u0645\u06cc \u06a9\u0646\u062f.
\n–run-npm-install \u0645\u0627\u0698\u0648\u0644 \u0647\u0627\u06cc \u06af\u0631\u0647 \u0645\u0648\u0631\u062f \u0646\u06cc\u0627\u0632 \u0631\u0627 \u0628\u0631\u0627\u06cc \u06a9\u0646\u062a\u0631\u0644 \u0646\u0635\u0628 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n

\u0627\u062c\u0631\u0627\u06cc \u0645\u0648\u0627\u0631\u062f \u0628\u0627\u0644\u0627 pac pcf init \u0641\u0631\u0645\u0627\u0646 \u06cc\u06a9 \u06a9\u0646\u062a\u0631\u0644 PCF \u0627\u0648\u0644\u06cc\u0647 \u0631\u0627 \u0628\u0627 \u062a\u0645\u0627\u0645 \u0641\u0627\u06cc\u0644\u200c\u0647\u0627 \u0648 \u0648\u0627\u0628\u0633\u062a\u06af\u06cc\u200c\u0647\u0627\u06cc \u0645\u0648\u0631\u062f \u0646\u06cc\u0627\u0632 \u062a\u0646\u0638\u06cc\u0645 \u0645\u06cc\u200c\u06a9\u0646\u062f \u0648 \u0622\u0646 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0633\u0641\u0627\u0631\u0634\u06cc\u200c\u0633\u0627\u0632\u06cc \u0648 \u0627\u0633\u062a\u0642\u0631\u0627\u0631 \u062f\u0631 PowerApps \u0622\u0645\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/p>\n

\u062f\u0631 \u0627\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634 \u0645\u0627 \u0627\u0632 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 XLSX \u0628\u0631\u0627\u06cc \u06a9\u0627\u0631 \u0628\u0627 \u0641\u0627\u06cc\u0644 \u0647\u0627\u06cc \u0627\u06a9\u0633\u0644 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645. \u0622\u0646\u0647\u0627 \u0631\u0627 \u062f\u0631 \u067e\u0631\u0648\u0698\u0647 \u062e\u0648\u062f \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632<\/p>\n

npm install xlsx
\nnpm install –save-dev ajv<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0646\u0645\u0627\u06cc \u06a9\u0644\u06cc<\/p>\n

\u0627\u06a9\u0646\u0648\u0646 \u06a9\u0647 \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u0634\u062f\u0647 \u0627\u06cc\u062f\u060c \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0645\u0631\u0648\u0631\u06cc \u0628\u0631 PCF Dataset Control \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u0645!<\/p>\n

\u0628\u0631\u0631\u0633\u06cc \u06a9\u062f \u0634\u0631\u0648\u0639<\/p>\n

\u062f\u0631 \u06a9\u0627\u0648\u0634\u06af\u0631 \u0633\u0647 \u0628\u062e\u0634 \u0627\u0635\u0644\u06cc \u0631\u0627 \u0645\u0634\u0627\u0647\u062f\u0647 \u062e\u0648\u0627\u0647\u06cc\u062f \u06a9\u0631\u062f:<\/p>\n

node_modules \u0634\u0627\u0645\u0644 \u062a\u0645\u0627\u0645 \u0628\u0633\u062a\u0647 \u0647\u0627\u06cc \u06af\u0631\u0647 \u0645\u0648\u0631\u062f \u0646\u06cc\u0627\u0632 \u0628\u0631\u0627\u06cc \u067e\u0631\u0648\u0698\u0647 \u0627\u0633\u062a.
\nReactDatasetControl \u067e\u0648\u0634\u0647 \u067e\u0631\u0648\u0698\u0647 \u062d\u0627\u0648\u06cc \u0641\u0627\u06cc\u0644 \u0647\u0627\u06cc \u0627\u0635\u0644\u06cc \u0627\u0633\u062a.
\neslintrc.json \u060cpackage.json \u0641\u0627\u06cc\u0644 \u0647\u0627\u06cc \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u067e\u0631\u0648\u0698\u0647 \u0647\u0633\u062a\u0646\u062f.<\/p>\n

\u0628\u06cc\u0627\u06cc\u06cc\u062f \u0646\u06af\u0627\u0647\u06cc \u0628\u0647 \u0628\u0631\u062e\u06cc \u0627\u0632 \u0641\u0627\u06cc\u0644 \u0647\u0627\u06cc \u06a9\u0644\u06cc\u062f\u06cc \u0628\u06cc\u0646\u062f\u0627\u0632\u06cc\u0645.<\/p>\n

ControlManifest.Input.xml<\/p>\n

\u0627\u06cc\u0646\u062c\u0627 \u062c\u0627\u06cc\u06cc \u0627\u0633\u062a \u06a9\u0647 \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u0648 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u06a9\u0646\u062a\u0631\u0644 PCF \u062e\u0648\u062f \u0631\u0627 \u062a\u0639\u0631\u06cc\u0641 \u0645\u06cc \u06a9\u0646\u06cc\u062f. \u0627\u06cc\u0646 \u0634\u0627\u0645\u0644 \u0627\u0637\u0644\u0627\u0639\u0627\u062a\u06cc \u0645\u0627\u0646\u0646\u062f \u0646\u0627\u0645 \u06a9\u0646\u062a\u0631\u0644\u060c \u0646\u0633\u062e\u0647\u060c \u062a\u0648\u0636\u06cc\u062d\u0627\u062a \u0648 \u0627\u0646\u0648\u0627\u0639 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0645\u06cc \u067e\u0630\u06cc\u0631\u062f.<\/p>\n

index.ts<\/p>\n

\u0627\u06cc\u0646 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0646\u0642\u0637\u0647 \u0648\u0631\u0648\u062f \u0628\u0631\u0627\u06cc \u0645\u0646\u0637\u0642 \u062a\u062c\u0627\u0631\u06cc \u06a9\u0646\u062a\u0631\u0644 PCF \u0634\u0645\u0627 \u0639\u0645\u0644 \u0645\u06cc \u06a9\u0646\u062f. \u062c\u0627\u06cc\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0634\u0645\u0627 \u0631\u0641\u062a\u0627\u0631 \u0648 \u062a\u0639\u0627\u0645\u0644\u0627\u062a \u06a9\u0646\u062a\u0631\u0644 \u062e\u0648\u062f \u0631\u0627 \u062a\u0639\u0631\u06cc\u0641 \u0645\u06cc \u06a9\u0646\u06cc\u062f.<\/p>\n

\u0631\u0648\u0634 \u0647\u0627\u06cc \u0686\u0631\u062e\u0647 \u0632\u0646\u062f\u06af\u06cc:<\/p>\n

init: \u0627\u06cc\u0646 \u0645\u062a\u062f \u0632\u0645\u0627\u0646\u06cc \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0645\u06cc \u0634\u0648\u062f \u06a9\u0647 \u06a9\u0646\u062a\u0631\u0644 \u0645\u0642\u062f\u0627\u0631\u062f\u0647\u06cc \u0627\u0648\u0644\u06cc\u0647 \u0634\u0648\u062f. \u0628\u0631\u0627\u06cc \u0631\u0627\u0647\u200c\u0627\u0646\u062f\u0627\u0632\u06cc \u06a9\u0646\u062a\u0631\u0644\u060c \u0627\u0632 \u062c\u0645\u0644\u0647 \u06a9\u0646\u062a\u0631\u0644\u200c\u06a9\u0646\u0646\u062f\u0647\u200c\u0647\u0627\u06cc \u0631\u0648\u06cc\u062f\u0627\u062f\u060c \u0648 \u0631\u0646\u062f\u0631 \u06a9\u0631\u062f\u0646 \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0627\u0648\u0644\u06cc\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f.
\nupdateView: \u0647\u0631 \u0632\u0645\u0627\u0646 \u06a9\u0647 \u06a9\u0646\u062a\u0631\u0644 \u0646\u06cc\u0627\u0632 \u0628\u0647 \u0628\u0647 \u0631\u0648\u0632 \u0631\u0633\u0627\u0646\u06cc \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u062f\u060c \u0627\u06cc\u0646 \u0631\u0648\u0634 \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0645\u06cc \u0634\u0648\u062f\u060c \u0628\u0631\u0627\u06cc \u0645\u062b\u0627\u0644 \u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 \u062f\u0627\u062f\u0647 \u0647\u0627 \u06cc\u0627 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u06a9\u0646\u062a\u0631\u0644 \u062a\u063a\u06cc\u06cc\u0631 \u0645\u06cc \u06a9\u0646\u062f. \u0628\u0631\u0627\u06cc \u0631\u0646\u062f\u0631 \u0645\u062c\u062f\u062f \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0628\u0627 \u0622\u062e\u0631\u06cc\u0646 \u062f\u0627\u062f\u0647 \u0647\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f.
\ngetOutputs: \u0627\u06cc\u0646 \u0645\u062a\u062f \u0645\u0642\u062f\u0627\u0631 \u0641\u0639\u0644\u06cc \u062e\u0631\u0648\u062c\u06cc \u0647\u0627\u06cc \u06a9\u0646\u062a\u0631\u0644 \u0631\u0627 \u0628\u0631\u0645\u06cc \u06af\u0631\u062f\u0627\u0646\u062f \u06a9\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u062a\u0648\u0633\u0637 \u0627\u062c\u0632\u0627\u06cc \u062f\u06cc\u06af\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0634\u0648\u062f \u06cc\u0627 \u062f\u0631 \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 \u0630\u062e\u06cc\u0631\u0647 \u0634\u0648\u062f.
\ndestroy: \u0627\u06cc\u0646 \u0645\u062a\u062f \u0632\u0645\u0627\u0646\u06cc \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0645\u06cc \u0634\u0648\u062f \u06a9\u0647 \u06a9\u0646\u062a\u0631\u0644 \u0627\u0632 DOM \u062d\u0630\u0641 \u0634\u0648\u062f. \u0628\u0631\u0627\u06cc \u067e\u0627\u06a9\u0633\u0627\u0632\u06cc \u0645\u0646\u0627\u0628\u0639\u060c \u0645\u0627\u0646\u0646\u062f \u06a9\u0646\u062a\u0631\u0644 \u06a9\u0646\u0646\u062f\u0647 \u0631\u0648\u06cc\u062f\u0627\u062f\u0647\u0627\u060c \u0628\u0631\u0627\u06cc \u062c\u0644\u0648\u06af\u06cc\u0631\u06cc \u0627\u0632 \u0646\u0634\u062a \u062d\u0627\u0641\u0638\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f.<\/p>\n

\u062f\u0631 \u06a9\u0646\u062a\u0631\u0644 \u0645\u0627\u060c updateView \u0645\u062a\u062f \u0632\u0645\u0627\u0646\u06cc \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0645\u06cc \u0634\u0648\u062f \u06a9\u0647 \u0635\u0641\u062d\u0647 \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u0645\u06cc \u0634\u0648\u062f. \u0627\u06cc\u0646 \u0631\u0648\u0634 \u0631\u0646\u062f\u0631 \u0645\u06cc \u06a9\u0646\u062f HelloWorld \u062c\u0632\u0621 \u0627\u0632 HelloWorld.tsx \u0641\u0627\u06cc\u0644<\/p>\n

\u0633\u0627\u062e\u062a \u062c\u0632\u0621<\/p>\n

\u0628\u06cc\u0627\u06cc\u06cc\u062f \u0628\u0627 \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u0641\u0627\u06cc\u0644 App.tsx \u062f\u0631 \u062f\u0627\u062e\u0644 \u067e\u0648\u0634\u0647 \u067e\u0631\u0648\u0698\u0647 ReactDatasetControl \u0634\u0631\u0648\u0639 \u06a9\u0646\u06cc\u0645. \u0627\u06cc\u0646 \u0645\u0646\u0637\u0642 \u06a9\u0646\u062a\u0631\u0644 PCF \u0645\u0627 \u0631\u0627 \u062a\u0634\u06a9\u06cc\u0644 \u0645\u06cc \u062f\u0647\u062f.<\/p>\n

\/* App.tsx *\/<\/p>\n

import * as React from ‘react’;
\nimport { IInputs } from “.\/generated\/ManifestTypes”;
\nimport { DetailsList } from ‘@fluentui\/react’;<\/p>\n

export function PCFControl({sampleDataSet} : IInputs) {<\/p>\n

const records = [
\n {
\n “First Name”: “Saturo”,
\n “Last Name”: “Gojo”,
\n “Domain”: “Infinity Void”
\n },
\n {
\n “First Name”: “Sukuna”,
\n “Last Name”: “Ryomen”,
\n “Domain”: “Malevolent Shrine”
\n }
\n ];<\/p>\n

return DetailsList items={records}\/>
\n}<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u062e\u0637\u0648\u0637 1-3 \u062a\u0645\u0627\u0645 \u0648\u0627\u0631\u062f\u0627\u062a \u0644\u0627\u0632\u0645 \u0628\u0631\u0627\u06cc \u06a9\u0646\u062a\u0631\u0644 \u0631\u0627 \u0628\u0647 \u0627\u0631\u0645\u063a\u0627\u0646 \u0645\u06cc \u0622\u0648\u0631\u062f.
\n\u062e\u0637 \u0628\u0639\u062f\u06cc \u062a\u0627\u0628\u0639\u06cc \u0628\u0647 \u0646\u0627\u0645 \u062a\u0639\u0631\u06cc\u0641 \u0645\u06cc \u06a9\u0646\u062f PCFControl . \u0631\u0627 export \u06a9\u0644\u06cc\u062f\u0648\u0627\u0698\u0647 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0627\u06cc\u0646 \u062a\u0627\u0628\u0639 \u0631\u0627 \u062e\u0627\u0631\u062c \u0627\u0632 \u0627\u06cc\u0646 \u0641\u0627\u06cc\u0644 \u0642\u0627\u0628\u0644 \u062f\u0633\u062a\u0631\u0633\u06cc \u0645\u06cc \u06a9\u0646\u062f.
\n\u062f\u0631 PCFControl \u062a\u0627\u0628\u0639 a sampleDataSet \u0648\u06cc\u0698\u06af\u06cc \u0627\u0631\u0633\u0627\u0644 \u0645\u06cc \u0634\u0648\u062f \u06a9\u0647 \u0634\u0627\u0645\u0644 \u062f\u0627\u062f\u0647 \u0647\u0627\/\u0633\u0648\u0627\u0628\u0642 \u0634\u0628\u06a9\u0647 \u0627\u06cc \u0627\u0633\u062a \u06a9\u0647 \u06a9\u0646\u062a\u0631\u0644 \u0645\u0627 \u0628\u0647 \u0622\u0646\u0647\u0627 \u0645\u062a\u0635\u0644 \u0645\u06cc \u0634\u0648\u062f.
\n\u062a\u0627\u0628\u0639 a \u0631\u0627 \u0628\u0631\u0645\u06cc \u06af\u0631\u062f\u0627\u0646\u062f DetailsList \u06a9\u0646\u062a\u0631\u0644 \u0628\u0627 \u0633\u0648\u0627\u0628\u0642 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0627\u0631\u0633\u0627\u0644 \u0634\u062f\u0647 \u0628\u0647 \u0622\u0646 items \u062f\u0627\u0631\u0627\u06cc\u06cc
\nDetailsList \u06cc\u06a9 \u06a9\u0646\u062a\u0631\u0644 \u0648\u0627\u06a9\u0646\u0634 Fluent UI \u0627\u06cc\u062c\u0627\u062f \u0634\u062f\u0647 \u062a\u0648\u0633\u0637 \u0645\u0627\u06cc\u06a9\u0631\u0648\u0633\u0627\u0641\u062a \u0627\u0633\u062a \u06a9\u0647 \u0628\u0631\u0627\u06cc \u0645\u0634\u0627\u0647\u062f\u0647 \u062f\u0627\u062f\u0647 \u0647\u0627 \u062f\u0631 \u0642\u0627\u0644\u0628 \u0644\u06cc\u0633\u062a \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f.<\/p>\n

index.ts<\/p>\n

\u0641\u0627\u06cc\u0644 \u0628\u0627 \u0639\u0646\u0648\u0627\u0646 \u0631\u0627 \u0628\u0627\u0632 \u06a9\u0646\u06cc\u062f index.ts \u060c \u0645\u0627 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f PCFControl \u062f\u0631 \u0628\u0627\u0644\u0627\u06cc \u0641\u0627\u06cc\u0644 \u0648 \u0627\u062c\u0627\u0632\u0647 \u062f\u0647\u06cc\u062f \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u06cc\u062f updateView \u062a\u0627\u0628\u0639\u06cc \u0628\u0631\u0627\u06cc \u0628\u0631\u06af\u0631\u062f\u0627\u0646\u062f\u0646 \u06a9\u0646\u062a\u0631\u0644 \u0633\u0641\u0627\u0631\u0634\u06cc \u0645\u0627.<\/p>\n

import { PCFControl } from “.\/App”<\/p>\n

\/\/ …<\/p>\n

public updateView(context: ComponentFramework.ContextIInputs>): React.ReactElement
\n{
\n const props: IInputs = { sampleDataSet: context.parameters.sampleDataSet };
\n return React.createElement(PCFControl, props);
\n}<\/p>\n

\/\/ …<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

context.parameters.sampleDataSet \u0628\u0647 \u0648\u06cc\u0698\u06af\u06cc \u0645\u062c\u0645\u0648\u0639\u0647 \u062f\u0627\u062f\u0647 \u0627\u0632 context \u067e\u0627\u0631\u0627\u0645\u062a\u0631 \u0627\u06cc\u0646 \u0634\u0627\u0645\u0644 \u062f\u0627\u062f\u0647 \u0647\u0627\/\u0633\u0648\u0627\u0628\u0642 \u0634\u0628\u06a9\u0647 \u0627\u06cc \u0627\u0633\u062a \u06a9\u0647 \u06a9\u0646\u062a\u0631\u0644 \u0645\u0627 \u062f\u0631 \u0628\u062e\u0634 \u0647\u0627\u06cc \u0628\u0639\u062f\u06cc \u0628\u0647 \u0622\u0646 \u0645\u0644\u0632\u0645 \u062e\u0648\u0627\u0647\u062f \u0634\u062f. \u0633\u067e\u0633 \u06cc\u06a9 \u0639\u0646\u0635\u0631 React \u0645\u062a\u0634\u06a9\u0644 \u0627\u0632 PCFControl \u0645\u0624\u0644\u0641\u0647 \u0648 \u0645\u062c\u0645\u0648\u0639\u0647 \u062f\u0627\u062f\u0647 \u0627\u0631\u0633\u0627\u0644\u06cc props \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u062e\u0648\u0627\u0635 \u0628\u0647 \u0622\u0646.<\/p>\n

\u0627\u06a9\u0646\u0648\u0646 \u06a9\u0647 \u06cc\u06a9 \u0633\u0627\u062e\u062a\u0627\u0631 \u0627\u0633\u0627\u0633\u06cc \u0628\u0631\u0627\u06cc \u06a9\u0646\u062a\u0631\u0644 \u062e\u0648\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0631\u062f\u0647 \u0627\u06cc\u0645\u060c \u0628\u06cc\u0627\u06cc\u06cc\u062f \u06a9\u0646\u062a\u0631\u0644 \u062e\u0648\u062f \u0631\u0627 \u0628\u0633\u0627\u0632\u06cc\u0645 \u0648 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u0645 \u062a\u0627 \u0628\u0628\u06cc\u0646\u06cc\u0645 \u0638\u0627\u0647\u0631 \u0622\u0646 \u0686\u06af\u0648\u0646\u0647 \u0627\u0633\u062a. \u0628\u0631\u0627\u06cc \u0645\u0634\u0627\u0647\u062f\u0647 \u06a9\u0646\u062a\u0631\u0644 \u062f\u0631 \u0645\u0631\u0648\u0631\u06af\u0631 \u0645\u062d\u0644\u06cc \u062e\u0648\u062f \u062f\u0633\u062a\u0648\u0631\u0627\u062a \u0632\u06cc\u0631 \u0631\u0627 \u062f\u0631 \u062a\u0631\u0645\u06cc\u0646\u0627\u0644 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f.<\/p>\n

npm run build
\nnpm start watch<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u06a9\u0646\u0648\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0631\u06a9\u0648\u0631\u062f\u0647\u0627\u06cc \u062e\u0648\u062f \u0631\u0627 \u062f\u0631 \u0642\u0627\u0644\u0628 \u0644\u06cc\u0633\u062a \u062c\u062f\u0648\u0644\u06cc \u0645\u0634\u0627\u0647\u062f\u0647 \u06a9\u0646\u06cc\u062f\u060c<\/p>\n

\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062f\u0627\u062f\u0647 \u0647\u0627 \u0627\u0632 \u0637\u0631\u06cc\u0642 props<\/p>\n

\u062f\u0631 \u0645\u0631\u062d\u0644\u0647 \u0628\u0639\u062f\u06cc\u060c \u0645\u06cc\u200c\u062e\u0648\u0627\u0647\u06cc\u0645 \u062f\u0627\u062f\u0647\u200c\u0647\u0627\u06cc \u0634\u0628\u06a9\u0647 CRM \u0631\u0627 \u06a9\u0647 \u0627\u0632 \u0622\u0646 \u062f\u0631\u06cc\u0627\u0641\u062a \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645\u060c \u0646\u0645\u0627\u06cc\u0634 \u062f\u0647\u06cc\u0645 sampleDataSet \u0648\u06cc\u0698\u06af\u06cc \u062f\u0631 \u06a9\u0646\u062a\u0631\u0644 \u0628\u0647 \u062c\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0631\u06a9\u0648\u0631\u062f\u0647\u0627\u06cc \u062f\u0627\u062f\u0647 \u0627\u0633\u062a\u0627\u062a\u06cc\u06a9.<\/p>\n

\u0628\u0627\u0632 \u06a9\u0646\u06cc\u062f App.tsx \u0648 \u0627\u062c\u0627\u0632\u0647 \u062f\u0647\u06cc\u062f \u0627\u0628\u062a\u062f\u0627 \u06cc\u06a9 \u062a\u0627\u0628\u0639 \u0628\u0647 \u0646\u0627\u0645 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u0645 parseDatasetToJSON \u062f\u0631 \u062f\u0627\u062e\u0644 \u062a\u0627\u0628\u0639 PCFControl\u060c \u06a9\u0647 \u0622\u0646 \u0631\u0627 \u062a\u062c\u0632\u06cc\u0647 \u0645\u06cc \u06a9\u0646\u062f sampleDataSet \u0648\u06cc\u0698\u06af\u06cc (\u0634\u0627\u0645\u0644 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0634\u0628\u06a9\u0647) \u0648 \u0622\u0646 \u062f\u0627\u062f\u0647 \u0647\u0627 \u0631\u0627 \u062f\u0631 \u0622\u0631\u0627\u06cc\u0647 \u0627\u06cc \u0627\u0632 \u0627\u0634\u06cc\u0627\u0621 json \u0628\u0631\u0645\u06cc \u06af\u0631\u062f\u0627\u0646\u062f.<\/p>\n

\/\/ …<\/p>\n

function parseDatasetToJSON()
\n{
\n const jsonData = [];
\n for(const recordID of sampleDataSet.sortedRecordIds)
\n {
\n \/\/ Dataset record
\n const record = sampleDataSet.records[recordID];
\n const temp: Recordstring, any> = {};<\/p>\n

\/\/ Loop through each dataset columns
\n for(const column of sampleDataSet.columns)
\n {
\n temp[column.name] = record.getFormattedValue(column.name)
\n }<\/p>\n

jsonData.push(temp);
\n }
\n return jsonData;
\n}<\/p>\n

\/\/ …<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u06a9\u0646\u0648\u0646 \u06a9\u0647 \u062a\u0627\u0628\u0639\u06cc \u0628\u0631\u0627\u06cc \u062a\u0628\u062f\u06cc\u0644 \u0645\u062c\u0645\u0648\u0639\u0647 \u062f\u0627\u062f\u0647 \u0628\u0647 JSON \u062f\u0631\u06cc\u0627\u0641\u062a \u06a9\u0631\u062f\u0647\u200c\u0627\u06cc\u0645\u060c \u0645\u06cc\u200c\u062e\u0648\u0627\u0647\u06cc\u0645 \u0627\u06cc\u0646 \u062a\u0627\u0628\u0639 \u0631\u0627 \u0628\u0647\u200c\u0633\u0631\u0639\u062a \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u06a9\u0646\u06cc\u0645 sampleDataSet \u062f\u0627\u0631\u0627\u06cc\u06cc \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u06cc\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u06a9\u0631\u062f\u0647 \u0627\u0633\u062a.<\/p>\n

React \u06cc\u06a9 \u062a\u0648\u0627\u0628\u0639 \u0648\u06cc\u0698\u0647 \u0628\u0647 \u0646\u0627\u0645 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u06a9\u0646\u062f \u0642\u0644\u0627\u0628\u060c \u0645\u0627\u0646\u0646\u062f useState \u06a9\u0647 \u0628\u0647 \u0634\u0645\u0627 \u0627\u06cc\u0646 \u0627\u0645\u06a9\u0627\u0646 \u0631\u0627 \u0645\u06cc \u062f\u0647\u062f \u06a9\u0647 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u062e\u0648\u062f \u0631\u0627 \u062f\u0631 \u06cc\u06a9 \u0645\u062a\u063a\u06cc\u0631 \u0648\u06cc\u0698\u06af\u06cc \u0646\u0648\u0639 \u062d\u0627\u0644\u062a \u0648 useEffect \u0628\u0647 \u0634\u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u062a\u0648\u0627\u0628\u0639 \u0645\u0631\u0628\u0648\u0637 \u0628\u0647 \u0647\u0631 \u06cc\u06a9 \u0627\u0632 \u062a\u063a\u06cc\u06cc\u0631 \u0648\u06cc\u0698\u06af\u06cc \u0646\u0648\u0639 \u062d\u0627\u0644\u062a \u0631\u0627 \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u06a9\u0646\u06cc\u062f.<\/p>\n

\u0628\u06cc\u0634\u062a\u0631 \u0628\u062f\u0627\u0646\u06cc\u062f useState \u0648 useEffect \u0627\u0632\u060c<\/p>\n

\u0648\u0627\u0631\u062f\u0627\u062a useState \u0648 useEffect \u062f\u0631 \u0628\u0627\u0644\u0627\u06cc \u0641\u0627\u06cc\u0644\u060c \u0633\u067e\u0633 \u06cc\u06a9 \u0645\u062a\u063a\u06cc\u0631 \u062d\u0627\u0644\u062a \u0628\u0647 \u0646\u0627\u0645 \u0631\u0627 \u0645\u0642\u062f\u0627\u0631\u062f\u0647\u06cc \u0627\u0648\u0644\u06cc\u0647 \u06a9\u0646\u06cc\u062f notes \u06a9\u0647 \u0631\u06a9\u0648\u0631\u062f\u0647\u0627\u06cc \u0645\u062c\u0645\u0648\u0639\u0647 \u062f\u0627\u062f\u0647 \u0628\u0627 \u0641\u0631\u0645\u062a JSON \u0645\u0627 \u0631\u0627 \u0630\u062e\u06cc\u0631\u0647 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n

\u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 sampleDataSet \u062f\u0627\u0631\u0627\u06cc\u06cc \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc\/\u062a\u063a\u06cc\u06cc\u0631 \u0634\u062f\u0647 \u0627\u0633\u062a\u060c useEffect \u062a\u0627\u0628\u0639 \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0645\u06cc \u0634\u0648\u062f \u0648 notes \u0645\u062a\u063a\u06cc\u0631 \u0628\u0627 \u0631\u06a9\u0648\u0631\u062f\u0647\u0627\u06cc \u0645\u062c\u0645\u0648\u0639\u0647 \u062f\u0627\u062f\u0647 \u062c\u062f\u06cc\u062f \u0628\u0647 \u0631\u0648\u0632 \u0645\u06cc \u0634\u0648\u062f.<\/p>\n

\u0633\u067e\u0633 DetailsList \u0631\u0627 \u0628\u0647 \u0631\u0648\u0632 \u0645\u06cc \u06a9\u0646\u06cc\u0645 items \u062f\u0627\u0631\u0627\u06cc\u06cc \u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 notes \u062f\u0627\u062f\u0647 \u0647\u0627 \u0628\u0647 \u062c\u0627\u06cc \u0633\u0648\u0627\u0628\u0642 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0627\u06cc\u0633\u062a\u0627.<\/p>\n

import { useState, useEffect } from ‘react’;<\/p>\n

\/\/ …<\/p>\n

const [notes, setNotes] = useStateArrayRecordstring, any>>>([]); \/\/ Array of JSON Objects<\/p>\n

useEffect(() => {<\/p>\n

const notesRecords = parseDatasetToJSON();
\n setNotes(notesRecords);<\/p>\n

}, [sampleDataSet]); \/\/ On dataset property load or change<\/p>\n

return DetailsList items={notes}\/><\/p>\n

\/\/ …<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u062f\u0631 \u0627\u06cc\u0646 \u0645\u0631\u062d\u0644\u0647 \u0634\u0645\u0627 App.tsx \u06a9\u062f \u0628\u0627\u06cc\u062f \u0686\u06cc\u0632\u06cc \u0634\u0628\u06cc\u0647 \u0628\u0647 \u0627\u06cc\u0646 \u0628\u0627\u0634\u062f:<\/p>\n

import * as React from ‘react’;
\nimport { useState, useEffect } from ‘react’;
\nimport { IInputs } from “.\/generated\/ManifestTypes”;
\nimport { DetailsList } from ‘@fluentui\/react’;<\/p>\n

export function PCFControl({sampleDataSet} : IInputs) {<\/p>\n

function parseDatasetToJSON()
\n {
\n const jsonData = [];
\n for(const recordID of sampleDataSet.sortedRecordIds)
\n {
\n \/\/ Dataset record
\n const record = sampleDataSet.records[recordID];
\n const temp: Recordstring, any> = {};<\/p>\n

\/\/ Loop through each dataset columns
\n for(const column of sampleDataSet.columns)
\n {
\n temp[column.name] = record.getFormattedValue(column.name)
\n }
\n jsonData.push(temp);
\n }
\n return jsonData;
\n }<\/p>\n

const [notes, setNotes] = useStateArrayRecordstring, any>>>([]); \/\/ Array of JSON Objects<\/p>\n

useEffect(() => {<\/p>\n

const notesRecords = parseDatasetToJSON();
\n setNotes(notesRecords);<\/p>\n

}, [sampleDataSet]); \/\/ On dataset property load or change<\/p>\n

return DetailsList items={notes}\/><\/p>\n

}<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u06a9\u0646\u0648\u0646 \u067e\u0631\u0648\u0698\u0647 \u062e\u0648\u062f \u0631\u0627 \u0628\u0633\u0627\u0632\u06cc\u062f\u060c \u0648 \u0628\u0627\u06cc\u062f \u0686\u06cc\u0632\u06cc \u0634\u0628\u06cc\u0647 \u0628\u0647 \u0627\u06cc\u0646 \u0631\u0627 \u0628\u0628\u06cc\u0646\u06cc\u062f\u060c<\/p>\n

\u062f\u0631 \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc\u060c \u06a9\u0646\u062a\u0631\u0644 \u0645\u062c\u0645\u0648\u0639\u0647 \u062f\u0627\u062f\u0647 PCF \u0627\u06cc\u0646 \u0645\u062c\u0645\u0648\u0639\u0647 \u062f\u0627\u062f\u0647 \u0633\u0627\u062e\u062a\u06af\u06cc \u0631\u0627 \u0641\u0631\u0627\u0647\u0645 \u0645\u06cc \u06a9\u0646\u062f. \u0628\u0631\u0627\u06cc \u0627\u0631\u0627\u0626\u0647 \u0645\u062c\u0645\u0648\u0639\u0647 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0633\u0641\u0627\u0631\u0634\u06cc \u062e\u0648\u062f\u060c \u0627\u0632 \u0642\u0633\u0645\u062a \u0647\u0627\u06cc\u0644\u0627\u06cc\u062a \u0634\u062f\u0647 \u067e\u0627\u06cc\u06cc\u0646 \u0633\u0645\u062a \u0631\u0627\u0633\u062a\u060c \u0647\u0631 \u0641\u0627\u06cc\u0644 \u0627\u06a9\u0633\u0644\u06cc \u0631\u0627 \u06a9\u0647 \u062d\u0627\u0648\u06cc \u0644\u06cc\u0633\u062a\u06cc \u0627\u0632 \u0633\u062a\u0648\u0646 \u0647\u0627 \u0648 \u0631\u062f\u06cc\u0641 \u0647\u0627 \u0628\u0627\u0634\u062f\u060c \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u06cc\u062f. \u062f\u0631 \u0627\u0646\u062a\u062e\u0627\u0628 PCF Dataset Control \u0627\u06cc\u0646 \u0641\u0627\u06cc\u0644 \u0627\u06a9\u0633\u0644 \u0631\u0627 \u0628\u0647 sampleDataSet \u062f\u0627\u0631\u0627\u06cc\u06cc<\/p>\n

\u062f\u0631\u06a9 \u0645\u0648\u062c\u0648\u062f\u06cc\u062a CRM: \u06cc\u0627\u062f\u062f\u0627\u0634\u062a \u0647\u0627<\/p>\n

\u062f\u0631 \u0627\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634 \u0645\u0627 \u062f\u0631 \u062d\u0627\u0644 \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u06a9\u0646\u062a\u0631\u0644 \u0645\u062c\u0645\u0648\u0639\u0647 \u062f\u0627\u062f\u0647 PCF \u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062f\u0631 \u0645\u0648\u062c\u0648\u062f\u06cc\u062a OOB Notes Dynamics CRM \u0647\u0633\u062a\u06cc\u0645. \u0628\u06cc\u0627\u06cc\u06cc\u062f \u06cc\u06a9 \u0644\u062d\u0638\u0647 \u06a9\u0648\u062a\u0627\u0647 \u0628\u0647 \u0645\u0631\u0648\u0631 \u0628\u0631\u062e\u06cc \u0627\u0632 \u0633\u062a\u0648\u0646\u200c\u0647\u0627\u06cc \u06a9\u0644\u06cc\u062f\u06cc \u0645\u0648\u062c\u0648\u062f\u06cc\u062a Notes \u06a9\u0647 \u0628\u0639\u062f\u0627\u064b \u062f\u0631 \u06a9\u0646\u062a\u0631\u0644 \u0645\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u0646\u062f \u0634\u062f\u060c \u0627\u062e\u062a\u0635\u0627\u0635 \u062f\u0647\u06cc\u0645.<\/p>\n

\u0631\u0627 \u06cc\u0627\u062f\u062f\u0627\u0634\u062a \u0647\u0627 \u0645\u0648\u062c\u0648\u062f\u06cc\u062a \u062f\u0631 Dynamics CRM \u0628\u0631\u0627\u06cc \u0630\u062e\u06cc\u0631\u0647 \u0648 \u0645\u062f\u06cc\u0631\u06cc\u062a \u067e\u06cc\u0648\u0633\u062a\u200c\u0647\u0627 \u06cc\u0627 \u0646\u0638\u0631\u0627\u062a \u0645\u0631\u062a\u0628\u0637 \u0628\u0627 \u0633\u0627\u06cc\u0631 \u0646\u0647\u0627\u062f\u0647\u0627\u060c \u0645\u0627\u0646\u0646\u062f \u062d\u0633\u0627\u0628\u200c\u0647\u0627\u060c \u0645\u062e\u0627\u0637\u0628\u06cc\u0646 \u06cc\u0627 \u0641\u0631\u0635\u062a\u200c\u0647\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f. \u0627\u063a\u0644\u0628 \u0628\u0631\u0627\u06cc \u067e\u06cc\u06af\u06cc\u0631\u06cc \u067e\u0631\u0648\u0646\u062f\u0647 \u0647\u0627 \u06cc\u0627 \u06cc\u0627\u062f\u062f\u0627\u0634\u062a \u0647\u0627\u06cc \u0645\u0647\u0645 \u0645\u0631\u0628\u0648\u0637 \u0628\u0647 \u0633\u0648\u0627\u0628\u0642 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f.<\/p>\n

\u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u06cc\u06a9 \u0646\u0645\u0627\u06cc \u06a9\u0644\u06cc \u0627\u0632 \u0633\u062a\u0648\u0646\u200c\u0647\u0627\u06cc \u06a9\u0644\u06cc\u062f\u06cc \u0645\u0648\u062c\u0648\u062f\u06cc\u062a Notes \u0622\u0648\u0631\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a:<\/p>\n

\u0646\u0627\u0645 \u0641\u0627\u06cc\u0644 (filename): \u0627\u06cc\u0646 \u0633\u062a\u0648\u0646 \u0646\u0627\u0645 \u0641\u0627\u06cc\u0644 \u067e\u06cc\u0648\u0633\u062a \u0634\u062f\u0647 \u0628\u0647 \u06cc\u0627\u062f\u062f\u0627\u0634\u062a \u0631\u0627 \u0630\u062e\u06cc\u0631\u0647 \u0645\u06cc \u06a9\u0646\u062f. \u0627\u06cc\u0646 \u06cc\u06a9 \u0641\u06cc\u0644\u062f \u0631\u0634\u062a\u0647 \u0627\u06cc \u0627\u0633\u062a \u0648 \u0628\u0631\u0627\u06cc \u067e\u0631 \u06a9\u0631\u062f\u0646 \u0641\u0627\u06cc\u0644 \u06a9\u0634\u0648\u06cc\u06cc \u062f\u0631 \u06a9\u0646\u062a\u0631\u0644 \u0645\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f.
\n\u0628\u062f\u0646\u0647 \u0633\u0646\u062f (documentbody): \u0627\u06cc\u0646 \u0633\u062a\u0648\u0646 \u062d\u0627\u0648\u06cc \u0645\u062d\u062a\u0648\u0627\u06cc \u0648\u0627\u0642\u0639\u06cc \u0641\u0627\u06cc\u0644 \u067e\u06cc\u0648\u0633\u062a \u0634\u062f\u0647 \u0627\u0633\u062a \u06a9\u0647 \u062f\u0631 \u0631\u0634\u062a\u0647 \u0641\u0631\u0645\u062a Base64 \u06a9\u062f\u06af\u0630\u0627\u0631\u06cc \u0634\u062f\u0647 \u0627\u0633\u062a. \u0627\u06cc\u0646 \u062c\u0627\u06cc\u06cc \u0627\u0633\u062a \u06a9\u0647 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0641\u0627\u06cc\u0644 \u0630\u062e\u06cc\u0631\u0647 \u0645\u06cc \u0634\u0648\u062f \u0648 \u0622\u0646 \u0631\u0627 \u0628\u0647 \u0628\u062e\u0634 \u0645\u0647\u0645\u06cc \u0627\u0632 \u0645\u062f\u06cc\u0631\u06cc\u062a \u067e\u06cc\u0648\u0633\u062a \u062a\u0628\u062f\u06cc\u0644 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n

\u0627\u06a9\u0646\u0648\u0646 \u06a9\u0647 \u062f\u0631\u06a9 \u0628\u0647\u062a\u0631\u06cc \u0627\u0632 \u0632\u0645\u06cc\u0646\u0647 \u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u062f\u0631 \u0645\u0648\u062c\u0648\u062f\u06cc\u062a \u06cc\u0627\u062f\u062f\u0627\u0634\u062a \u062f\u0627\u0631\u06cc\u0645\u060c \u0627\u062c\u0627\u0632\u0647 \u062f\u0647\u06cc\u062f \u0628\u0647 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u062a\u0631\u0644 \u062e\u0648\u062f \u0627\u062f\u0627\u0645\u0647 \u062f\u0647\u06cc\u0645.<\/p>\n

\u0627\u0641\u0632\u0648\u062f\u0646 \u06a9\u0634\u0648\u06cc\u06cc \u0641\u0627\u06cc\u0644<\/p>\n

\u0627\u06a9\u0646\u0648\u0646 \u06cc\u06a9 \u0645\u0646\u0648\u06cc \u06a9\u0634\u0648\u06cc\u06cc File \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u0644\u06cc\u0633\u062a \u0641\u0627\u06cc\u0644 \u0647\u0627\u06cc \u067e\u06cc\u0648\u0633\u062a \u0634\u062f\u0647 \u0628\u0627 \u0631\u06a9\u0648\u0631\u062f\u0647\u0627\u06cc \u06cc\u0627\u062f\u062f\u0627\u0634\u062a \u0631\u0627 \u0646\u0645\u0627\u06cc\u0634 \u0645\u06cc \u062f\u0647\u062f.<\/p>\n

\u062a\u0648\u062c\u0647: \u062f\u0631 CRM\u060c \u06cc\u06a9 \u0631\u06a9\u0648\u0631\u062f \u0645\u0648\u062c\u0648\u062f\u06cc\u062a \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u062f \u0686\u0646\u062f\u06cc\u0646 \u0631\u06a9\u0648\u0631\u062f \u06cc\u0627\u062f\u062f\u0627\u0634\u062a \u0645\u0631\u062a\u0628\u0637 \u0628\u0647 \u0622\u0646 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u062f\u060c \u062c\u0627\u06cc\u06cc \u06a9\u0647 \u0647\u0631 \u0631\u06a9\u0648\u0631\u062f \u06cc\u0627\u062f\u062f\u0627\u0634\u062a \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u062f \u062f\u0627\u0631\u0627\u06cc \u0641\u0642\u0637 \u06cc\u06a9 \u0641\u0627\u06cc\u0644 \u062f\u0631 \u0622\u0646 \u0645\u062a\u0635\u0644 \u0634\u062f\u0647 \u0627\u0633\u062a.<\/p>\n

\u0628\u06cc\u0627\u06cc\u06cc\u062f \u06cc\u06a9 \u062a\u0627\u0628\u0639 \u0628\u0647 \u0646\u0627\u0645 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u0645 createFileOptions \u06a9\u0647 \u062e\u0648\u0627\u0647\u062f \u06af\u0631\u0641\u062a notes \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u06cc\u06a9 \u067e\u0627\u0631\u0627\u0645\u062a\u0631 \u062b\u0628\u062a \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0622\u0631\u0627\u06cc\u0647 \u0627\u06cc \u0627\u0632 \u06af\u0632\u06cc\u0646\u0647 \u0647\u0627 \u0631\u0627 \u0628\u0631\u0627\u06cc \u06a9\u0634\u0648\u06cc\u06cc \u0628\u0631\u0645\u06cc \u06af\u0631\u062f\u0627\u0646\u062f.<\/p>\n

\/\/ …<\/p>\n

function createFileOptions(notes: ArrayRecordstring, any>>)
\n{
\n const options: IDropdownOption[] = [];<\/p>\n

for(const [index, note] of notes.entries())
\n {
\n const option = { key: index, text: note[“filename”] ?? “No File” };
\n options.push(option);
\n }
\n return options;
\n}<\/p>\n

\/\/ …<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u06cc\u0646 \u062a\u0627\u0628\u0639 \u06cc\u06a9 \u0622\u0631\u0627\u06cc\u0647 \u0627\u0632 IDropdownOption \u0627\u0634\u06cc\u0627\u0621\u060c \u0628\u0627 \u0647\u0631 \u0634\u06cc\u0621 \u062d\u0627\u0648\u06cc \u06cc\u06a9 \u0648\u06cc\u0698\u06af\u06cc \u0645\u062a\u0646\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0645\u0642\u062f\u0627\u0631 the \u0631\u0627 \u062f\u0631 \u062e\u0648\u062f \u062f\u0627\u0631\u062f filename \u0641\u06cc\u0644\u062f \u0627\u0632 \u0633\u0648\u0627\u0628\u0642 \u06cc\u0627\u062f\u062f\u0627\u0634\u062a.<\/p>\n

\u0628\u0647 \u06cc\u0627\u062f \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f: notes \u06cc\u06a9 \u0645\u062a\u063a\u06cc\u0631 \u062d\u0627\u0644\u062a \u0627\u0633\u062a \u06a9\u0647 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0622\u0646 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0631\u062f\u06cc\u0645 parseDatasetToJSON \u062a\u0627\u0628\u0639 \u0648 \u0647\u0631 \u0631\u06a9\u0648\u0631\u062f \u06cc\u0627\u062f\u062f\u0627\u0634\u062a \u062d\u0627\u0648\u06cc \u062f\u0648 \u0648\u06cc\u0698\u06af\u06cc \u0627\u0635\u0644\u06cc \u0627\u0633\u062a filename \u0648 documentbody<\/p>\n

\u062f\u0631 \u0645\u0631\u062d\u0644\u0647 \u0628\u0639\u062f\u060c \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u06cc\u0646 \u062a\u0627\u0628\u0639\u060c \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0627\u06cc\u0646 \u06af\u0632\u06cc\u0646\u0647 \u0631\u0627 \u062f\u0631 \u06cc\u06a9 \u0630\u062e\u06cc\u0631\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645 fileOptions \u0645\u062a\u063a\u06cc\u0631 state\u060c \u0648 \u0627\u06cc\u0646 \u06af\u0632\u06cc\u0646\u0647 \u0631\u0627 \u0628\u0647 \u06cc\u06a9 \u06a9\u0646\u062a\u0631\u0644 \u06a9\u0634\u0648\u06cc\u06cc Fluent UI \u0645\u0646\u062a\u0642\u0644 \u0645\u06cc \u06a9\u0646\u062f \u062a\u0627 \u062f\u0631 \u0628\u0627\u0644\u0627\u06cc \u0622\u0646 \u0627\u0636\u0627\u0641\u0647 \u0634\u0648\u062f DetailsList \u06a9\u0646\u062a\u0631\u0644 \u062f\u0631 \u0628\u06cc\u0627\u0646\u06cc\u0647 \u0628\u0627\u0632\u06af\u0634\u062a.<\/p>\n

import { DetailsList, Dropdown, IDropdownOption, Stack } from ‘@fluentui\/react’;<\/p>\n

\/\/ …<\/p>\n

const [notes, setNotes] = useStateArrayRecordstring, any>>>([]); \/\/ Array of JSON objects
\nconst [fileOptions, setFileOptions] = useStateIDropdownOption[]>([]); \/\/ Array of IDropdownOption objects <\/p>\n

useEffect(() => {<\/p>\n

const notesRecords = parseDatasetToJSON();
\n const fileOptionsRecords = createFileOptions(notesRecords);<\/p>\n

setNotes(notesRecords);
\n setFileOptions(fileOptionsRecords);<\/p>\n

}, [sampleDataSet]); \/\/ On dataset change<\/p>\n

return (
\n Stack>
\n Dropdown placeholder=”Select File” options={fileOptions}\/>
\n DetailsList items={notes}\/>
\n \/Stack>
\n);<\/p>\n

\/\/ …<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u062f\u0631 \u0627\u06cc\u0646 \u0645\u0631\u062d\u0644\u0647 \u06a9\u062f App.tsx \u0634\u0645\u0627 \u0628\u0627\u06cc\u062f \u0686\u06cc\u0632\u06cc \u0634\u0628\u06cc\u0647 \u0628\u0647 \u0627\u06cc\u0646 \u0628\u0627\u0634\u062f:<\/p>\n

import * as React from ‘react’;
\nimport { useState, useEffect } from ‘react’;
\nimport { IInputs } from “.\/generated\/ManifestTypes”;
\nimport { DetailsList, Dropdown, IDropdownOption, Stack } from ‘@fluentui\/react’;<\/p>\n

export function PCFControl({sampleDataSet} : IInputs) {<\/p>\n

function parseDatasetToJSON()
\n {
\n const jsonData = [];
\n for(const recordID of sampleDataSet.sortedRecordIds)
\n {
\n \/\/ Dataset record
\n const record = sampleDataSet.records[recordID];
\n const temp: Recordstring, any> = {};<\/p>\n

for(const column of sampleDataSet.columns)
\n {
\n temp[column.name] = record.getFormattedValue(column.name)
\n }
\n jsonData.push(temp);
\n }
\n return jsonData;
\n }<\/p>\n

function createFileOptions(notes: ArrayRecordstring, any>>)
\n {
\n const options: IDropdownOption[] = [];<\/p>\n

for(const [index, note] of notes.entries())
\n {
\n const option = { key: index, text: note[“filename”] ?? “No File” }
\n options.push(option);
\n }
\n return options;
\n }<\/p>\n

const [notes, setNotes] = useStateArrayRecordstring, any>>>([]); \/\/ Array of JSON objects
\n const [fileOptions, setFileOptions] = useStateIDropdownOption[]>([]); \/\/ Array of IDropdownOption objects<\/p>\n

useEffect(() => {<\/p>\n

const notesRecords = parseDatasetToJSON();
\n const fileOptionsRecords = createFileOptions(notesRecords);<\/p>\n

setNotes(notesRecords);
\n setFileOptions(fileOptionsRecords);<\/p>\n

}, [sampleDataSet]); \/\/ On dataset change<\/p>\n

return (
\n Stack>
\n Dropdown placeholder=”Select File” options={fileOptions}\/>
\n DetailsList items={notes}\/>
\n \/Stack>
\n );
\n}<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u067e\u0631\u0648\u0698\u0647 \u062e\u0648\u062f \u0631\u0627 \u0628\u0633\u0627\u0632\u06cc\u062f \u0648 \u0627\u06a9\u0646\u0648\u0646 \u06cc\u06a9 \u06a9\u0634\u0648\u06cc\u06cc \u062f\u0631 \u0628\u0627\u0644\u0627\u06cc \u0644\u06cc\u0633\u062a \u062e\u0648\u062f \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc \u0634\u0648\u062f \u06a9\u0647 \u0634\u0627\u0645\u0644 filename \u0645\u0642\u0627\u062f\u06cc\u0631 \u0627\u0632 \u0641\u0627\u06cc\u0644 \u0645\u062c\u0645\u0648\u0639\u0647 \u062f\u0627\u062f\u0647 \u0634\u0645\u0627<\/p>\n

\u0647\u0646\u06af\u0627\u0645 \u0633\u0627\u062e\u062a \u0628\u0627 \u06af\u0641\u062a\u0646 \u062e\u0637\u0627 \u0645\u0648\u0627\u062c\u0647 \u0634\u062f \u063a\u06cc\u0631 \u0645\u0646\u062a\u0638\u0631\u0647 \u0647\u0631. \u0646\u0648\u0639 \u062f\u06cc\u06af\u0631\u06cc @typescript-eslint\/no-explicit-any \u0631\u0627 \u0645\u0634\u062e\u0635 \u06a9\u0646\u06cc\u062f ?<\/p>\n

\u062e\u0648\u0628\u060c \u0632\u06cc\u0631\u0627 \u062a\u0627\u06cc\u067e \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u06cc\u06a9 \u0632\u0628\u0627\u0646 \u0628\u0627 \u062a\u0627\u06cc\u067e \u0642\u0648\u06cc \u0627\u0633\u062a \u0648 \u0627\u0632 \u0645\u0627 \u0627\u0646\u062a\u0638\u0627\u0631 \u062f\u0627\u0631\u062f \u06a9\u0647 \u0627\u0646\u0648\u0627\u0639 \u0645\u062a\u063a\u06cc\u0631\u0647\u0627 \u0631\u0627 \u062f\u0631 \u0637\u0648\u0644 \u0632\u0645\u0627\u0646 \u06a9\u0627\u0645\u067e\u0627\u06cc\u0644 \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0646\u06cc\u0645 \u062a\u0627 \u0627\u0632 \u0647\u0631\u06af\u0648\u0646\u0647 \u062e\u0637\u0627\u06cc \u0632\u0645\u0627\u0646 \u0627\u062c\u0631\u0627 \u062c\u0644\u0648\u06af\u06cc\u0631\u06cc \u06a9\u0646\u06cc\u0645.<\/p>\n

\u0628\u0631\u0627\u06cc \u0631\u0641\u0639 \u0627\u06cc\u0646 \u0645\u0634\u06a9\u0644\u060c \u0628\u0647 \u0622\u062f\u0631\u0633 \u062e\u0648\u062f \u0628\u0631\u0648\u06cc\u062f .eslintrc.json \u0641\u0627\u06cc\u0644 \u06a9\u0646\u06cc\u062f \u0648 \u0627\u06cc\u0646 \u062a\u0646\u0638\u06cc\u0645\u0627\u062a \u0631\u0627 \u0628\u0647 \u0648\u06cc\u0698\u06af\u06cc \u0642\u0648\u0627\u0646\u06cc\u0646 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f\u060c \u0627\u06cc\u0646 \u0628\u0647 \u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u0627\u0632 \u0645\u062a\u063a\u06cc\u0631\u0647\u0627\u06cc \u0646\u0648\u0639 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u0645 any. \u0633\u067e\u0633 \u062f\u0648\u0628\u0627\u0631\u0647 \u067e\u0631\u0648\u0698\u0647 \u062e\u0648\u062f \u0631\u0627 \u0628\u0633\u0627\u0632\u06cc\u062f.<\/p>\n

“@typescript-eslint\/no-explicit-any”: “off”<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u062f\u0631 \u062d\u0627\u0644 \u062d\u0627\u0636\u0631 \u0627\u0632 \u0622\u0646\u062c\u0627\u06cc\u06cc \u06a9\u0647 \u0645\u0627 \u062f\u0631 \u062d\u0627\u0644 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 filename \u0641\u06cc\u0644\u062f \u0627\u0632 \u0633\u0648\u0627\u0628\u0642 \u06cc\u0627\u062f\u062f\u0627\u0634\u062a\u060c \u0645\u0637\u0645\u0626\u0646 \u0634\u0648\u06cc\u062f \u06a9\u0647 \u0622\u0646 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0647 \u0627\u06cc\u062f filename \u0633\u062a\u0648\u0646 \u062f\u0631 \u0645\u062c\u0645\u0648\u0639\u0647 \u062f\u0627\u062f\u0647 \u0634\u0645\u0627 \u0628\u0647 \u06cc\u0627\u062f \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f \u06a9\u0647 \u0641\u0627\u06cc\u0644 \u0645\u062c\u0645\u0648\u0639\u0647 \u062f\u0627\u062f\u0647 \u0634\u0645\u0627 \u0646\u0634\u0627\u0646 \u062f\u0647\u0646\u062f\u0647 \u0631\u06a9\u0648\u0631\u062f\u0647\u0627\u06cc \u0645\u0648\u062c\u0648\u062f\u06cc\u062a \u06cc\u0627\u062f\u062f\u0627\u0634\u062a \u062f\u0631 CRM \u0627\u0633\u062a.<\/p>\n

\u0628\u0631\u0627\u06cc \u0645\u0631\u062c\u0639 \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0641\u0627\u06cc\u0644 dataset.csv \u0627\u0633\u062a \u06a9\u0647 \u0645\u0627 \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645\u060c<\/p>\n

\u062f\u0631 \u062d\u0627\u0644 \u062d\u0627\u0636\u0631 \u0633\u0628\u06a9 \u06a9\u0646\u062a\u0631\u0644 \u0647\u0627 \u0631\u0627 \u0646\u0627\u062f\u06cc\u062f\u0647 \u0628\u06af\u06cc\u0631\u06cc\u062f\u060c \u0645\u0627 \u0622\u0646\u0647\u0627 \u0631\u0627 \u062f\u0631 \u0628\u062e\u0634 \u0647\u0627\u06cc \u0628\u0639\u062f\u06cc \u0627\u0636\u0627\u0641\u0647 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f.<\/p>\n

\u062d\u0627\u0644 \u0648\u0642\u062a\u06cc \u06a9\u0627\u0631\u0628\u0631 \u06cc\u06a9 \u0641\u0627\u06cc\u0644 \u0631\u0627 \u0627\u0632 \u0645\u0646\u0648\u06cc \u0628\u0627\u0632\u0634\u0648 \u0627\u0646\u062a\u062e\u0627\u0628 \u0645\u06cc \u06a9\u0646\u062f\u060c \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u0645 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0622\u0646 \u0641\u0627\u06cc\u0644 \u0631\u0627 \u062f\u0631\u06cc\u0627\u0641\u062a \u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u06af\u0641\u062a\u0647 \u0634\u062f \u062f\u0631 documentbody \u0641\u06cc\u0644\u062f \u0631\u06a9\u0648\u0631\u062f \u06cc\u0627\u062f\u062f\u0627\u0634\u062a<\/p>\n

\u0628\u0631\u0627\u06cc \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u0622\u0646\u060c \u0627\u062c\u0627\u0632\u0647 \u062f\u0647\u06cc\u062f \u06cc\u06a9 \u062a\u0627\u0628\u0639 \u0628\u0647 \u0646\u0627\u0645 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u0645 handleSelectFile \u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631 \u06cc\u06a9 \u0641\u0627\u06cc\u0644 \u0631\u0627 \u062f\u0631 \u0645\u0646\u0648\u06cc \u06a9\u0634\u0648\u06cc\u06cc \u0627\u0646\u062a\u062e\u0627\u0628 \u0645\u06cc \u06a9\u0646\u062f\u060c \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0645\u06cc \u0634\u0648\u062f.<\/p>\n

\u0628\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u06cc\u06a9 \u0641\u0627\u06cc\u0644\u060c \u0627\u06cc\u0646 \u062a\u0627\u0628\u0639 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0622\u0646 \u0641\u0627\u06cc\u0644 \u0631\u0627 \u0627\u0632 \u0641\u0627\u06cc\u0644 \u0628\u0627\u0632\u06cc\u0627\u0628\u06cc \u0645\u06cc \u06a9\u0646\u062f documentbody \u0641\u06cc\u0644\u062f\u060c \u0648 \u0633\u067e\u0633 \u0627\u06cc\u0646 \u062f\u0627\u062f\u0647 \u0647\u0627 \u0631\u0627 \u06a9\u0647 \u062f\u0631 \u0642\u0627\u0644\u0628 \u0631\u0634\u062a\u0647 Base64 \u0647\u0633\u062a\u0646\u062f \u0628\u0647 \u06cc\u06a9 \u062a\u0628\u062f\u06cc\u0644 \u0645\u06cc \u06a9\u0646\u062f excelWorkbook \u0634\u06cc \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 XLSX.<\/p>\n

\u062a\u0648\u062c\u0647: excelWorkbook \u0634\u06cc \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0641\u0627\u06cc\u0644 \u0627\u0646\u062a\u062e\u0627\u0628\u06cc \u0641\u0639\u0644\u06cc \u0631\u0627 \u0630\u062e\u06cc\u0631\u0647 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n

import * as XLSX from ‘xlsx’;<\/p>\n

\/\/ …<\/p>\n

function handleSelectFile(event: React.FormEventHTMLDivElement>, option?: IDropdownOption)
\n{
\n if(option === undefined) return; \/\/ Return if no option is selected<\/p>\n

const note = notes[option.key as number]; \/\/ Get note record using index
\n const base64Data = note[“documentbody”] ?? “”; \/\/ Get file data of that note record
\n const workbook = XLSX.read(base64Data, { type: ‘base64’, cellDates: true }); \/\/ Converts base64 data to excel workbook object
\n setExcelWorkbook(workbook);<\/p>\n

console.log(workbook);
\n}<\/p>\n

const [notes, setNotes] = useStateArrayRecordstring, any>>>([]); \/\/ Array of JSON objects
\nconst [fileOptions, setFileOptions] = useStateIDropdownOption[]>([]); \/\/ Array of IDropdownOption objects
\nconst [excelWorkbook, setExcelWorkbook] = useStateXLSX.WorkBook>(XLSX.utils.book_new()); \/\/ Excel workbook object<\/p>\n

\/\/ …<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0633\u067e\u0633 \u0627\u06cc\u0646 \u062a\u0627\u0628\u0639 \u0631\u0627 \u062f\u0631 \u0642\u0633\u0645\u062a \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f onChange \u0648\u06cc\u0698\u06af\u06cc \u06a9\u0634\u0648\u06cc\u06cc\u060c \u06a9\u0647 \u0647\u0631 \u0632\u0645\u0627\u0646 \u06a9\u0647 \u0641\u0627\u06cc\u0644\u06cc \u062f\u0631 \u0645\u0646\u0648\u06cc \u06a9\u0634\u0648\u06cc\u06cc \u0627\u0646\u062a\u062e\u0627\u0628 \u0634\u0648\u062f\u060c \u0627\u06cc\u0646 \u062a\u0627\u0628\u0639 \u0631\u0627 \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n

return (
\n Stack>
\n Dropdown placeholder=”Select File” options={fileOptions} onChange={handleSelectFile}\/>
\n DetailsList items={notes}\/>
\n \/Stack>
\n);<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0642\u0628\u0644 \u0627\u0632 \u0627\u0639\u062a\u0628\u0627\u0631\u0633\u0646\u062c\u06cc \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc\u200c\u0647\u0627\u060c \u0627\u0628\u062a\u062f\u0627 \u0633\u062a\u0648\u0646\u06cc \u0628\u0647 \u0646\u0627\u0645 \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645 documentbody \u062f\u0631 \u0641\u0627\u06cc\u0644 \u0645\u062c\u0645\u0648\u0639\u0647 \u062f\u0627\u062f\u0647 \u0646\u0645\u0648\u0646\u0647 \u0645\u0627 \u06a9\u0647 \u062d\u0627\u0648\u06cc \u0645\u0642\u0627\u062f\u06cc\u0631 \u0631\u0634\u062a\u0647 base64 \u06cc\u06a9 \u0641\u0627\u06cc\u0644 \u0627\u06a9\u0633\u0644 \u0627\u0633\u062a. \u0628\u0631\u0627\u06cc \u062a\u0628\u062f\u06cc\u0644 \u06cc\u06a9 \u0641\u0627\u06cc\u0644 \u0627\u06a9\u0633\u0644 \u0628\u0647 \u0631\u0634\u062a\u0647 base64 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0632 \u0627\u06cc\u0646 \u0627\u0628\u0632\u0627\u0631 \u0622\u0646\u0644\u0627\u06cc\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n

\u062a\u0648\u062c\u0647: documentbody \u0645\u0642\u062f\u0627\u0631 \u0646\u0634\u0627\u0646 \u062f\u0647\u0646\u062f\u0647 \u0641\u0627\u06cc\u0644 \u0627\u06a9\u0633\u0644 \u0627\u0633\u062a \u06a9\u0647 \u0628\u0647 \u0631\u06a9\u0648\u0631\u062f\u0647\u0627\u06cc \u06cc\u0627\u062f\u062f\u0627\u0634\u062a \u0645\u0627 \u062f\u0631 CRM \u067e\u06cc\u0648\u0633\u062a \u0645\u06cc \u0634\u0648\u062f<\/p>\n

\u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0646\u0645\u0648\u0646\u0647 \u0641\u0627\u06cc\u0644\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0631\u062f\u06cc\u0645\u060c \u06a9\u0647 \u062f\u0631 \u0622\u0646 \u0633\u0644\u0648\u0644 F2 \u062d\u0627\u0648\u06cc \u06cc\u06a9 \u0631\u0634\u062a\u0647 \u06a9\u062f\u06af\u0630\u0627\u0631\u06cc \u0634\u062f\u0647 base64 \u0627\u0632 \u06cc\u06a9 \u0641\u0627\u06cc\u0644 \u0627\u06a9\u0633\u0644 \u0627\u0633\u062a.<\/p>\n

\u062d\u0627\u0644\u0627 \u0648\u0642\u062a\u06cc \u067e\u0631\u0648\u0698\u0647 \u062e\u0648\u062f \u0631\u0627 \u0645\u06cc \u0633\u0627\u0632\u06cc\u0645 \u0648 \u0641\u0627\u06cc\u0644 \u0631\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u0645\u06cc \u06a9\u0646\u06cc\u0645 Sales.xlsx\u060c \u0622\u0646 \u0641\u0627\u06cc\u0644 documentbody \u0645\u0642\u062f\u0627\u0631 \u0628\u0627\u0632\u06cc\u0627\u0628\u06cc \u0645\u06cc \u0634\u0648\u062f \u0648 \u0628\u0647 \u0634\u06cc\u0621 \u0627\u06a9\u0633\u0644 \u06a9\u062a\u0627\u0628 \u06a9\u0627\u0631 \u062a\u0628\u062f\u06cc\u0644 \u0645\u06cc \u0634\u0648\u062f \u0648 \u0628\u0647 \u06a9\u0646\u0633\u0648\u0644 \u0648\u0627\u0631\u062f \u0645\u06cc \u0634\u0648\u062f.<\/p>\n

\u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u0628\u0631\u06af\u0647 \u06a9\u0634\u0648\u06cc\u06cc<\/p>\n

\u062a\u0627 \u0627\u06cc\u0646 \u0645\u0631\u062d\u0644\u0647 \u06a9\u0647 \u0645\u0648\u0641\u0642 \u0628\u0647 \u062f\u0631\u06cc\u0627\u0641\u062a excelWorkbook \u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631 \u06cc\u06a9 \u0641\u0627\u06cc\u0644 \u0631\u0627 \u062f\u0631 \u0645\u0646\u0648\u06cc \u06a9\u0634\u0648\u06cc\u06cc \u0627\u0646\u062a\u062e\u0627\u0628 \u0645\u06cc \u06a9\u0646\u062f\u060c \u062f\u0631 \u06a9\u062f \u0645\u0627 \u0634\u06cc\u0621 \u0642\u0631\u0627\u0631 \u0645\u06cc \u06af\u06cc\u0631\u062f. \u062f\u0631 \u0645\u0631\u0627\u062d\u0644 \u0628\u0639\u062f\u06cc\u060c \u0627\u06a9\u0646\u0648\u0646 \u0645\u06cc\u200c\u062e\u0648\u0627\u0647\u06cc\u0645 \u062a\u0645\u0627\u0645 \u0628\u0631\u06af\u0647\u200c\u0647\u0627\u06cc \u0645\u0648\u062c\u0648\u062f \u062f\u0631 \u0627\u06cc\u0646 \u06a9\u062a\u0627\u0628 \u06a9\u0627\u0631 \u0631\u0627 \u062f\u0631\u06cc\u0627\u0641\u062a \u06a9\u0631\u062f\u0647 \u0648 \u062f\u0631 \u06cc\u06a9 \u0628\u0631\u06af\u0647 \u06a9\u0634\u0648\u06cc\u06cc \u062c\u062f\u0627\u06af\u0627\u0646\u0647 \u0646\u0645\u0627\u06cc\u0634 \u062f\u0647\u06cc\u0645.<\/p>\n

\u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u0627\u06a9\u0646\u0648\u0646 \u06a9\u0646\u062a\u0631\u0644 \u06a9\u0634\u0648\u06cc\u06cc \u0628\u0631\u06af\u0647 \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u0644\u06cc\u0633\u062a \u0628\u0631\u06af\u0647 \u0647\u0627\u06cc \u0645\u0648\u062c\u0648\u062f \u062f\u0631 \u062f\u0627\u062e\u0644 \u0645\u0627 \u0631\u0627 \u0646\u0645\u0627\u06cc\u0634 \u0645\u06cc \u062f\u0647\u062f excelWorkbook \u0634\u06cc \u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631 \u06cc\u06a9 \u0628\u0631\u06af\u0647 \u0631\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u0645\u06cc \u06a9\u0646\u062f\u060c \u0645\u0627 \u0631\u062f\u06cc\u0641 \u0647\u0627\/\u0633\u0648\u0627\u0628\u0642 \u0627\u06cc\u0646 \u0628\u0631\u06af\u0647 \u0631\u0627 \u0628\u0647 \u0641\u0631\u0645\u062a \u0622\u0631\u0627\u06cc\u0647 json \u062a\u0628\u062f\u06cc\u0644 \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u0648 \u0622\u0646 \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0645\u0627 \u0646\u0645\u0627\u06cc\u0634 \u0645\u06cc \u062f\u0647\u06cc\u0645. DetailsList \u06a9\u0646\u062a\u0631\u0644 \u06a9\u0646\u06cc\u062f.<\/p>\n

\u0628\u0631\u0627\u06cc \u0622\u0646\u060c \u0627\u0628\u062a\u062f\u0627 \u06cc\u06a9 \u062a\u0627\u0628\u0639 \u0628\u0647 \u0646\u0627\u0645 \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u06cc\u0645 createSheetOptions \u06a9\u0647 \u0627\u0632 \u0637\u0631\u06cc\u0642 \u0622\u0646 \u062a\u062c\u0632\u06cc\u0647 \u062e\u0648\u0627\u0647\u062f \u0634\u062f workbook \u0634\u06cc \u0648 \u0644\u06cc\u0633\u062a\u06cc \u0627\u0632 \u06af\u0632\u06cc\u0646\u0647 \u0647\u0627\u06cc \u062d\u0627\u0648\u06cc \u0646\u0627\u0645 \u0628\u0631\u06af\u0647 \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u062f\u060c \u0645\u0634\u0627\u0628\u0647 \u06a9\u0627\u0631\u06cc \u06a9\u0647 \u0628\u0631\u0627\u06cc \u06af\u0632\u06cc\u0646\u0647 \u0647\u0627\u06cc \u06a9\u0634\u0648\u06cc\u06cc \u0641\u0627\u06cc\u0644 \u0627\u0646\u062c\u0627\u0645 \u062f\u0627\u062f\u06cc\u0645.<\/p>\n

\/\/ …<\/p>\n

function createSheetOptions(workbook: XLSX.WorkBook)
\n{
\n const options: IDropdownOption[] = [];
\n for(const [index, sheetName] of workbook.SheetNames.entries())
\n {
\n const option = { key: index, text: sheetName };
\n options.push(option);
\n }
\n return options;
\n}<\/p>\n

\/\/ …<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u062f\u0631 \u0645\u0631\u062d\u0644\u0647 \u0628\u0639\u062f\u060c \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u06cc\u0646 \u062a\u0627\u0628\u0639\u060c \u06af\u0632\u06cc\u0646\u0647 \u0647\u0627\u06cc \u0627\u06cc\u0646 \u0628\u0631\u06af\u0647 \u0631\u0627 \u062f\u0631 \u06cc\u06a9 \u0630\u062e\u06cc\u0631\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645 sheetOptions \u0645\u062a\u063a\u06cc\u0631\u060c \u0648 \u0627\u06cc\u0646 \u06af\u0632\u06cc\u0646\u0647 \u0647\u0627 \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 a \u0646\u0645\u0627\u06cc\u0634 \u0645\u06cc \u062f\u0647\u062f Dropdown \u06a9\u0646\u062a\u0631\u0644 \u06a9\u0646\u06cc\u062f.<\/p>\n

\u06cc\u0627\u062f\u0634 \u0628\u062e\u06cc\u0631 \u062f\u0627\u0634\u062a\u06cc\u0645 \u0632\u0646\u06af \u0645\u06cc\u0632\u062f\u06cc\u0645 createFileOptions \u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u0645\u062c\u0645\u0648\u0639\u0647 \u062f\u0627\u062f\u0647 \u062f\u0631 \u06a9\u0646\u062a\u0631\u0644 \u0645\u0627 \u0627\u0632 \u0631\u0648\u06cc \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u06cc\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u0645\u06cc \u06a9\u0646\u062f useEffect \u062a\u0627\u0628\u0639 \u062d\u0627\u0644\u0627 \u0686\u0647 \u0632\u0645\u0627\u0646\u06cc \u0628\u0627\u06cc\u062f \u0628\u0627 \u0622\u0646 \u062a\u0645\u0627\u0633 \u0628\u06af\u06cc\u0631\u06cc\u0645 createSheetOptions ?<\/p>\n

\u062f\u0631\u0633\u062a\u0647! \u0628\u0627\u06cc\u062f \u0628\u0647 \u0645\u062d\u0636 \u0627\u06cc\u0646\u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631 \u06cc\u06a9 \u0641\u0627\u06cc\u0644 \u0631\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0631\u062f\u060c \u06cc\u0639\u0646\u06cc \u062f\u0627\u062e\u0644\u060c \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0634\u0648\u062f handleSelectFile \u062a\u0627\u0628\u0639 \u0628\u0627 \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0647\u0631 \u0632\u0645\u0627\u0646 \u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631 \u06cc\u06a9 \u0641\u0627\u06cc\u0644 \u0631\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u062f\u060c \u0645\u0627 sheetOptions \u0628\u0631 \u0627\u0633\u0627\u0633 \u0641\u0627\u06cc\u0644 \u0627\u0646\u062a\u062e\u0627\u0628\u06cc \u0628\u0647 \u0631\u0648\u0632 \u0645\u06cc \u0634\u0648\u062f.<\/p>\n

\u0628\u06cc\u0627\u06cc\u06cc\u062f \u0628\u0647 \u0631\u0648\u0632 \u0631\u0633\u0627\u0646\u06cc \u06a9\u0646\u06cc\u0645 handleSelectFile \u0639\u0645\u0644\u06a9\u0631\u062f \u0628\u0631\u0627\u06cc \u0631\u0633\u06cc\u062f\u0646 \u0628\u0647 \u0647\u0645\u0627\u0646\u060c<\/p>\n

\/\/ …<\/p>\n

function handleSelectFile(event: React.FormEventHTMLDivElement>, option?: IDropdownOption)
\n{
\n if(option === undefined) return; \/\/ Return if no option is selected<\/p>\n

const note = notes[option.key as number]; \/\/ Get note record using index
\n const base64Data = note[“documentbody”] ?? “”; \/\/ Get file data
\n const workbook = XLSX.read(base64Data, { type: ‘base64’, cellDates: true }); \/\/ Converts base64 data to excel workbook object
\n setExcelWorkbook(workbook);<\/p>\n

const sheetOptionsRecords = createSheetOptions(workbook);
\n setSheetOptions(sheetOptionsRecords);
\n}<\/p>\n

const [notes, setNotes] = useStateArrayRecordstring, any>>>([]); \/\/ Array of JSON objects
\nconst [fileOptions, setFileOptions] = useStateIDropdownOption[]>([]); \/\/ Array of IDropdownOption objects
\nconst [excelWorkbook, setExcelWorkbook] = useStateXLSX.WorkBook>(XLSX.utils.book_new()); \/\/ Excel workbook object
\nconst [sheetOptions, setSheetOptions] = useStateIDropdownOption[]>([]); \/\/ Array of IDropdownOption objects<\/p>\n

\/\/ …<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u062d\u0627\u0644\u0627 \u0628\u06cc\u0627\u06cc\u06cc\u062f \u06cc\u06a9 \u06a9\u0646\u062a\u0631\u0644 \u06a9\u0634\u0648\u06cc\u06cc \u062c\u062f\u06cc\u062f \u062f\u0631 \u0639\u0628\u0627\u0631\u062a \u0628\u0627\u0632\u06af\u0634\u062a \u062e\u0648\u062f \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u0627\u06cc\u0646\u0647\u0627 \u0631\u0627 \u0646\u0645\u0627\u06cc\u0634 \u0645\u06cc \u062f\u0647\u062f sheetOptions \u0628\u0647 \u06a9\u0627\u0631\u0628\u0631.<\/p>\n

return (
\n Stack>
\n Stack horizontal>
\n Dropdown placeholder=”Select File” options={fileOptions} onChange={handleSelectFile}\/>
\n Dropdown placeholder=”Select Sheet” options={sheetOptions} \/>
\n \/Stack>
\n DetailsList items={notes}\/>
\n \/Stack>
\n);<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0645\u0627 \u0628\u0631\u06af\u0647\u200c\u0647\u0627 \u0631\u0627 \u062f\u0631 \u0641\u0647\u0631\u0633\u062a \u06a9\u0634\u0648\u06cc\u06cc \u062e\u0648\u062f \u062f\u0631\u06cc\u0627\u0641\u062a \u06a9\u0631\u062f\u06cc\u0645\u060c \u0628\u0631\u0627\u06cc \u0645\u0631\u062d\u0644\u0647 \u0628\u0639\u062f\u06cc\u060c \u0645\u06cc\u200c\u062e\u0648\u0627\u0647\u06cc\u0645 \u0647\u0631 \u0632\u0645\u0627\u0646 \u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631 \u0628\u0631\u06af\u0647\u200c\u0627\u06cc \u0631\u0627 \u062f\u0631 \u0641\u0647\u0631\u0633\u062a \u06a9\u0634\u0648\u06cc\u06cc \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0631\u062f\u060c \u0631\u062f\u06cc\u0641\u200c\u0647\u0627\/\u0633\u0648\u0627\u0628\u0642 \u0628\u0631\u06af\u0647 \u0628\u0627\u06cc\u062f \u062f\u0631 \u0635\u0641\u062d\u0647 \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0634\u0648\u0646\u062f. DetailsList \u06a9\u0646\u062a\u0631\u0644 \u06a9\u0646\u06cc\u062f.<\/p>\n

\u0628\u0631\u0627\u06cc \u0631\u0633\u06cc\u062f\u0646 \u0628\u0647 \u0622\u0646\u060c \u0627\u062c\u0627\u0632\u0647 \u062f\u0647\u06cc\u062f \u06cc\u06a9 \u062a\u0627\u0628\u0639 \u0628\u0647 \u0646\u0627\u0645 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u0645 handleSelectSheet \u0647\u0631 \u0632\u0645\u0627\u0646 \u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631 \u0628\u0631\u06af\u0647 \u0631\u0627 \u062f\u0631 \u0645\u0646\u0648\u06cc \u06a9\u0634\u0648\u06cc\u06cc \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u062f\u060c \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0645\u06cc \u0634\u0648\u062f.<\/p>\n

\u0627\u06cc\u0646 \u062a\u0627\u0628\u0639 \u0628\u0631\u06af\u0647 \u0627\u0646\u062a\u062e\u0627\u0628 \u0634\u062f\u0647 \u0641\u0639\u0644\u06cc \u0631\u0627 \u0627\u0632 excelWorkbook \u0634\u06cc \u062f\u0631 \u06a9\u062f \u0645\u0627 \u0630\u062e\u06cc\u0631\u0647 \u0645\u06cc \u0634\u0648\u062f \u0648 \u0622\u0646 \u0631\u06a9\u0648\u0631\u062f\/\u0631\u062f\u06cc\u0641 \u0628\u0631\u06af\u0647 \u0631\u0627 \u0628\u0647 \u06cc\u06a9 \u0622\u0631\u0627\u06cc\u0647 json \u062a\u0628\u062f\u06cc\u0644 \u0645\u06cc \u06a9\u0646\u062f. \u0633\u067e\u0633 \u0627\u06cc\u0646 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc json \u0631\u0627 \u062f\u0631 \u06cc\u06a9 \u0645\u062a\u063a\u06cc\u0631 \u062d\u0627\u0644\u062a \u0628\u0647 \u0646\u0627\u0645 \u0630\u062e\u06cc\u0631\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645 rows \u06a9\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0628\u0647 \u0645\u0627 \u0645\u0646\u062a\u0642\u0644 \u0634\u0648\u062f DetailsList \u06a9\u0646\u062a\u0631\u0644 \u06a9\u0646\u06cc\u062f.<\/p>\n

function handleSelectSheet(event: React.FormEventHTMLDivElement>, option?: IDropdownOption)
\n{
\n if(option === undefined) return; \/\/ Return if no option is selected<\/p>\n

const sheet = excelWorkbook.Sheets[option.text as string]; \/\/ Get sheet record using SheetName
\n const rowRecords: Recordstring, any>[] = XLSX.utils.sheet_to_json(sheet, {raw: false}); \/\/ Sheet Records in JSON Array
\n setRows(rowRecords);
\n}<\/p>\n

const [notes, setNotes] = useStateArrayRecordstring, any>>>([]); \/\/ Array of JSON objects
\nconst [fileOptions, setFileOptions] = useStateIDropdownOption[]>([]); \/\/ Array of IDropdownOption objects
\nconst [excelWorkbook, setExcelWorkbook] = useStateXLSX.WorkBook>(XLSX.utils.book_new()); \/\/ Excel workbook object
\nconst [sheetOptions, setSheetOptions] = useStateIDropdownOption[]>([]); \/\/ Array of IDropdownOption objects
\nconst [rows, setRows] = useStateArrayRecordstring, any>>>([]); \/\/ Array of JSON objects<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u062d\u0627\u0644\u0627 \u0627\u06cc\u0646 \u062a\u0627\u0628\u0639 \u0631\u0627 \u062f\u0631 \u0642\u0633\u0645\u062a \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f onChange \u0648\u06cc\u0698\u06af\u06cc \u0628\u0631\u06af\u0647 \u06a9\u0634\u0648\u06cc\u06cc \u06a9\u0647 \u0627\u06cc\u0646 \u062a\u0627\u0628\u0639 \u0631\u0627 \u0647\u0646\u06af\u0627\u0645 \u0627\u0646\u062a\u062e\u0627\u0628 \u06cc\u06a9 \u0628\u0631\u06af\u0647 \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0628\u0647 \u0631\u0648\u0632 \u0631\u0633\u0627\u0646\u06cc \u0645\u06cc \u06a9\u0646\u062f items \u062f\u0627\u0631\u0627\u06cc\u06cc \u0627\u0632 DetailsList \u06a9\u0646\u062a\u0631\u0644 \u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 rows \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc\u06cc \u06a9\u0647 \u0634\u0627\u0645\u0644 \u0633\u0648\u0627\u0628\u0642 \u0628\u0631\u06af\u0647 \u0627\u0646\u062a\u062e\u0627\u0628\u06cc \u0645\u0627 \u0647\u0633\u062a\u0646\u062f.<\/p>\n

return (
\n Stack>
\n Stack horizontal>
\n Dropdown placeholder=”Select File” options={fileOptions} onChange={handleSelectFile}\/>
\n Dropdown placeholder=”Select Sheet” options={sheetOptions} onChange={handleSelectSheet} \/>
\n \/Stack>
\n DetailsList items={rows}\/>
\n \/Stack>
\n);<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0641\u0632\u0648\u062f\u0646 \u062f\u06a9\u0645\u0647 \u062f\u0627\u0646\u0644\u0648\u062f<\/p>\n

\u0642\u0628\u0644 \u0627\u0632 \u0627\u06cc\u0646\u06a9\u0647 \u0628\u0647 \u062c\u0644\u0648 \u0628\u0631\u0648\u06cc\u0645 \u0648 \u06a9\u0646\u062a\u0631\u0644 \u062e\u0648\u062f \u0631\u0627 \u0622\u0632\u0645\u0627\u06cc\u0634 \u06a9\u0646\u06cc\u0645\u060c \u0627\u062c\u0627\u0632\u0647 \u062f\u0647\u06cc\u062f \u0627\u0628\u062a\u062f\u0627 \u0642\u0633\u0645\u062a \u0646\u0647\u0627\u06cc\u06cc \u0639\u0645\u0644\u06a9\u0631\u062f \u06a9\u0646\u062a\u0631\u0644 PCF \u062e\u0648\u062f \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u0645\u060c \u06cc\u0639\u0646\u06cc \u0642\u0627\u0628\u0644\u06cc\u062a \u062f\u0627\u0646\u0644\u0648\u062f \u0641\u0627\u06cc\u0644.<\/p>\n

\u0647\u0631 \u0632\u0645\u0627\u0646 \u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631 \u0628\u0631 \u0631\u0648\u06cc \u062f\u06a9\u0645\u0647 \u062f\u0627\u0646\u0644\u0648\u062f \u06a9\u0644\u06cc\u06a9 \u06a9\u0646\u062f\u060c \u0641\u0627\u06cc\u0644 \u0627\u0646\u062a\u062e\u0627\u0628\u06cc \u0641\u0639\u0644\u06cc \u0631\u0627 \u062f\u0627\u0646\u0644\u0648\u062f \u0645\u06cc \u06a9\u0646\u062f (\u0630\u062e\u06cc\u0631\u0647 \u0634\u062f\u0647 \u062f\u0631 excelWorkbook \u0634\u06cc) \u062f\u0631 \u0633\u06cc\u0633\u062a\u0645 \u06a9\u0627\u0631\u0628\u0631.<\/p>\n

\u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u0627\u06cc\u0646 \u0631\u0627 \u0628\u0627 \u0627\u062c\u0631\u0627\u06cc \u0633\u0627\u062f\u0647 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u0645 XLSX.writeFile() \u0631\u0648\u0634 \u0628\u0631 \u0631\u0648\u06cc onClick \u06a9\u0646\u062a\u0631\u0644 \u062f\u06a9\u0645\u0647 \u0627\u06cc\u0646 \u0645\u062a\u062f \u0634\u06cc\u0621 \u06a9\u062a\u0627\u0628 \u06a9\u0627\u0631 \u0631\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u067e\u0627\u0631\u0627\u0645\u062a\u0631 \u0627\u0648\u0644 \u0648 \u0646\u0627\u0645 \u0641\u0627\u06cc\u0644\u06cc \u06a9\u0647 \u0628\u0627\u06cc\u062f \u062f\u0627\u0646\u0644\u0648\u062f \u0634\u0648\u062f \u0631\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u067e\u0627\u0631\u0627\u0645\u062a\u0631 \u062f\u0648\u0645 \u062f\u0631 \u0646\u0638\u0631 \u0645\u06cc \u06af\u06cc\u0631\u062f.<\/p>\n

\u0628\u06cc\u0627\u06cc\u06cc\u062f \u06cc\u06a9 \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u0645 PrimaryButton \u0628\u0647 \u0647\u0645\u0631\u0627\u0647 \u0633\u0627\u06cc\u0631 \u06a9\u0646\u062a\u0631\u0644 \u0647\u0627\u06cc \u06a9\u0634\u0648\u06cc\u06cc \u06a9\u0646\u062a\u0631\u0644 \u06a9\u0646\u06cc\u062f \u0648 \u062a\u0627\u0628\u0639\u06cc \u0628\u0647 \u0646\u0627\u0645 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f handleDownload \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 onClick \u0648\u06cc\u0698\u06af\u06cc \u06a9\u0646\u062a\u0631\u0644 \u062f\u06a9\u0645\u0647<\/p>\n

\/\/ …<\/p>\n

function handleDownload()
\n{
\n XLSX.writeFile(excelWorkbook, ‘download.xlsx’);
\n}<\/p>\n

\/\/ …<\/p>\n

return (
\n Stack>
\n Stack horizontal>
\n Dropdown placeholder=”Select File” options={fileOptions} onChange={handleSelectFile}\/>
\n Dropdown placeholder=”Select Sheet” options={sheetOptions} onChange={handleSelectSheet} \/>
\n PrimaryButton text=”Download” allowDisabledFocus onClick={handleDownload}\/>
\n \/Stack>
\n DetailsList items={rows}\/>
\n \/Stack>
\n);<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u062d\u0627\u0644 \u0628\u0627 \u06a9\u0644\u06cc\u06a9 \u0628\u0631 \u0631\u0648\u06cc \u062f\u06a9\u0645\u0647 \u062f\u0627\u0646\u0644\u0648\u062f \u0641\u0627\u06cc\u0644 \u0627\u0646\u062a\u062e\u0627\u0628\u06cc \u062f\u0631 \u0633\u06cc\u0633\u062a\u0645 \u0634\u0645\u0627 \u062f\u0627\u0646\u0644\u0648\u062f \u0645\u06cc \u0634\u0648\u062f.<\/p>\n

\u062f\u0631 \u0627\u06cc\u0646 \u0645\u0631\u062d\u0644\u0647 \u0634\u0645\u0627 App.tsx \u06a9\u062f \u0628\u0627\u06cc\u062f \u0686\u06cc\u0632\u06cc \u0634\u0628\u06cc\u0647 \u0628\u0647 \u0627\u06cc\u0646 \u0628\u0627\u0634\u062f:<\/p>\n

import * as React from ‘react’;
\nimport { useState, useEffect } from ‘react’;
\nimport { IInputs } from “.\/generated\/ManifestTypes”;
\nimport { DetailsList, DetailsListLayoutMode, Dropdown, IDropdownOption, PrimaryButton, Stack } from ‘@fluentui\/react’;
\nimport * as XLSX from ‘xlsx’;
\nimport { text } from ‘stream\/consumers’;<\/p>\n

export function PCFControl({sampleDataSet} : IInputs) {<\/p>\n

function parseDatasetToJSON()
\n {
\n const jsonData = [];
\n for(const recordID of sampleDataSet.sortedRecordIds)
\n {
\n \/\/ Dataset record
\n const record = sampleDataSet.records[recordID];
\n const temp: Recordstring, any> = {};<\/p>\n

for(const column of sampleDataSet.columns)
\n {
\n temp[column.name] = record.getFormattedValue(column.name)
\n }
\n jsonData.push(temp);
\n }
\n return jsonData;
\n }<\/p>\n

function createFileOptions(notes: ArrayRecordstring, any>>)
\n {
\n const options: IDropdownOption[] = [];<\/p>\n

for(const [index, note] of notes.entries())
\n {
\n const option = { key: index, text: note[“filename”] ?? “No File” };
\n options.push(option);
\n }
\n return options;
\n }<\/p>\n

function createSheetOptions(workbook: XLSX.WorkBook)
\n {
\n const options: IDropdownOption[] = [];
\n for(const [index, sheetName] of workbook.SheetNames.entries())
\n {
\n const option = { key: index, text: sheetName };
\n options.push(option);
\n }
\n return options;
\n }<\/p>\n

function handleSelectFile(event: React.FormEventHTMLDivElement>, option?: IDropdownOption)
\n {
\n if(option === undefined) return; \/\/ Return if no option is selected<\/p>\n

const note = notes[option.key as number]; \/\/ Get note record using index
\n const base64Data = note[“documentbody”] ?? “”; \/\/ Get file data
\n const workbook = XLSX.read(base64Data, { type: ‘base64’, cellDates: true }); \/\/ Converts base64 data to excel workbook object
\n setExcelWorkbook(workbook);<\/p>\n

const sheetOptionsRecords = createSheetOptions(workbook);
\n setSheetOptions(sheetOptionsRecords);
\n }<\/p>\n

function handleSelectSheet(event: React.FormEventHTMLDivElement>, option?: IDropdownOption)
\n {
\n if(option === undefined) return; \/\/ Return if no option is selected<\/p>\n

const sheet = excelWorkbook.Sheets[option.text as string]; \/\/ Get sheet record using SheetName
\n const rowRecords: Recordstring, any>[] = XLSX.utils.sheet_to_json(sheet, {raw: false}); \/\/ Sheet Records in JSON Array
\n setRows(rowRecords);
\n }<\/p>\n

function handleDownload()
\n {
\n XLSX.writeFile(excelWorkbook, ‘download.xlsx’);
\n }<\/p>\n

const [notes, setNotes] = useStateArrayRecordstring, any>>>([]); \/\/ Array of JSON objects
\n const [fileOptions, setFileOptions] = useStateIDropdownOption[]>([]); \/\/ Array of IDropdownOption objects
\n const [excelWorkbook, setExcelWorkbook] = useStateXLSX.WorkBook>(XLSX.utils.book_new()); \/\/ Excel workbook object
\n const [sheetOptions, setSheetOptions] = useStateIDropdownOption[]>([]); \/\/ Array of IDropdownOption objects
\n const [rows, setRows] = useStateArrayRecordstring, any>>>([]); \/\/ Array of JSON objects<\/p>\n

useEffect(() => {
\n const notesRecords = parseDatasetToJSON();
\n const fileOptionsRecords = createFileOptions(notesRecords);<\/p>\n

setNotes(notesRecords);
\n setFileOptions(fileOptionsRecords);<\/p>\n

}, [sampleDataSet]); \/\/ On dataset change<\/p>\n

return (
\n Stack>
\n Stack horizontal>
\n Dropdown placeholder=”Select File” options={fileOptions} onChange={handleSelectFile}\/>
\n Dropdown placeholder=”Select Sheet” options={sheetOptions} onChange={handleSelectSheet} \/>
\n PrimaryButton text=”Download” allowDisabledFocus onClick={handleDownload}\/>
\n \/Stack>
\n DetailsList items={rows}\/>
\n \/Stack>
\n );
\n}<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u06a9\u0646\u0648\u0646 \u0648\u0642\u062a\u06cc \u06a9\u0646\u062a\u0631\u0644 \u0631\u0627 \u0645\u06cc\u200c\u0633\u0627\u0632\u06cc\u062f\u060c \u062f\u0631 \u0645\u0646\u0648\u06cc \u06a9\u0634\u0648\u06cc\u06cc \u0641\u0627\u06cc\u0644\u200c\u0647\u0627\u060c \u0647\u0645\u0647 \u0641\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc \u0641\u0647\u0631\u0633\u062a \u0634\u062f\u0647 \u062a\u0648\u0633\u0637 \u0631\u0627 \u0645\u0634\u0627\u0647\u062f\u0647 \u062e\u0648\u0627\u0647\u06cc\u062f \u06a9\u0631\u062f filename \u0633\u062a\u0648\u0646 (\u0627\u06cc\u0646 \u0646\u0634\u0627\u0646 \u062f\u0647\u0646\u062f\u0647 \u0646\u0627\u0645 \u0641\u0627\u06cc\u0644\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0628\u0647 \u0631\u06a9\u0648\u0631\u062f\u0647\u0627\u06cc \u06cc\u0627\u062f\u062f\u0627\u0634\u062a \u062f\u0631 CRM \u067e\u06cc\u0648\u0633\u062a \u0634\u062f\u0647 \u0627\u0633\u062a).<\/p>\n

\u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u06cc\u06a9 \u0641\u0627\u06cc\u0644 \u0631\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u0645\u06cc \u06a9\u0646\u06cc\u062f\u060c \u062f\u0631 \u06a9\u062f documentbody \u0627\u0631\u0632\u0634 (\u0627\u06cc\u0646 \u0646\u0634\u0627\u0646 \u062f\u0647\u0646\u062f\u0647 \u0641\u0627\u06cc\u0644 \u0648\u0627\u0642\u0639\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0628\u0647 \u0631\u06a9\u0648\u0631\u062f \u06cc\u0627\u062f\u062f\u0627\u0634\u062a \u062f\u0631 CRM \u067e\u06cc\u0648\u0633\u062a \u0634\u062f\u0647 \u0627\u0633\u062a) \u0627\u0632 \u0622\u0646 \u0641\u0627\u06cc\u0644 \u0628\u0647 \u06cc\u06a9 \u06a9\u062a\u0627\u0628 \u06a9\u0627\u0631 \u0627\u06a9\u0633\u0644 \u062a\u0628\u062f\u06cc\u0644 \u0645\u06cc\u200c\u0634\u0648\u062f \u0648 \u0628\u0631\u06af\u0647\u200c\u0647\u0627\u06cc \u0622\u0646 \u062f\u0631 \u0628\u0631\u06af\u0647\u200c\u0647\u0627\u06cc \u06a9\u0634\u0648\u06cc\u06cc \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f.<\/p>\n

\u067e\u0633 \u0627\u0632 \u0627\u0646\u062a\u062e\u0627\u0628 \u06cc\u06a9 \u0634\u06cc\u062a\u060c \u0631\u06a9\u0648\u0631\u062f\u0647\u0627\u06cc \u0622\u0646 \u0634\u06cc\u062a \u0628\u0647 \u0622\u0631\u0627\u06cc\u0647 json \u062a\u0628\u062f\u06cc\u0644 \u0634\u062f\u0647 \u0648 \u062f\u0631 \u0644\u06cc\u0633\u062a \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f.<\/p>\n

\u062a\u0648\u062c\u0647: \u0628\u0631\u0627\u06cc \u062a\u0628\u062f\u06cc\u0644 \u06cc\u06a9 \u0641\u0627\u06cc\u0644 \u0627\u06a9\u0633\u0644 \u0628\u0647 \u0631\u0634\u062a\u0647 base64 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0632 \u0627\u06cc\u0646 \u0627\u0628\u0632\u0627\u0631 \u0622\u0646\u0644\u0627\u06cc\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n

\u0628\u0631\u0627\u06cc \u0645\u0631\u062c\u0639\u060c \u0627\u06cc\u0646 \u0641\u0627\u06cc\u0644 \u0645\u062c\u0645\u0648\u0639\u0647 \u062f\u0627\u062f\u0647 \u0627\u06a9\u0633\u0644 \u0627\u0633\u062a \u06a9\u0647 \u0645\u0627 \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0631\u062f\u06cc\u0645\u060c<\/p>\n

\u06cc\u06a9 \u0638\u0627\u0647\u0631 \u0637\u0631\u0627\u062d\u06cc \u0631\u0627 \u0628\u0647 \u06a9\u0646\u062a\u0631\u0644 \u0647\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f<\/p>\n

\u06a9\u0627\u0631 \u0639\u0627\u0644\u06cc \u062a\u0627 \u0627\u06cc\u0646\u062c\u0627 \u062f\u0631 \u0622\u0645\u0648\u0632\u0634\u2026<\/p>\n

\u0627\u06a9\u0646\u0648\u0646 \u06a9\u0647 \u0639\u0645\u0644\u06a9\u0631\u062f \u0627\u0635\u0644\u06cc \u0627\u06cc\u0646 \u06a9\u0646\u062a\u0631\u0644 PCF \u0631\u0627 \u067e\u06cc\u0627\u062f\u0647\u200c\u0633\u0627\u0632\u06cc \u06a9\u0631\u062f\u0647\u200c\u0627\u06cc\u0645\u060c \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0628\u0631\u0627\u06cc \u062a\u062c\u0631\u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0628\u0647\u062a\u0631\u060c \u0633\u0628\u06a9\u06cc \u0628\u0647 \u06a9\u0646\u062a\u0631\u0644 \u062e\u0648\u062f \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u0645.<\/p>\n

\u06cc\u06a9 \u0641\u0627\u06cc\u0644 \u062c\u062f\u06cc\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f ControlStyles.tsx \u062f\u0631 \u067e\u0648\u0634\u0647 \u067e\u0631\u0648\u0698\u0647 \u062e\u0648\u062f \u0648 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u0633\u0628\u06a9 \u0632\u06cc\u0631 \u0631\u0627 \u062f\u0631 \u0622\u0646 \u0641\u0627\u06cc\u0644 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n

\/* ControlStyles.tsx *\/<\/p>\n

import { IStackTokens, IStackStyles, IDetailsListStyles, IDropdownStyles } from “@fluentui\/react”;<\/p>\n

export const stackTokens: IStackTokens = {
\n childrenGap: 10
\n};<\/p>\n

export const stackStyles: IStackStyles = {
\n root: {
\n padding: 10,
\n width: ‘100%’,
\n marginBottom: 20,
\n },
\n};<\/p>\n

export const detailsListStyles: IDetailsListStyles = {
\n root: {
\n overflowX: ‘auto’
\n },
\n contentWrapper: {
\n overflowY: ‘auto’,
\n width: ‘max-content’,
\n height: 450
\n },
\n focusZone : {},
\n headerWrapper: {}
\n}<\/p>\n

export const dropDownStyles : PartialIDropdownStyles> = {
\n root : {
\n width: ‘auto’,
\n minWidth: 200
\n }
\n}<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0633\u067e\u0633 \u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u0633\u0628\u06a9 \u0631\u0627 \u062f\u0631 \u0627\u0635\u0644\u06cc \u0645\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f App.tsx \u0641\u0627\u06cc\u0644 \u0648 \u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627 \u0631\u0627 \u062f\u0631 \u06a9\u0646\u062a\u0631\u0644 \u0647\u0627\u06cc Fluent UI \u0645\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n

\/\/ …<\/p>\n

import {stackTokens, stackStyles, detailsListStyles, dropDownStyles} from ‘.\/ControlStyles’<\/p>\n

\/\/ …<\/p>\n

return (
\n Stack tokens={stackTokens} styles={stackStyles}>
\n Stack horizontal tokens={stackTokens} styles={stackStyles}>
\n Dropdown
\n placeholder=”Select File”
\n options={fileOptions}
\n onChange={handleSelectFile}
\n styles={dropDownStyles}
\n \/>
\n Dropdown
\n placeholder=”Select Sheet”
\n options={sheetOptions}
\n onChange={handleSelectSheet}
\n styles={dropDownStyles}
\n defaultSelectedKey=’0′
\n \/>
\n PrimaryButton text=”Download” allowDisabledFocus onClick={handleDownload}\/>
\n \/Stack>
\n DetailsList
\n items={rows}
\n styles={detailsListStyles}
\n data-is-scrollable={false}
\n layoutMode={DetailsListLayoutMode.fixedColumns}
\n \/>
\n \/Stack>
\n);<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u067e\u0631\u0648\u0698\u0647 \u062e\u0648\u062f \u0631\u0627 \u0628\u0633\u0627\u0632\u06cc\u062f \u0648 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u06a9\u0646\u062a\u0631\u0644 PCF \u0627\u0633\u062a\u0627\u06cc\u0644 \u062e\u0648\u062f \u0631\u0627 \u062f\u0631 \u0639\u0645\u0644 \u0628\u0628\u06cc\u0646\u06cc\u062f\u060c<\/p>\n

\u062c\u0645\u0639 \u0628\u0646\u062f\u06cc \u0646\u0647\u0627\u06cc\u06cc<\/p>\n

\u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u06a9\u0646\u062a\u0631\u0644 PCF \u062e\u0648\u062f \u0631\u0627 \u0628\u0647 \u06cc\u06a9 \u0634\u0628\u06a9\u0647 \u0645\u062a\u0635\u0644 \u0645\u06cc \u06a9\u0646\u06cc\u062f\u060c \u06a9\u0646\u062a\u0631\u0644 \u0628\u0647 \u0645\u062c\u0645\u0648\u0639\u0647 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0627\u0631\u0627\u0626\u0647 \u0634\u062f\u0647 \u062a\u0648\u0633\u0637 \u0622\u0646 \u0634\u0628\u06a9\u0647 \u0645\u0634\u062a\u0631\u06a9 \u0645\u06cc \u0634\u0648\u062f. \u0641\u06cc\u0644\u062f\u0647\u0627 \u0648 \u0631\u06a9\u0648\u0631\u062f\u0647\u0627\u06cc\u06cc \u06a9\u0647 \u0628\u0631\u0627\u06cc \u0646\u0645\u0627\u06cc\u0634 \u062f\u0631 \u0634\u0628\u06a9\u0647 \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u0634\u062f\u0647\u200c\u0627\u0646\u062f \u0628\u0647 \u0648\u06cc\u0698\u06af\u06cc \u0645\u062c\u0645\u0648\u0639\u0647 \u062f\u0627\u062f\u0647 \u06a9\u0646\u062a\u0631\u0644 PCF \u0634\u0645\u0627 \u0645\u0646\u062a\u0642\u0644 \u0645\u06cc\u200c\u0634\u0648\u0646\u062f \u0648 \u0628\u0647 \u0622\u0646 \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc\u200c\u062f\u0647\u0646\u062f \u0627\u06cc\u0646 \u062f\u0627\u062f\u0647\u200c\u0647\u0627 \u0631\u0627 \u0628\u0647 \u0634\u06cc\u0648\u0647\u200c\u0627\u06cc \u0633\u0641\u0627\u0631\u0634\u06cc\u200c\u0634\u062f\u0647 \u0627\u0631\u0627\u0626\u0647 \u06cc\u0627 \u067e\u0631\u062f\u0627\u0632\u0634 \u06a9\u0646\u062f.<\/p>\n

\u0628\u0627 \u0627\u06cc\u0646 \u062d\u0627\u0644\u060c \u0628\u0631\u062e\u06cc \u0627\u0632 \u0633\u062a\u0648\u0646 \u0647\u0627\u06cc \u062e\u0627\u0635 \u0645\u0627\u0646\u0646\u062f documentbody \u062f\u0631 note \u0645\u0648\u062c\u0648\u062f\u06cc\u062a \u0628\u0631\u0627\u06cc \u0627\u0641\u0632\u0648\u062f\u0646 \u0645\u0633\u062a\u0642\u06cc\u0645 \u0628\u0647 \u0634\u0628\u06a9\u0647 \u062f\u0631 \u062f\u0633\u062a\u0631\u0633 \u0646\u06cc\u0633\u062a \u0632\u06cc\u0631\u0627 \u06cc\u06a9 \u0641\u06cc\u0644\u062f \u0628\u0627\u06cc\u0646\u0631\u06cc \u0627\u0633\u062a \u0648 Dynamics CRM \u0628\u0647 \u062f\u0644\u06cc\u0644 \u0646\u06af\u0631\u0627\u0646\u06cc\u200c\u0647\u0627\u06cc \u0645\u0631\u0628\u0648\u0637 \u0628\u0647 \u0639\u0645\u0644\u06a9\u0631\u062f \u0648 \u0642\u0627\u0628\u0644\u06cc\u062a \u0627\u0633\u062a\u0641\u0627\u062f\u0647\u060c \u0627\u062c\u0627\u0632\u0647 \u0646\u0645\u06cc\u200c\u062f\u0647\u062f \u0641\u06cc\u0644\u062f\u0647\u0627\u06cc \u0628\u0627\u06cc\u0646\u0631\u06cc \u062f\u0631 \u0646\u0645\u0627\u0647\u0627\u06cc \u0634\u0628\u06a9\u0647 \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0634\u0648\u0646\u062f.<\/p>\n

\u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u0628\u0631\u0627\u06cc \u062f\u0633\u062a\u0631\u0633\u06cc \u0628\u0647 documentbody \u0648 filename \u062f\u0627\u062f\u0647\u200c\u0647\u0627\u06cc \u0633\u062a\u0648\u0646\u200c\u0647\u0627\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u0645 \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0631\u0627 \u0628\u0627 \u0627\u0641\u0632\u0648\u062f\u0646 \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0646\u0648\u06cc\u0633\u06cc \u0622\u0646 \u0633\u062a\u0648\u0646\u200c\u0647\u0627 \u062f\u0631 \u0645\u062c\u0645\u0648\u0639\u0647 \u062f\u0627\u062f\u0647 \u062e\u0648\u062f \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u06cc\u0645. \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0627\u06cc\u0646 \u0633\u062a\u0648\u0646 \u0647\u0627 \u0631\u0627 \u0628\u0647 \u0645\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u0645 sampleDataSet \u0627\u0645\u0648\u0627\u0644 \u0627\u0632 updateView \u0631\u0648\u0634 \u062f\u0631 index.ts \u0641\u0627\u06cc\u0644<\/p>\n

\/\/ …<\/p>\n

public updateView(context: ComponentFramework.ContextIInputs>): React.ReactElement
\n{<\/p>\n

if (context.parameters.sampleDataSet.addColumn)
\n {
\n context.parameters.sampleDataSet.addColumn(“documentbody”);
\n context.parameters.sampleDataSet.addColumn(“filename”);
\n context.parameters.sampleDataSet.refresh();
\n }<\/p>\n

const props: IInputs = { sampleDataSet: context.parameters.sampleDataSet };
\n return React.createElement(PCFControl, props);
\n}<\/p>\n

\/\/ …<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0633\u062a\u0642\u0631\u0627\u0631 \u06a9\u0646\u062a\u0631\u0644 PCF<\/p>\n

\u0632\u0645\u0627\u0646 \u0622\u0646 \u0631\u0633\u06cc\u062f\u0647 \u0627\u0633\u062a \u06a9\u0647 \u06a9\u0646\u062a\u0631\u0644 PCF \u062e\u0648\u062f \u0631\u0627 \u0627\u0632 \u0637\u0631\u06cc\u0642 Power Apps \u062f\u0631 \u0639\u0645\u0644 \u0645\u0634\u0627\u0647\u062f\u0647 \u06a9\u0646\u06cc\u0645.<\/p>\n

\u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0642\u0631\u0627\u0631 \u06a9\u0646\u062a\u0631\u0644 PCF \u062e\u0648\u062f \u062f\u0631 \u0645\u062d\u06cc\u0637 Power Apps\u060c \u062f\u0633\u062a\u0648\u0631\u0627\u062a \u0632\u06cc\u0631 \u0631\u0627 \u062f\u0631 \u062a\u0631\u0645\u06cc\u0646\u0627\u0644 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f.<\/p>\n

npm run build<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0628\u0627 \u0645\u062d\u06cc\u0637 \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u0642\u062f\u0631\u062a \u062e\u0648\u062f \u0627\u0631\u062a\u0628\u0627\u0637 \u0628\u0631\u0642\u0631\u0627\u0631 \u06a9\u0646\u06cc\u062f\u060c<\/p>\n

pac auth create –environment “{Your Environment Name}”<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u06a9\u0646\u062a\u0631\u0644 \u0631\u0627 \u062f\u0631 \u0645\u062d\u06cc\u0637 \u062e\u0648\u062f \u0645\u0633\u062a\u0642\u0631 \u06a9\u0646\u06cc\u062f\u060c<\/p>\n

pac pcf push<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u067e\u0633 \u0627\u0632 \u0627\u0633\u062a\u0642\u0631\u0627\u0631 \u0645\u0648\u0641\u0642\u06cc\u062a \u0622\u0645\u06cc\u0632\u060c \u0628\u0647 make.powerapps.com \u0628\u0631\u0648\u06cc\u062f:<\/p>\n

\u0645\u062d\u06cc\u0637 \u062e\u0648\u062f \u0631\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u06cc\u062f: \u0645\u062d\u06cc\u0637\u06cc \u0631\u0627 \u06a9\u0647 \u06a9\u0646\u062a\u0631\u0644 \u0631\u0627 \u062f\u0631 \u0622\u0646 \u0645\u0633\u062a\u0642\u0631 \u06a9\u0631\u062f\u0647 \u0627\u06cc\u062f \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u06cc\u062f.
\n\u0628\u0647 \u0631\u0627\u0647 \u062d\u0644 \u0647\u0627 \u0628\u0631\u0648\u06cc\u062f: \u0628\u0647 Solutions > Default Solution > Custom Controls \u0628\u0631\u0648\u06cc\u062f.
\n\u06a9\u0646\u062a\u0631\u0644 \u062e\u0648\u062f \u0631\u0627 \u0628\u0631\u0631\u0633\u06cc \u06a9\u0646\u06cc\u062f: \u06a9\u0646\u062a\u0631\u0644 PCF \u0634\u0645\u0627 \u0628\u0627\u06cc\u062f \u062f\u0631 \u0644\u06cc\u0633\u062a \u0638\u0627\u0647\u0631 \u0634\u0648\u062f.<\/p>\n

\u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u06a9\u0646\u062a\u0631\u0644 \u062f\u0631 Grid<\/p>\n

\u0628\u0631\u0627\u06cc \u0627\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634\u060c \u06a9\u0646\u062a\u0631\u0644 \u062e\u0648\u062f \u0631\u0627 \u0628\u0631 \u0631\u0648\u06cc \u0634\u0628\u06a9\u0647 \u06cc\u0627\u062f\u062f\u0627\u0634\u062a\u200c\u0647\u0627 \u062f\u0631 \u0641\u0631\u0645 \u062c\u062f\u0648\u0644 \u062d\u0633\u0627\u0628 \u0636\u0645\u06cc\u0645\u0647 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645.<\/p>\n

\u062a\u0648\u062c\u0647: \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u06cc\u0646 \u06a9\u0646\u062a\u0631\u0644 \u0631\u0627 \u062f\u0631 \u0647\u0631 \u0641\u0631\u0645 \u0645\u0648\u062c\u0648\u062f\u06cc \u06a9\u0647 \u0641\u0639\u0627\u0644 \u0628\u0627\u0634\u062f \u062a\u0627 \u067e\u06cc\u0648\u0633\u062a\u200c\u0647\u0627\u06cc\u06cc \u0628\u0627 \u0622\u0646 \u067e\u06cc\u0648\u0646\u062f \u062f\u0627\u062f\u0647 \u0634\u0648\u062f\u060c \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n

\u062c\u062f\u0648\u0644 \u0645\u0631\u0628\u0648\u0637\u0647 \u0631\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u06cc\u0627\u062f\u062f\u0627\u0634\u062a \u062f\u0631 \u0632\u06cc\u0631\u0634\u0628\u06a9\u0647 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u06cc\u062f.<\/p>\n

\u0641\u06cc\u0644\u062a\u0631\u0647\u0627\u06cc \u06a9\u0644\u06cc\u062f\u06cc \u0631\u0627 \u06a9\u0647 \u0628\u0627\u06cc\u062f \u062f\u0631 \u0646\u0645\u0627\u06cc \u06cc\u0627\u062f\u062f\u0627\u0634\u062a\u200c\u0647\u0627\u06cc \u062e\u0648\u062f \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f\u060c \u0627\u0641\u0632\u0648\u062f\u0646 \u0627\u06cc\u0646 \u0641\u06cc\u0644\u062a\u0631\u0647\u0627 \u062f\u0631 \u0646\u0645\u0627\u06cc\u060c \u062a\u0636\u0645\u06cc\u0646 \u0645\u06cc\u200c\u06a9\u0646\u062f \u06a9\u0647 \u0641\u0642\u0637 \u0622\u0646 \u0631\u06a9\u0648\u0631\u062f\u0647\u0627\u06cc \u06cc\u0627\u062f\u062f\u0627\u0634\u062a \u0631\u0627 \u0628\u0647 \u0645\u062c\u0645\u0648\u0639\u0647 \u062f\u0627\u062f\u0647 \u0645\u0627 \u0628\u0627\u0632\u06af\u0631\u062f\u0627\u0646\u06cc\u062f \u06a9\u0647 \u06cc\u06a9 \u0641\u0627\u06cc\u0644 \u0627\u06a9\u0633\u0644 \u0628\u0647 \u0622\u0646\u0647\u0627 \u067e\u06cc\u0648\u0633\u062a \u0634\u062f\u0647 \u0627\u0633\u062a.<\/p>\n

\u0633\u067e\u0633 \u0628\u0647 Get More Components \u0648 \u062c\u0633\u062a\u062c\u0648 \u06a9\u0646\u06cc\u062f ReactDatasetControl \u06a9\u0647 \u0628\u0647 \u062a\u0627\u0632\u06af\u06cc \u0627\u06cc\u062c\u0627\u062f \u06a9\u0631\u062f\u0647 \u0648 \u0628\u0647 \u0644\u06cc\u0633\u062a \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0647 \u0627\u06cc\u0645.
\n\u0622\u0646 \u06a9\u0646\u062a\u0631\u0644 \u0631\u0627 \u0628\u0647 \u0634\u0628\u06a9\u0647 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f \u0648 \u0641\u0631\u0645 \u0631\u0627 \u0630\u062e\u06cc\u0631\u0647 \u0648 \u0645\u0646\u062a\u0634\u0631 \u06a9\u0646\u06cc\u062f.<\/p>\n

\u0647\u0631 \u0631\u06a9\u0648\u0631\u062f \u062d\u0633\u0627\u0628\u06cc \u0631\u0627 \u06a9\u0647 \u062f\u0627\u0631\u0627\u06cc \u06cc\u0627\u062f\u062f\u0627\u0634\u062a \u0647\u0627\u06cc\u06cc \u0628\u0627 \u067e\u06cc\u0648\u0633\u062a \u0647\u0627\u06cc \u0627\u06a9\u0633\u0644 \u0627\u0633\u062a \u0628\u0627\u0632 \u06a9\u0646\u06cc\u062f \u0648 \u0628\u0627\u06cc\u062f \u0628\u062a\u0648\u0627\u0646\u06cc\u062f \u0641\u0627\u06cc\u0644 \u0647\u0627\u06cc \u062e\u0648\u062f \u0631\u0627 \u062f\u0631 \u06a9\u0646\u062a\u0631\u0644 \u0645\u0634\u0627\u0647\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n

\u0628\u0633\u062a\u0647 \u0634\u062f\u0646<\/p>\n

\u062a\u0628\u0631\u06cc\u06a9 \u0645\u06cc \u06af\u0648\u06cc\u0645! \u0634\u0645\u0627 \u06cc\u06a9 \u06a9\u0646\u062a\u0631\u0644 \u0645\u062c\u0645\u0648\u0639\u0647 \u062f\u0627\u062f\u0647 PCF \u0633\u0641\u0627\u0631\u0634\u06cc \u0627\u06cc\u062c\u0627\u062f \u06a9\u0631\u062f\u0647 \u0627\u06cc\u062f \u06a9\u0647:<\/p>\n

\u0646\u0645\u0627\u06cc\u0634 \u06cc\u0627\u062f\u062f\u0627\u0634\u062a\u200c\u0647\u0627\u06cc \u067e\u06cc\u0648\u0633\u062a \u0627\u06a9\u0633\u0644 \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0647\u0627\u06cc \u0645\u0628\u062a\u0646\u06cc \u0628\u0631 \u0645\u062f\u0644\u060c
\n\u0647\u0631 \u0628\u0631\u06af\u0647 \u0631\u0627 \u062f\u0631 \u0641\u0627\u06cc\u0644 \u0627\u06a9\u0633\u0644 \u0641\u0647\u0631\u0633\u062a \u0645\u06cc \u06a9\u0646\u062f\u060c
\n\u0641\u0627\u06cc\u0644 \u0631\u0627 \u062f\u0631\u0648\u0646 \u0633\u06cc\u0633\u062a\u0645 \u062f\u0627\u0646\u0644\u0648\u062f \u0645\u06cc \u06a9\u0646\u062f.
\n\u0627\u0632 \u06a9\u0646\u062a\u0631\u0644\u200c\u0647\u0627\u06cc Fluent UI React \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u062f \u06a9\u0647 \u062a\u0648\u0633\u0637 \u0645\u0627\u06cc\u06a9\u0631\u0648\u0633\u0627\u0641\u062a \u0628\u0631\u0627\u06cc \u062a\u0648\u0633\u0639\u0647 \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0647\u0627\u06cc Dynamics \u0645\u062f\u0631\u0646 \u0633\u0627\u062e\u062a\u0647 \u0634\u062f\u0647\u200c\u0627\u0646\u062f.<\/p>\n

\u06a9\u0627\u0631 \u062e\u0648\u0628! \u0627\u0645\u06cc\u062f\u0648\u0627\u0631\u0645 \u0627\u06a9\u0646\u0648\u0646 \u0627\u062d\u0633\u0627\u0633 \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u062f\u0631\u06a9 \u0645\u0646\u0627\u0633\u0628\u06cc \u0627\u0632 \u06a9\u0646\u062a\u0631\u0644\u200c\u0647\u0627\u06cc React \u0648 PCF \u062f\u0631 \u062f\u06cc\u0646\u0627\u0645\u06cc\u06a9 \u062f\u0627\u0631\u06cc\u062f.<\/p>\n

\u0627\u06af\u0631 \u0645\u06cc\u200c\u062e\u0648\u0627\u0647\u06cc\u062f \u0645\u0647\u0627\u0631\u062a\u200c\u0647\u0627\u06cc \u06a9\u0646\u062a\u0631\u0644\u06cc React \u0648 PCF \u062e\u0648\u062f \u0631\u0627 \u0628\u06cc\u0634\u062a\u0631 \u062a\u0642\u0648\u06cc\u062a \u06a9\u0646\u06cc\u062f\u060c \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0627\u06cc\u062f\u0647\u200c\u0647\u0627\u06cc\u06cc \u0628\u0631\u0627\u06cc \u0628\u0647\u0628\u0648\u062f\u0647\u0627\u06cc\u06cc \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f \u06a9\u0647 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u062f\u0631 \u0627\u06cc\u0646 \u06a9\u0646\u062a\u0631\u0644 \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u06cc\u062f:<\/p>\n

\u0645\u0646\u0637\u0642 \u0631\u0633\u06cc\u062f\u06af\u06cc \u0628\u0647 \u062e\u0637\u0627 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f \u062a\u0627 \u0646\u06cc\u0627\u0632\u06cc \u0628\u0647 \u0641\u06cc\u0644\u062a\u0631\u0647\u0627\u06cc \u0645\u0634\u0627\u0647\u062f\u0647 \u0646\u0628\u0627\u0634\u062f.
\n\u0642\u0627\u0628\u0644\u06cc\u062a \u0645\u0631\u062a\u0628 \u0633\u0627\u0632\u06cc\u060c \u0641\u06cc\u0644\u062a\u0631 \u0648 \u062c\u0633\u062a\u062c\u0648 \u0631\u0627 \u062f\u0631 \u06a9\u0646\u062a\u0631\u0644 \u06af\u0631\u06cc\u062f DetailsList \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f.
\n\u0628\u0631\u0627\u06cc \u062e\u0648\u0627\u0646\u062f\u0646 \u0627\u0646\u0648\u0627\u0639 \u062f\u06cc\u06af\u0631 \u0641\u0627\u06cc\u0644\u200c\u0647\u0627 \u0645\u0627\u0646\u0646\u062f txt\u060c pdf\u060c docx \u0648 \u063a\u06cc\u0631\u0647\u060c \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f.
\n\u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc CRUD \u0631\u0627 \u062f\u0631 \u0634\u0628\u06a9\u0647 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n

\u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0633\u0627\u06cc\u0631 \u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627\u06cc \u062c\u0627\u0644\u0628\u06cc \u0631\u0627 \u06a9\u0647 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f \u06cc\u0627 \u062a\u0631\u062f\u06cc\u062f\u0647\u0627\u06cc \u062e\u0648\u062f \u0631\u0627 \u062f\u0631 \u0645\u0648\u0631\u062f \u0627\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634 \u062f\u0631 \u0628\u062e\u0634 \u0646\u0638\u0631\u0627\u062a \u0628\u0647 \u0627\u0634\u062a\u0631\u0627\u06a9 \u0628\u06af\u0630\u0627\u0631\u06cc\u062f.<\/p>\n

\u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0645\u062e\u0632\u0646 GitHub \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646 \u067e\u0631\u0648\u0698\u0647 \u0627\u0633\u062a.<\/p>\n

\u06a9\u062f\u0646\u0648\u06cc\u0633\u06cc \u0645\u0628\u0627\u0631\u06a9\u2026<\/p>\n

\n

\u062f\u0631 \u0627\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634\u060c \u0634\u0645\u0627 \u06cc\u06a9 \u06a9\u0646\u062a\u0631\u0644 \u062f\u0627\u062f\u0647 \u062a\u0639\u0627\u0645\u0644\u06cc PCF \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 React \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc\u200c\u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u062f \u062f\u0631 \u0634\u0628\u06a9\u0647 \u0645\u0648\u062c\u0648\u062f\u06cc\u062a Dynamics CRM \u0627\u062f\u063a\u0627\u0645 \u0634\u0648\u062f.<\/p>\n

\u062a\u06a9\u0646\u06cc\u06a9 \u0647\u0627\u06cc\u06cc \u06a9\u0647 \u062f\u0631 \u0627\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634 \u062e\u0648\u0627\u0647\u06cc\u062f \u0622\u0645\u0648\u062e\u062a \u0628\u0647 \u0634\u0645\u0627 \u062f\u0631\u06a9 \u0639\u0645\u06cc\u0642 \u062a\u0631\u06cc \u0627\u0632 \u06a9\u0646\u062a\u0631\u0644 \u0647\u0627\u06cc PCF \u062f\u0631 Dynamics CRM \u0645\u06cc \u062f\u0647\u062f. \u062f\u0631 \u0633\u0631\u0627\u0633\u0631 \u0627\u06cc\u0646 \u0631\u0627\u0647\u0646\u0645\u0627\u060c \u0645\u0627 \u0647\u0645\u0647 \u0686\u06cc\u0632 \u0631\u0627 \u0627\u0632 \u0631\u0627\u0647\u200c\u0627\u0646\u062f\u0627\u0632\u06cc \u0645\u062d\u06cc\u0637 \u062a\u0648\u0633\u0639\u0647 \u062a\u0627 \u0627\u0633\u062a\u0642\u0631\u0627\u0631 \u0648 \u0622\u0632\u0645\u0627\u06cc\u0634 \u06a9\u0646\u062a\u0631\u0644 \u0633\u0641\u0627\u0631\u0634\u06cc \u0634\u0645\u0627 \u067e\u0648\u0634\u0634 \u062e\u0648\u0627\u0647\u06cc\u0645 \u062f\u0627\u062f.<\/p>\n

\n
\n

\u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628<\/p>\nToggle<\/span><\/path><\/svg><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n