कोड घटकों के लिए लिक्विड टेम्पलेट टैग
Power Apps component framework पेशेवर डेवलपर्स और ऐप निर्माताओं को मॉडल-चालित और कैनवास ऐप के लिए कोड कंपोनेंट बनाने में सक्षम बनाता है. ये कोड कंपोनेंट फॉर्म, दृश्यों और डैशबोर्ड पर डेटा के साथ काम करने वाले उपयोगकर्ताओं के लिए बेहतर अनुभव प्रदान कर सकते हैं. अधिक जानकारी: Power Pages में कोड घटकों का उपयोग करें
महत्त्वपूर्ण
कोड कंपोनेंट के लिए लिक्विड टेम्प्लेट टैग के लिए पोर्टल संस्करण 9.3.10.x या बाद के संस्करण की आवश्यकता होती है.
इस रिलीज़ के साथ, हमने वेबपेजों पर Liquid टेम्पलेट टैग का उपयोग करके कोड घटकों को जोड़ने की क्षमता और Power Pages में प्रपत्रों पर फ़ील्ड-स्तरीय घटकों के लिए सक्षम वेब API का उपयोग करके सक्षम घटकों को पेश किया है।
कोड कंपोनेंट को codecomponent लिक्विड टेम्प्लेट टैग का उपयोग करके जोड़ा जा सकता है. कोड कंपोनेंट को लोड करने की आवश्यकता को दर्शाने की कुंजी name एट्रिब्यूट का उपयोग करके पास की जाती है. कुंजी GUID (जो कोड कंपोनेंट ID है) या Microsoft Dataverse में आयात किए गए कोड कंपोनेंट का नाम हो सकता है.
कोड कंपोनेंट की अपेक्षा वाले गुणों के मानों को ":" (अपूर्ण विराम चिह्न) द्वारा अलग किए गए कुंजी/मान जोड़ी के रूप में पास करने की आवश्यकता है, जहां कुंजी संपत्ति का नाम है और मान JSON स्ट्रिंग मान है.
{% codecomponent name: <ID or name> <property1:value> <property2:value> %}
उदाहरण के लिए, controlValue नामक इनपुट पैरामीटर की अपेक्षा रखने वाले कोड घटक को जोड़ने के लिए, निम्न लिक्विड टेम्पलेट टैग का उपयोग करें:
{% codecomponent name:abc_SampleNamespace.MapControl controlValue:'Space Needle' controlApiKey:<API Key Value>%}
टिप
यह उदाहरण controlvalue और controlApiKey नामक पैरामीटर का उपयोग करता है, हालांकि आपके द्वारा उपयोग किए जाने वाले कंपोनेंट को भिन्न पैरामीटर नामों की आवश्यकता हो सकती है.
आप नमूना मानचित्र नियंत्रण का उपयोग कर सकते हैं और कोड घटक को समाधान के रूप में पैकेज कर सकते हैं Power Pages के साथ उपयोग के लिए।
नोट
समुदाय द्वारा बनाए गए संसाधन Microsoft द्वारा समर्थित नहीं हैं. यदि आपके पास सामुदायिक संसाधनों के बारे में प्रश्न या समस्याएँ हैं, तो संसाधन के प्रकाशक से संपर्क करें. इन संसाधनों का उपयोग करने से पहले, आपको यह सुनिश्चित करना होगा कि वे Power Apps component framework दिशानिर्देशों को पूरा करते हैं और उनका उपयोग केवल संदर्भ उद्देश्य के लिए किया जाना चाहिए।
ट्यूटोरियल: लिक्विड टेम्प्लेट टैग वाले पृष्ठों पर कोड कंपोनेंट उपयोग करें
इस ट्यूटोरियल में, आप वेबपेज में घटक जोड़ने के लिए Power Pages को कॉन्फ़िगर करेंगे। आप साइट वेबपेज पर जाएंगे और कंपोनेंट के साथ इंटरैक्ट करेंगे.
शुरू करने से पहले
यदि आप इस ट्यूटोरियल में उपयोग किए गए नमूना कोड घटक का उपयोग कर रहे हैं, तो सुनिश्चित करें कि आप आरंभ करने से पहले परिवेश में नमूना समाधान आयात कर लें. समाधान आयात के बारे में जानने के लिए, समाधान आयात करें पर जाएँ.
पूर्वावश्यकताएँ
पूर्वापेक्षाओं के लिए, और Power Pages में समर्थित/असमर्थित कोड घटकों के बारे में जानने के लिए, Power Pages में कोड घटकों का उपयोग करें पर जाएं।
नोट
यह ट्यूटोरियल वेब पेज पर नक्शा नियंत्रण प्रदर्शित करने के लिए Power Apps component framework का उपयोग करके बनाए गए नमूना कोड कंपोनेंट का उपयोग करता है. आप इस ट्यूटोरियल के लिए अपने स्वयं के किसी मौजूदा या नए घटक और किसी अन्य वेबपेज का भी उपयोग कर सकते हैं। इस मामले में, इस ट्यूटोरियल के चरणों का पालन करते समय अपने घटक और वेबपेज का उपयोग करना सुनिश्चित करें। कोड कंपोनेंट को बनाने के तरीके के बारे में अधिक जानकारी के लिए, अपना पहला कंपोनेंट बनाएँ पर जाएँ.
चरण 1. स्टूडियो से किसी वेबपेज पर कोड कंपोनेंट जोड़ें
अपनी साइट को Power Pages डिज़ाइन स्टूडियो में खोलें।
पेज कार्यक्षेत्र का चयन करें और + पेज चुनें.
पेज को एक नाम दें. उदाहरण के लिए, मैप व्यूअर.
रिक्त से प्रारंभ करें पेज लेआउट का चयन करें।
वेब के लिए Visual Studio Code खोलने के लिए कोड संपादित करें बटन का चयन करें।
निम्नलिखित सिंटैक्स का उपयोग करके Liquid टेम्पलेट टैग के साथ
<div></div>के बीच नियंत्रण जोड़ें:{% codecomponent name:abc\_SampleNamespace.MapControl controlValue:'Space Needle' controlApiKey:'<API Key Value>' %}
टिप
सभी आयातित कंपोनेंट का विवरण प्राप्त करने के लिए और कंपोनेंट नाम की खोज करने के लिए, CustomControl वेब API देखें.
उदाहरण के लिए:
एक कंपोनेंट की खोज करने के लिए:
https://contoso.api.crm10.dynamics.com/api/data/v9.2/customcontrols?$select=ContosoCustomControlNameकिसी कंपोनेंट के लिए इनपुट पैरामीटर पुनर्प्राप्त करने के लिए:
https://contoso.api.crm10.dynamics.com/api/data/v9.2/customcontrols?$filter=name eq 'ContosoCustomControlName' &$select=manifest
अपडेट कोड को सेव करने के लिए कीबोर्ड पर CTRL-S चुनें।
डिज़ाइन स्टूडियो पर वापस जाएं और वेबपेज को Visual Studio कोड के संपादन के साथ अपडेट करने के लिए सिंक चुनें।
साइट का पूर्वावलोकन करने के लिए शीर्ष-दाएं कोने पर, पूर्वावलोकन और डेस्कटॉप का चयन करें।
वेबपेज अब उस पर जोड़ा गया नियंत्रण दिखाएगा.
अगले कदम
अवलोकन: पोर्टल्स में कोड कंपोनेंट का उपयोग करें