कैनवास ऐप गैलरी में डेटा दिखाएं, सॉर्ट करें और फ़िल्टर करें

अनेक उत्पादों के बारे में छवियाँ और पाठ दिखाने के लिए एक गैलरी बनाएँ, और उस जानकारी को सॉर्ट और फ़िल्टर करें.

Power Apps में, आप अनेक संबंधित आइटम दिखाने के लिए एक गैलरी का उपयोग कर सकते हैं, जैसा आप एक कैटलॉग में देखते हैं. उत्पादों के बारे में जानकारी, जैसे नाम और मूल्य दिखाने के लिए गैलरी बहुत अच्छी होती हैं. इस विषय में, हम एक गैलरी बनाते हैं और Excel-जैसे फ़ंक्शन के उपयोग द्वारा जानकारी को सॉर्ट और फ़िल्टर करते हैं. साथ ही, जब एक आइटम का चयन किया जाता है, तो उस आइटम के चारों ओर एक बॉर्डर रखी जाती है.

नोट

यह विषय टैबलेट ऐप का उपयोग करता है. आप फ़ोन ऐप का उपयोग कर सकते हैं, परंतु आपको कुछ नियंत्रणों का आकार बदलना होगा.

पूर्वावश्यकताएँ

• के लिए Power Appsसाइन अप करें, और फिर उसी क्रेडेंशियल्स का उपयोग करके लॉग इन करें जिसका उपयोग आपने साइन अप करने के लिए किया था।
• टेम्पलेट से, डेटा से, या स्क्रैच से टैबलेट ऐप बनाएं।
• जानें कि नियंत्रण को कैसे कॉन्फ़िगर करें. ...
• ये चरण CreateFirstApp को नमूना इनपुट डेटा के रूप में उपयोग करते हैं, जिसमें .jpg छवियां शामिल हैं। ज़िप फ़ाइल में एक XML फ़ाइल शामिल है जिसे Excel में रूपांतरित किया जा सकता है. अन्यथा, Power Apps स्वचालित रूप से .zip फ़ाइलों में फ़ाइलों को पढ़ता है और इसे सफलतापूर्वक आयात करता है. आप इस नमूना डेटा को डाउनलोड और उपयोग कर सकते हैं, या अपना स्वयं का डेटा आयात कर सकते हैं.

गैलरी में डेटा दिखाएँ

1. नमूना डेटा का उपयोग करके इन्वेंटरी नामक एक संग्रह बनाएँ. निम्न चरण शामिल हैं:

   1. सम्मिलित करें टैब पर, नियंत्रण का चयन करें, और फिर आयात करें का चयन करें:

      

   2. आयात नियंत्रण के OnSelect गुण को निम्न सूत्र पर सेट करें:
      एकत्रित करें(इन्वेंट्री, आयात1.डेटा)

      

   3. विन्डोज़ एक्सप्लोरर खोलने के लिए डेटा आयात करें बटन का चयन करें। CreateFirstApp.zip चुनें, और खोलें चुनें.

   4. फ़ाइल मेनू में, संग्रह का चयन करें. आपके द्वारा आयात किए गए डेटा के साथ Inventory संग्रह सूचीबद्ध है:

      

      आपने हाल ही में Inventory संग्रह बनाया है, जिसमें पाँच उत्पादों के बारे में जानकारी है, जिसमें एक डिजाइन छवि, उत्पाद का नाम और स्टॉक में इकाइयों की संख्या शामिल हैं.

      नोट

      आयात नियंत्रण Excel जैसे डेटा को आयात करने और संग्रह बनाने के लिए उपयोग होता है. आयात नियंत्रण तब डेटा आयात करता है जब आप अपना ऐप बना रहे होते हैं और अपने ऐप का पूर्वावलोकन कर रहे होते हैं. वर्तमान में, जब आप अपने ऐप को प्रकशित करते हैं तब आयात नियंत्रण डेटा को आयात नहीं करता.

2. डि़ज़ाइनर पर लौटने के लिए पीछे तीर का चयन करें.

3. सम्मिलित करें टैब पर, गैलरी पर क्लिक या टैप करें, और फिर क्षैतिज गैलरी पर क्लिक या टैप करें.

   

4. दाएँ-हाथ के फलक में, उस विकल्प पर क्लिक या टैप करें जिसमें शीर्षक और उपशीर्षक ग्राफ़िक को ओवरले करते हैं:

   

5. गैलरी के आइटम गुण को इन्वेंटरी पर सेट करें:

   

6. गैलरी का नाम बदलकर ProductGallery करें, और गैलरी को इस प्रकार स्थानांतरित करें कि यह अन्य नियंत्रणों को अवरुद्ध न करे। गैलरी का आकार बदलें, ताकि यह तीन उत्पाद दिखाए:

   

