AI अनुवाद सूचना
यह दस्तावेज़ AI द्वारा अनुवादित है। सटीक जानकारी के लिए कृपया अंग्रेज़ी संस्करण देखें।
इवेंट फ़्लो
परिचय
यदि आप चाहते हैं कि किसी फ़ॉर्म में बदलाव होने पर कुछ कस्टम ऑपरेशन ट्रिगर हों, तो आप इसे इवेंट फ़्लो का उपयोग करके प्राप्त कर सकते हैं। फ़ॉर्म के अलावा, पेज, ब्लॉक, बटन और फ़ील्ड सभी कस्टम ऑपरेशन कॉन्फ़िगर करने के लिए इवेंट फ़्लो का उपयोग कर सकते हैं।
कैसे उपयोग करें
नीचे एक सरल उदाहरण दिया गया है जो बताता है कि इवेंट फ़्लो को कैसे कॉन्फ़िगर किया जाए। आइए दो तालिकाओं (tables) के बीच एक लिंकेज लागू करें: जब बाईं तालिका की किसी पंक्ति पर क्लिक किया जाता है, तो दाईं तालिका का डेटा स्वचालित रूप से फ़िल्टर हो जाता है।

कॉन्फ़िगरेशन चरण इस प्रकार हैं:
- बाईं तालिका ब्लॉक के ऊपरी-दाएँ कोने में "बिजली" (lightning) आइकन पर क्लिक करें, जिससे इवेंट फ़्लो कॉन्फ़िगरेशन इंटरफ़ेस खुल जाएगा।

- "इवेंट फ़्लो जोड़ें (Add event flow)" पर क्लिक करें, "ट्रिगर इवेंट (Trigger event)" के रूप में "पंक्ति क्लिक (Row click)" चुनें, जिसका अर्थ है कि तालिका की पंक्ति पर क्लिक करने पर यह ट्रिगर होगा।

- "निष्पादन समय (Execution timing)" कॉन्फ़िगर करें, जिसका उपयोग सिस्टम के अंतर्निहित (built-in) फ़्लो के सापेक्ष इस इवेंट फ़्लो के क्रम को नियंत्रित करने के लिए किया जाता है। आम तौर पर इसे डिफ़ॉल्ट पर ही रहने दें; यदि आप चाहते हैं कि अंतर्निहित लॉजिक पूरा होने के बाद कोई संदेश/नेविगेशन हो, तो "सभी फ़्लो के बाद (After all flows)" चुनें। अधिक जानकारी के लिए नीचे निष्पादन समय देखें।

- "ट्रिगर शर्त (Trigger condition)" का उपयोग शर्तों को कॉन्फ़िगर करने के लिए किया जाता है, इवेंट फ़्लो तभी ट्रिगर होगा जब शर्तें पूरी होंगी। यहाँ हमें इसे कॉन्फ़िगर करने की आवश्यकता नहीं है, क्योंकि हम चाहते हैं कि किसी भी पंक्ति पर क्लिक करने पर इवेंट फ़्लो ट्रिगर हो।

- "स्टेप जोड़ें (Add step)" पर माउस ले जाएँ, आप कुछ ऑपरेशन स्टेप्स जोड़ सकते हैं। दाईं तालिका के लिए डेटा दायरा सेट करने के लिए "डेटा दायरा सेट करें (Set data scope)" चुनें।

- दाईं तालिका का UID कॉपी करें और इसे "टारगेट ब्लॉक UID (Target block UID)" इनपुट बॉक्स में भरें। इसके नीचे तुरंत एक शर्त कॉन्फ़िगरेशन इंटरफ़ेस दिखाई देगा, जहाँ आप दाईं तालिका के लिए डेटा दायरा कॉन्फ़िगर कर सकते हैं।

- आइए नीचे दिखाए अनुसार एक शर्त कॉन्फ़िगर करें:

- डेटा दायरा कॉन्फ़िगर करने के बाद, फ़िल्टर किए गए परिणाम दिखाने के लिए ब्लॉक को रीफ़्रेश करना आवश्यक है। इसके बाद, आइए दाईं तालिका ब्लॉक को रीफ़्रेश करना कॉन्फ़िगर करें। "टारगेट ब्लॉक रीफ़्रेश करें (Refresh target blocks)" स्टेप जोड़ें और फिर दाईं तालिका का UID भरें।

