แท็กเทมเพลต Liquid สำหรับส่วนประกอบของโค้ด

หมายเหตุ

พอร์ทัล Power Apps คือ Power Pages โดยมีผลในวันที่ 12 ตุลาคม 2022 ข้อมูลเพิ่มเติม: Microsoft Power Pages มีให้ใช้งานทั่วไป (บล็อก)
ในไม่ช้าเราจะย้ายและรวมคู่มือพอร์ทัล Power Apps เข้ากับ คู่มือ Power Pages

Power Apps component framework ช่วยให้นักพัฒนามืออาชีพและผู้สร้างแอปสร้างส่วนประกอบของโค้ดสำหรับแอปแบบจำลองและแอปพื้นที่ทำงาน ส่วนประกอบของโค้ดเหล่านี้สามารถมอบประสบการณ์ที่ได้รับการปรับปรุงสำหรับผู้ใช้ที่ทำงานกับข้อมูลบนฟอร์ม มุมมอง และแดชบอร์ด ข้อมูลเพิ่มเติม: ใช้ส่วนประกอบของโค้ดในพอร์ทัล

ข้อสำคัญ

แท็กเทมเพลต Liquid สำหรับส่วนประกอบของโค้ด ต้องใช้พอร์ทัลรุ่น 9.3.10.x หรือใหม่กว่า

ในรุ่นนี้ เราได้แนะนำความสามารถในการเพิ่มส่วนประกอบของโค้ด โดยใช้ แท็กเทมเพลต Liquid บนเว็บเพจ และส่วนประกอบที่เปิดใช้งานโดยใช้ API สำหรับเว็บ ที่เปิดใช้งานสำหรับส่วนประกอบระดับฟิลด์บนฟอร์มในพอร์ทัล

ส่วนประกอบของโค้ดสามารถเพิ่มได้ โดยใช้แท็กเทมเพลต Liquid ของ codecomponent คีย์สำหรับแสดงส่วนประกอบของโค้ดที่ต้องโหลดถูกส่งผ่านโดยใช้แอตทริบิวต์ name คีย์อาจเป็น GUID (ซึ่งเป็นรหัสส่วนประกอบของโค้ด) หรือชื่อของส่วนประกอบของโค้ดที่นำเข้าไปยัง Microsoft Dataverse

ค่าของคุณสมบัติที่ส่วนประกอบของโค้ดคาดว่าจะต้องส่งผ่านเป็นคู่ คีย์/ค่า ที่คั่นด้วย ":" (เครื่องหมายทวิภาค) โดยที่คีย์คือชื่อคุณสมบัติ และค่าคือค่าสตริง JSON

{% codecomponent name: <ID or name> <property1:value> <property2:value> %}

ตัวอย่างเช่น ในการเพิ่มส่วนประกอบของโค้ด โดยคาดหวังพารามิเตอร์ข้อมูลป้อนเข้าที่ชื่อ controlValue ใช้แท็กเทมเพลต Liquid ต่อไปนี้:

{% codecomponent name:abc_SampleNamespace.MapControl controlValue:'Space Needle' controlApiKey:<API Key Value>%}

เคล็ดลับ

ตัวอย่างนี้ใช้พารามิเตอร์ที่เรียกว่า controlvalue และ controlApiKey อย่างไรก็ตาม ส่วนประกอบที่คุณใช้อาจต้องการชื่อพารามิเตอร์ที่แตกต่างกัน

คุณสามารถใช้ การควบคุมแผนที่ตัวอย่าง และ บรรจุส่วนประกอบของโค้ดเป็นโซลูชัน สำหรับใช้กับพอร์ทัลได้

หมายเหตุ

ทรัพยากรที่สร้างขึ้นโดยชุมชนไม่ได้รับการสนับสนุนโดย Microsoft ถ้าคุณมีคำถามหรือปัญหาเกี่ยวกับทรัพยากรของชุมชน โปรดติดต่อผู้เผยแพร่ของทรัพยากรนั้นๆ ก่อนการใช้ทรัพยากรเหล่านี้ คุณต้องแน่ใจว่าทรัพยากรเหล่านี้ตรงตามแนวทาง Power Apps component framework และควรใช้เพื่อการอ้างอิงเท่านั้น

บทช่วยสอน: ใช้ส่วนประกอบของโค้ดบนหน้าเว็บที่มีแท็กเทมเพลต Liquid

ในบทช่วยสอนนี้ คุณจะต้องกำหนดค่าพอร์ทัล Power Apps เพื่อเพิ่มส่วนประกอบไปยังหน้าเว็บ จากนั้น คุณจะไปที่หน้าเว็บพอร์ทัลและโต้ตอบกับส่วนประกอบ

ก่อนที่คุณเริ่มต้น