7. गैलरी के प्रथम आइटम में, निचला लेबल चयन करें:

   

   नोट

   जब आप किसी भी गैलरी में प्रथम आइटम बदलते हैं, तो आप स्वचालित रूप से गैलरी में अन्य सभी आइटम बदल देते हैं.

8. लेबल के टेक्स्ट गुण को निम्नलिखित अभिव्यक्ति पर सेट करें:
   यहआइटम.यूनिट्सइनस्टॉक
   

   जब आप ऐसा करते हैं, तो लेबल प्रत्येक उत्पाद के लिए स्टॉक में इकाइयाँ दिखाता है:

नोट

डिफ़ॉल्ट रूप से, शीर्ष लेबल का टेक्स्ट गुण ThisItem.ProductName पर सेट होता है। आप इसे अपने संग्रह में किसी अन्य आइटम में बदल सकते हैं. उदाहरण के लिए, यदि आपके संग्रह में उत्पाद विवरण या मूल्य फ़ील्ड हैं, तो आप लेबल को ThisItem.ProductDescription या ThisItem.Price पर सेट कर सकते हैं.

इन चरणों का उपयोग करके, आपने एक संग्रह में डेटा आयात किया था, जिसमें .jpg छवियाँ शामिल हैं. तब आपने डेटा प्रदर्शित करने वाली एक गैलरी जोड़ी थी, प्रत्येक उत्पाद के लिए स्टॉक में इकाइयाँ दिखाने वाला एक लेबल कॉन्फ़िगर किया था.

आपके द्वारा चयनित गैलरी आइटम हाइलाइट करें

1. गैलरी में पहले आइटम को छोड़कर कोई भी आइटम चुनें. संपादन करें चिह्न प्रदर्शित होता है (ऊपर बायाँ कोना). संपादन करें चिह्न का चयन करें.
   

2. सम्मिलित करें टैब पर, आकृतियाँ का चयन करें, और फिर आयत का चयन करें। प्रत्येक गैलरी आइटम में एक नीला ठोस आयत दिखाई देता है.

3. होम टैब पर, भरें का चयन करें, और फिर कोई भरें नहीं का चयन करें.

4. बॉर्डर का चयन करें, बॉर्डर स्टाइल का चयन करें, और फिर ठोस रेखा का चयन करें।

5. बॉर्डर को पुनः चुनें, और मोटाई को 3 पर सेट करें। आयत का आकार बदलें ताकि यह गैलरी आइटम को घेर सके. अब आपकी गैलरी के आइटम में अब एक नीला बॉर्डर है और इसे निम्न जैसा दिखाई देना चाहिए:
   

6. आकृति टैब पर, दृश्यमान का चयन करें, और फिर सूत्र पट्टी में निम्न सूत्र दर्ज करें:

   यदि(ThisItem.IsSelected, सत्य)

   गैलरी में वर्तमान चयन को एक नीला आयत घेर लेता है. यह पुष्टि करने के लिए, कि आपके द्वारा चयनित प्रत्येक आइटम के चारों ओर आयत दिखाई देता है, कुछ गैलरी आइटम का चयन करें. याद रखें, आप जो बना रहे हैं उसे देखने और परीक्षण करने के लिए आप पूर्वावलोकन भी खोल सकते हैं।

टिप

आयत का चयन करें, होम टैब पर पुनःक्रमित करें का चयन करें, और फिर पीछे भेजें का चयन करें। इस सुविधा का उपयोग करके, बॉर्डर द्वारा किसी भी चीज़ को अवरुद्ध किए बिना ही आप गैलरी आइटम का चयन कर सकते हैं.

इन चरणों का उपयोग करके, आपने गैलरी में वर्तमान चयन के चारों ओर एक बॉर्डर जोड़ दिया.

गैलरी में आइटम सॉर्ट और फ़िल्टर करें

इन चरणों में, हम गैलरी आइटम को आरोही और अवरोही ऑर्डर में सॉर्ट करने जा रहे हैं. साथ ही, हम गैलरी आइटमों को, आपके द्वारा चुने गए स्टॉक में इकाइयों द्वारा 'फ़िल्टर' करने के लिए एक स्लाइडर नियंत्रण जोड़ देंगे.

आरोही या अवरोही ऑर्डर में सॉर्ट करें

1. गैलरी में पहले आइटम को छोड़कर कोई भी आइटम चुनें.

2. आइटम संपत्ति वर्तमान में इन्वेंटरी (आपके संग्रह का नाम) पर सेट है। इसे निम्नलिखित में बदलें:

   सॉर्ट(इन्वेंट्री, उत्पादनाम)

   जब आप ऐसा करते हैं, तो गैलरी में आइटम उत्पाद नाम के अनुसार आरोही क्रम में सॉर्ट हो जाते हैं:

   अवरोही क्रम का प्रयास करें. गैलरी के आइटम गुण को निम्न सूत्र पर सेट करें:

   Sort(Inventory, ProductName, Descending)