- अंत में, निचले-दाएँ कोने में सेव बटन पर क्लिक करें, और कॉन्फ़िगरेशन पूरा हो जाएगा।
इवेंट विवरण
रेंडर होने से पहले (Before render)
सार्वभौमिक इवेंट, जिसका उपयोग पेज, ब्लॉक, बटन या फ़ील्ड में किया जा सकता है। इस इवेंट में, आप कुछ प्रारंभिक कार्य कर सकते हैं। उदाहरण के लिए, विभिन्न शर्तों के आधार पर विभिन्न डेटा दायरा कॉन्फ़िगर करना।
पंक्ति क्लिक (Row click)
तालिका ब्लॉक के लिए विशिष्ट इवेंट। तालिका की पंक्ति पर क्लिक करने पर ट्रिगर होता है। ट्रिगर होने पर, यह संदर्भ (context) में एक Clicked row record जोड़ता है, जिसका उपयोग शर्तों और स्टेप्स में वेरिएबल के रूप में किया जा सकता है।
फ़ॉर्म ब्लॉक के लिए विशिष्ट इवेंट। फ़ॉर्म फ़ील्ड के मान बदलने पर ट्रिगर होता है। आप शर्तों और स्टेप्स में "Current form" वेरिएबल के माध्यम से फ़ॉर्म के मान प्राप्त कर सकते हैं।
क्लिक (Click)
बटन के लिए विशिष्ट इवेंट। बटन पर क्लिक करने पर ट्रिगर होता है।
निष्पादन समय
इवेंट फ़्लो कॉन्फ़िगरेशन में, दो अवधारणाएँ हैं जो भ्रमित कर सकती हैं:
- ट्रिगर इवेंट: निष्पादन कब शुरू होता है (जैसे: रेंडर होने से पहले, पंक्ति क्लिक, क्लिक, फ़ॉर्म मान परिवर्तन आदि)।
- निष्पादन समय: एक ही ट्रिगर इवेंट होने के बाद, आपका कस्टम इवेंट फ़्लो अंतर्निहित फ़्लो (built-in flow) के किस स्थान पर डाला जाना चाहिए।
"अंतर्निहित फ़्लो / अंतर्निहित स्टेप" क्या हैं?
कई पेज, ब्लॉक या ऑपरेशन अपने स्वयं के सिस्टम अंतर्निहित प्रोसेसिंग फ़्लो के साथ आते हैं (जैसे: सबमिट करना, पॉप-अप खोलना, डेटा का अनुरोध करना आदि)। जब आप उसी इवेंट (जैसे "क्लिक") के लिए एक नया कस्टम इवेंट फ़्लो जोड़ते हैं, तो "निष्पादन समय" यह तय करता है:
- पहले आपका इवेंट फ़्लो निष्पादित हो, या पहले अंतर्निहित लॉजिक;
- या आपके इवेंट फ़्लो को अंतर्निहित फ़्लो के किसी विशेष स्टेप से पहले या बाद में डाला जाए।
UI में निष्पादन समय के विकल्पों को कैसे समझें?
- सभी फ़्लो से पहले (डिफ़ॉल्ट): सबसे पहले निष्पादित होता है। "रोकथाम/तैयारी" (जैसे सत्यापन, पुष्टि, वेरिएबल को इनिशियलाइज़ करना आदि) के लिए उपयुक्त है।
- सभी फ़्लो के बाद: अंतर्निहित लॉजिक पूरा होने के बाद निष्पादित होता है। "समापन/फ़ीडबैक" (जैसे संदेश दिखाना, अन्य ब्लॉक रीफ़्रेश करना, पेज नेविगेशन आदि) के लिए उपयुक्त है।
- निर्दिष्ट फ़्लो से पहले / निर्दिष्ट फ़्लो के बाद: अधिक सटीक प्रविष्टि बिंदु। इसे चुनने के बाद आपको एक विशिष्ट "अंतर्निहित फ़्लो" चुनना होगा।
- निर्दिष्ट फ़्लो स्टेप से पहले / निर्दिष्ट फ़्लो स्टेप के बाद: सबसे सटीक प्रविष्टि बिंदु। इसे चुनने के बाद आपको "अंतर्निहित फ़्लो" और "अंतर्निहित फ़्लो स्टेप" दोनों चुनने होंगे।
संकेत: यदि आप अनिश्चित हैं कि कौन सा अंतर्निहित फ़्लो/स्टेप चुनना है, तो पहले दो विकल्पों ("पहले / बाद") को प्राथमिकता दें।
स्टेप विवरण
कस्टम वेरिएबल (Custom variable)
एक वेरिएबल को कस्टमाइज़ करने और फिर संदर्भ में उसका उपयोग करने के लिए उपयोग किया जाता है।
स्कोप
कस्टम वेरिएबल्स का स्कोप होता है, उदाहरण के लिए, ब्लॉक के इवेंट फ़्लो में परिभाषित वेरिएबल का उपयोग केवल उसी ब्लॉक में किया जा सकता है। यदि आप चाहते हैं कि यह वर्तमान पेज के सभी ब्लॉकों में उपयोग करने योग्य हो, तो इसे पेज के इवेंट फ़्लो में कॉन्फ़िगर करने की आवश्यकता है।
वेरिएबल के रूप में उपयोग करने के लिए किसी फ़ॉर्म ब्लॉक के मान का उपयोग करें। विशिष्ट कॉन्फ़िगरेशन इस प्रकार है:

