#JS एक्शन

#परिचय

JS एक्शन का उपयोग तब किया जाता है जब किसी बटन पर क्लिक किया जाता है, ताकि जावास्क्रिप्ट चलाकर किसी भी व्यावसायिक व्यवहार को अनुकूलित किया जा सके। इसका उपयोग फ़ॉर्म टूलबार, टेबल टूलबार (संग्रह-स्तर), टेबल पंक्तियों (रिकॉर्ड-स्तर) और अन्य स्थानों पर सत्यापन, सूचनाएँ दिखाने, API कॉल करने, पॉप-अप/ड्रॉअर खोलने और डेटा रीफ़्रेश करने जैसे ऑपरेशन को पूरा करने के लिए किया जा सकता है।

#रनटाइम कॉन्टेक्स्ट API (अक्सर उपयोग किए जाने वाले)

• ctx.api.request(options): HTTP अनुरोध करता है;

• ctx.openView(viewUid, options): एक कॉन्फ़िगर किए गए व्यू (ड्रॉअर/डायलॉग/पेज) को खोलता है;

• ctx.message / ctx.notification: वैश्विक संदेश और सूचनाएँ;

• ctx.t() / ctx.i18n.t(): अंतर्राष्ट्रीयकरण;

• ctx.resource: संग्रह-स्तर के कॉन्टेक्स्ट के लिए डेटा संसाधन (जैसे टेबल टूलबार, जिसमें getSelectedRows() और refresh() जैसे तरीके शामिल हैं);

• ctx.record: रिकॉर्ड-स्तर के कॉन्टेक्स्ट के लिए वर्तमान पंक्ति रिकॉर्ड (जैसे टेबल पंक्ति बटन);

• ctx.form: फ़ॉर्म-स्तर के कॉन्टेक्स्ट के लिए AntD फ़ॉर्म इंस्टेंस (जैसे फ़ॉर्म टूलबार बटन);

• ctx.collection: वर्तमान संग्रह की मेटा जानकारी;

• कोड एडिटर Snippets (स्निपेट्स) और Run (रन) प्री-एग्ज़ेक्यूशन को सपोर्ट करता है (नीचे देखें)।

• ctx.requireAsync(url): URL से AMD/UMD लाइब्रेरी को अतुल्यकालिक रूप से लोड करता है;

• ctx.importAsync(url): URL से ESM मॉड्यूल को गतिशील रूप से इम्पोर्ट करता है;

बटन के स्थान के आधार पर वास्तविक उपलब्ध वैरिएबल भिन्न हो सकते हैं। ऊपर सामान्य क्षमताओं का एक अवलोकन दिया गया है।

#एडिटर और स्निपेट्स

• Snippets: बिल्ट-इन कोड स्निपेट्स की सूची खोलता है, जिन्हें खोजा जा सकता है और एक क्लिक से वर्तमान कर्सर स्थिति पर डाला जा सकता है।
• Run: वर्तमान कोड को सीधे चलाता है और रनिंग लॉग को नीचे के Logs पैनल में आउटपुट करता है; यह console.log/info/warn/error को सपोर्ट करता है और त्रुटियों को आसानी से पहचानने के लिए हाइलाइट करता है।

• आप AI कर्मचारियों का उपयोग करके स्क्रिप्ट बना/संशोधित कर सकते हैं: AI कर्मचारी · नाथन: फ्रंटएंड इंजीनियर

#सामान्य उपयोग (सरलीकृत उदाहरण)

#1) API अनुरोध और सूचना

const resp = await ctx.api.request({ url: 'users:list', method: 'get', params: { pageSize: 10 } });
ctx.message.success(ctx.t('Request finished'));
console.log(ctx.t('Response data:'), resp?.data);

#2) संग्रह बटन: चयन को मान्य करें और प्रोसेस करें

const rows = ctx.resource?.getSelectedRows?.() || [];
if (!rows.length) {
  ctx.message.warning(ctx.t('Please select records'));
  return;
}
// TODO: व्यावसायिक लॉजिक लागू करें…
ctx.message.success(ctx.t('Selected {n} items', { n: rows.length }));

#3) रिकॉर्ड बटन: वर्तमान पंक्ति रिकॉर्ड पढ़ें

if (!ctx.record) {
  ctx.message.error(ctx.t('No record'));
} else {
  ctx.message.success(ctx.t('Record ID: {id}', { id: ctx.record.id }))
}

#4) व्यू खोलें (ड्रॉअर/डायलॉग)

const popupUid = ctx.model.uid + '-open'; // स्थिरता के लिए वर्तमान बटन से बाँधें
await ctx.openView(popupUid, { mode: 'drawer', title: ctx.t('Details'), size: 'large' });

#5) सबमिशन के बाद डेटा रीफ़्रेश करें

// सामान्य रीफ़्रेश: टेबल/सूची संसाधनों को प्राथमिकता दें, उसके बाद फ़ॉर्म वाले ब्लॉक के संसाधन को
if (ctx.resource?.refresh) await ctx.resource.refresh();
else if (ctx.blockModel?.resource?.refresh) await ctx.blockModel.resource.refresh();

#ध्यान देने योग्य बातें

• क्रियाओं को आइडम्पोटेंट बनाएँ: बार-बार क्लिक करने से होने वाले कई सबमिशन से बचने के लिए, आप अपने लॉजिक में एक स्थिति फ़्लैग जोड़ सकते हैं या बटन को अक्षम कर सकते हैं।
• त्रुटि प्रबंधन: API कॉल के लिए try/catch ब्लॉक जोड़ें और उपयोगकर्ता-अनुकूल फ़ीडबैक प्रदान करें।
• व्यू इंटरैक्शन: जब ctx.openView का उपयोग करके पॉप-अप/ड्रॉअर खोलते हैं, तो स्पष्ट रूप से पैरामीटर पास करने की सलाह दी जाती है और यदि आवश्यक हो, तो सफल सबमिशन के बाद पैरेंट संसाधन को सक्रिय रूप से रीफ़्रेश करें।

#संबंधित दस्तावेज़

• वैरिएबल और कॉन्टेक्स्ट
• लिंकेज नियम
• व्यू और पॉप-अप