गैलरी में स्लाइडर नियंत्रण और फ़िल्टर आइटम जोड़ें

1. एक स्लाइडर नियंत्रण (सम्मिलित करें टैब >नियंत्रण) जोड़ें, इसका नाम बदलकर स्टॉकफ़िल्टर करें, और इसे गैलरी के नीचे ले जाएं.

2. स्लाइडर कॉन्फ़िगर करें ताकि उपयोगकर्ता इसका मान स्टॉक में इकाइयों की सीमा के बाहर सेट न कर सकें:

   1. सामग्री टैब पर, न्यूनतम का चयन करें, और फिर निम्नलिखित अभिव्यक्ति दर्ज करें:
      Min(Inventory, UnitsInStock)
   2. सामग्री टैब पर, अधिकतम का चयन करें, और फिर निम्नलिखित अभिव्यक्ति दर्ज करें:
      Max(Inventory, UnitsInStock)

3. गैलरी में पहले आइटम को छोड़कर कोई भी आइटम चुनें. गैलरी के आइटम गुण को निम्नलिखित अभिव्यक्ति पर सेट करें:
   Filter(Inventory, UnitsInStock<=StockFilter.Value)

4. पूर्वावलोकन में, स्लाइडर को उस मान पर समायोजित करें जो गैलरी में उच्चतम और निम्नतम मात्रा के बीच हो. जब आप स्लाइडर समायोजित करते हैं, तब गैलरी केवल वे उत्पाद दिखाती है जो आपके द्वारा चुने गए मान से कम हैं:
   

अब, हमारे फ़िल्टर पर जोड़ें:

1. डि़ज़ाइनर पर वापस जाएँ.
2. सम्मिलित करें टैब पर, टेक्स्ट का चयन करें, इनपुट टेक्स्ट का चयन करें, और नए नियंत्रण का नाम बदलकर नाम फ़िल्टर करें. पाठ नियंत्रण को स्लाइडर के नीचे स्थानांतरित करें.
3. गैलरी के आइटम गुण को निम्नलिखित अभिव्यक्ति पर सेट करें:
   Filter(Inventory, UnitsInStock<=StockFilter.Value && NameFilter.Text in ProductName)
4. पूर्वावलोकन में, स्लाइडर को 30 पर सेट करें, और पाठ-इनपुट नियंत्रण में अक्षर g लिखें. गैलरी में केवल वही उत्पाद दिखाया गया है जिसकी स्टॉक में 30 से कम इकाइयां हैं और जिसका नाम "g" अक्षर से है:
   

युक्तियाँ और तरीके

• किसी भी समय, आप पूर्वावलोकन बटन () का चयन करके देख सकते हैं कि आपने क्या बनाया है और उसका परीक्षण कर सकते हैं।
• अपना ऐप डिज़ाइन करते समय, आप क्लिक-एंड-ड्रैग का उपयोग करके नियंत्रणों का आकार बदल सकते हैं और उन्हें घुमा सकते हैं.
• पूर्वावलोकन विंडो बंद करने के लिए ESC दबाएँ या X चुनें।
• गैलरी का उपयोग करते समय, गैलरी में सभी आइटम बदलने के लिए गैलरी में प्रथम आइटम का चयन करें. उदाहरण के लिए, गैलरी में सभी आइटम में बॉर्डर जोड़ने के लिए प्रथम आइटम का चयन करें.
• गैलरी के गुणों को अद्यतन करने के लिए, गैलरी में किसी भी आइटम का चयन करें सिवाय पहले वाले को छोड़कर. उदाहरण के लिए, आइटम, शोस्क्रॉलबार, और गैलरी पर लागू होने वाले अन्य गुणों (गैलरी में मौजूद आइटम नहीं) को अपडेट करने के लिए दूसरा आइटम चुनें.

आपने क्या सीखा

इस विषय में, आपने:

• एक संग्रह बनाया, डेटा, जिनमें .jpg छवियाँ भी शामिल थीं, उन्हें संग्रह में आयात किया, और डेटा को गैलरी में दिखाया.
• गैलरी में प्रत्येक छवि के अंतर्गत, उस आइटम के लिए स्टॉक में इकाइयों को सूचीबद्ध करने वाले लेबल को कॉन्फ़िगर किया.
• आपके द्वारा चयनित आइटम के चारों ओर एक बॉर्डर जोड़ा.
• उत्पाद नाम के द्वारा आइटम को आरोही और अवरोही ऑर्डर में सॉर्ट किया.
• उत्पादों को स्टॉक में मौजूद इकाइयाँ और उत्पाद नाम द्वारा फ़िल्टर करने के लिए एक स्लाइडर और एक इनपुट पाठ नियंत्रण जोड़ा.