- Variable title: वेरिएबल शीर्षक
- Variable identifier: वेरिएबल पहचानकर्ता
- Form UID: फ़ॉर्म UID
अन्य वेरिएबल
भविष्य में अन्य वेरिएबल्स का समर्थन किया जाएगा, कृपया प्रतीक्षा करें।
डेटा दायरा सेट करें (Set data scope)
टारगेट ब्लॉक का डेटा दायरा सेट करें। विशिष्ट कॉन्फ़िगरेशन इस प्रकार है:

- Target block UID: टारगेट ब्लॉक UID
- Condition: फ़िल्टर शर्त
टारगेट ब्लॉक रीफ़्रेश करें (Refresh target blocks)
टारगेट ब्लॉक को रीफ़्रेश करें, कई ब्लॉकों को कॉन्फ़िगर करने की अनुमति देता है। विशिष्ट कॉन्फ़िगरेशन इस प्रकार है:

- Target block UID: टारगेट ब्लॉक UID
URL पर नेविगेट करें (Navigate to URL)
किसी URL पर नेविगेट करें। विशिष्ट कॉन्फ़िगरेशन इस प्रकार है:

- URL: टारगेट URL, वेरिएबल के उपयोग का समर्थन करता है
- Search parameters: URL में क्वेरी पैरामीटर
- Open in new window: यदि चेक किया गया है, तो नेविगेट करते समय एक नया ब्राउज़र पेज खुलेगा
संदेश दिखाएँ (Show message)
वैश्विक स्तर पर ऑपरेशन फ़ीडबैक जानकारी प्रदर्शित करें।
कब उपयोग करें
- सफलता, चेतावनी और त्रुटि जैसी फ़ीडबैक जानकारी प्रदान कर सकता है।
- शीर्ष केंद्र में प्रदर्शित होता है और स्वचालित रूप से गायब हो जाता है, जो उपयोगकर्ता के संचालन को बाधित किए बिना एक हल्का संकेत देने का तरीका है।
विशिष्ट कॉन्फ़िगरेशन

- Message type: संदेश प्रकार
- Message content: संदेश सामग्री
- Duration: कितनी देर तक प्रदर्शित हो, सेकंड में
सूचना दिखाएँ (Show notification)
वैश्विक स्तर पर सूचना अलर्ट प्रदर्शित करें।
कब उपयोग करें
सिस्टम के चारों कोनों में सूचना अलर्ट प्रदर्शित करें। अक्सर निम्नलिखित स्थितियों में उपयोग किया जाता है:
- अधिक जटिल सूचना सामग्री।
- इंटरैक्शन वाली सूचनाएं, जो उपयोगकर्ता को अगले चरण के लिए कार्रवाई बिंदु देती हैं।
- सिस्टम द्वारा सक्रिय रूप से भेजी गई सूचनाएं।
विशिष्ट कॉन्फ़िगरेशन

- Notification type: सूचना प्रकार
- Notification title: सूचना शीर्षक
- Notification description: सूचना विवरण
- Placement: स्थान, विकल्पों में शामिल हैं: ऊपर-बाएँ, ऊपर-दाएँ, नीचे-बाएँ, नीचे-दाएँ
जावास्क्रिप्ट निष्पादित करें (Execute JavaScript)

जावास्क्रिप्ट कोड निष्पादित करें।
उदाहरण
फ़ॉर्म: फ़ील्ड भरने के लिए थर्ड-पार्टी API को कॉल करना
परिदृश्य: फ़ॉर्म में एक इवेंट फ़्लो ट्रिगर करें, थर्ड-पार्टी API से अनुरोध करें, डेटा प्राप्त करें और उसे स्वचालित रूप से फ़ॉर्म फ़ील्ड में भरें।
कॉन्फ़िगरेशन चरण:
- फ़ॉर्म ब्लॉक में इवेंट फ़्लो कॉन्फ़िगरेशन खोलें और एक नया इवेंट फ़्लो जोड़ें;
- ट्रिगर इवेंट के रूप में "रेंडर होने से पहले" चुनें;
- निष्पादन समय के रूप में "सभी फ़्लो के बाद" चुनें;
- "जावास्क्रिप्ट निष्पादित करें (Execute JavaScript)" स्टेप जोड़ें, नीचे दिए गए कोड को पेस्ट करें और आवश्यकतानुसार संशोधित करें:
const res = await ctx.api.request({
method: 'get',
url: 'https://jsonplaceholder.typicode.com/users/2',
skipNotify: true,
// Note: ctx.api will include the current NocoBase authentication/custom headers by default
// Here we override it with an "empty Authorization" to avoid sending the token to a third party
headers: {
Authorization: 'Bearer ',
},
});
const username = res?.data?.username;
// replace it with actual field name
ctx.form.setFieldsValue({ username });