หากคุณกำลังใช้ส่วนประกอบของโค้ดตัวอย่างที่ใช้ในบทช่วยสอนนี้ ให้ตรวจสอบให้แน่ใจว่าคุณนำเข้าโซลูชันตัวอย่างไปยังสภาพแวดล้อมก่อนจึงจะเริ่ม หากต้องการเรียนรู้เกี่ยวกับการนำเข้าโซลูชัน ไปที่ นำเข้าโซลูชัน

ข้อกำหนดเบื้องต้น

สำหรับข้อกำหนดเบื้องต้น และเรียนรู้เกี่ยวกับส่วนประกอบของโค้ดที่สนับสนุน/ไม่ได้รับการสนับสนุนในพอร์ทัล ไปที่ ใช้ส่วนประกอบของโค้ดในพอร์ทัล

หมายเหตุ

บทช่วยสอนนี้ใช้ส่วนประกอบของโค้ดตัวอย่างที่สร้างขึ้นโดยใช้ Power Apps component framework เพื่อแสดงการควบคุมแผนที่บนหน้าเว็บ คุณยังสามารถใช้ส่วนประกอบที่มีอยู่หรือส่วนประกอบใหม่ของคุณเอง และหน้าเว็บอื่นๆ สำหรับบทช่วยสอนนี้ ในกรณีนี้ ตรวจสอบให้แน่ใจว่าได้ใช้ส่วนประกอบและหน้าเว็บของคุณ เมื่อทำตามขั้นตอนในบทช่วยสอนนี้ สำหรับข้อมูลเพิ่มเติมเกี่ยวกับวิธีการสร้างส่วนประกอบของโค้ด ไปที่ สร้างส่วนประกอบแรกของคุณ

ขั้นตอนที่ 1 เพิ่มส่วนประกอบของโค้ดไปยังหน้าเว็บจาก Studio

1. เปิดพอร์ทัลของคุณใน  พอร์ทัลสตูดิโอ Power Apps

2. ที่มุมบนซ้าย ให้เลือก หน้าใหม่

3. เลือก ว่างเปล่า

4. ในบานหน้าต่างคุณสมบัติด้านขวา ให้อัปเดตชื่อเว็บเพจ ตัวอย่างเช่น "โปรแกรมดูแผนที่"

5. อัปเดต URL บางส่วน ตัวอย่างเช่น "mapviewer"

6. ขยาย สิทธิ์

7. ปิดใช้งาน เพจใช้ได้กับทุกคน

8. เลือกบทบาทเว็บที่ควรได้รับอนุญาตให้เข้าถึงหน้านี้

9. เลือกพื้นที่ที่สามารถแก้ไขได้ในหน้าเพื่อแก้ไขโค้ดต้นฉบับ Liquid

10. เปิด ตัวแก้ไขโค้ด ของสตูดิโอ

11. เพิ่มการควบคุมด้วยแท็กเทมเพลต Liquid โดยใช้ไวยากรณ์ต่อไปนี้:

    {% codecomponent name:abc\_SampleNamespace.MapControl controlValue:'Space Needle' controlApiKey:<API Key Value> %}
    

    เคล็ดลับ

    ในการดึงรายละเอียดของส่วนประกอบที่นำเข้าทั้งหมด และเพื่อค้นหาชื่อส่วนประกอบ โปรดดูที่ API สำหรับเว็บ CustomControl

    ตัวอย่างเช่น

    • หากต้องการค้นหาส่วนประกอบ:

      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

12. บันทึก และปิดตัวแก้ไขโค้ด

13. ที่มุมขวาบน ให้เลือก เรียกดูเว็บไซต์

14. หน้าเว็บจะแสดงตัวควบคุมที่เพิ่มเข้าไป

ขั้นตอนถัดไป

ภาพรวม: ใช้ส่วนประกอบของโค้ดในพอร์ทัล

ดูเพิ่มเติม

แท็กเอนทิตี Codecomponent Dataverse
แท็กเทมเพลต Codecomponen
ภาพรวมของ Power Apps component framework
สร้างส่วนประกอบแรกของคุณ
เพิ่มส่วนประกอบโค้ดลงในคอลัมน์หรือตารางในแอปแบบจำลอง
ใช้งานส่วนประกอบ API เว็บกับพอร์ทัลตัวอย่าง

หมายเหตุ

บอกให้เราทราบเกี่ยวกับภาษาที่คุณต้องการในคู่มือ ทำแบบสำรวจสั้นๆ (โปรดทราบว่าแบบสำรวจนี้เป็นภาษาอังกฤษ)

แบบสำรวจนี้ใช้เวลาทำประมาณเจ็ดนาที ไม่มีการเก็บข้อมูลส่วนบุคคล (คำชี้แจงสิทธิ์ส่วนบุคคล)