מרכז ההדרכות של סקולילנד

Chained Select ב-Fluent Forms

תוכן עניינים

Chained Select ב-Fluent Forms #

Chained Select הוא שדה Dropdown דינמי ליצירת Dropdown תלויים מנתוני CSV המאכלסים באופן דינמי קבוצה של אלמנטי Select בהתאם לבחירה הקודמת.

עקבו אחר השלבים הבאים כדי להוסיף את שדה Chained Select שלכם ב-Fluent Forms.

כדי להוסיף שדה זה לטופס שלכם, גררו ושחררו את השדה מן שדות Input המתקדמים הזמינים. ניתן להוסיף שדות Input לטופס בדרכים שונות אחרות.

שדה Chained Select מעניק לכם שלושה שדות Dropdown. Parent (הורה), Child (בן), ו-Grand Child (נכד). כאשר ה-Dropdown ההורה נבחר, ה-Dropdown הבן יציג רק אפשרויות השייכות לשדה ההורה.

זה אותו הדבר לנכד. לאחר בחירת ה-Dropdown הבן, Grand Child יציג רק אפשרויות אלו תחת שדה הבן שנבחר. כאשר Dropdown הורה משתנה וה-Child Option אינה תואמת, השדה יתאפס באופן אוטומטי.

כדי להפעיל התאמה אישית, לחצו על אייקון העריכה על ידי הדלקה על השדה. או לחצו על Input Customization Tab (כרטיסיית התאמה אישית של Input) בסרגל הצד הימני בעת בחירת השדה.

בחלק Input Customization (התאמה אישית של Input), תוכלו להתאים אישית את שדה Input בדרכים הבאות. בחלק זה תמצאו 2 חלקים:

בצד ימין של הכרטיסייה, ישנן כמה אפשרויות בסיסיות חשובות המוצגות להלן:

Element Label (תווית אלמנט): זהו הטקסט שהמשתמשים יראו בצורת שדה ה-Input. אתם יכולים לשים כאן כל טקסט שעוזר להבין את ההנחיה של אותו שדה.

Admin Field Label (תווית שדה ניהול): אם אתם רוצים להציג תווית שונה למשתמשי ה-Admin כאשר הם צופים בהגשות הטופס, תוכלו להגדיר זאת. לא יש לזה שום השפעה בפועל על הטופס אלא רק למטרות ניהוליות.

Label Placement (מיקום התווית): קבע את מיקום התווית שהגדרתם בעבר בקשר לשדה ה-Input. האפשרויות הזמינות הן Top (למעלה), Left (שמאל), Right (ימין), ו-Default (ברירת מחדל). כולם מובנים מעצמם למעט ברירת המחדל. המשמעות שלו היא שהוא יייצג את הגדרות מיקום התווית הגלובליות שלכם.

Required (נדרש): קבע האם השדה יכול להיות ריק או לא כאשר המשתמש שולח את הטופס שלכם על ידי בחירת האפשרות המתאימה מכאן.

CSV Data Source (מקור נתונים CSV): העלו את קובץ Chained Select CSV שלכם או הספיקו כתובת URL מרחוקה. כדי להאכלס את השדה, עליכם להעלות קובץ CSV או להזין כתובת URL של CSV מרחוקה. קובץ הדגמה ניתן כאן; עליכם לעקוב אחר מבנה נתוני הקובץ; אחרת, זה לא יעבוד.

הנה צילום מסך של נתוני הדגמה. שמות העמודה הראשונה הם מקומות-מחזיקים (Placeholder) עבור שדות Dropdown.

הנה צילום מסך של ה-Input באמצעות נתונים אלה.

ההתאמות האישיות המתקדמות הזמינות לשדה Chained Select הן כדלקמן:

Name Attribute (תכונת שם): תכונת ה-Name של שדה ה-Input היא המקביל HTML לאותו שם. אתם לא צריכים לשנות זאת.

Help Message (הודעת עזרה): כדי להנחות את המשתמש שלכם בצורה יסודית, אתם יכולים להשתמש באפשרות זו. פשוט הוסיפו את הטקסט שלכם כאן, והוא יוצג כהודעת עזרה למשתמש.

Container Class (מחלקת המיכל): השתמשו באפשרות זו כדי להוסיף את מחלקות ה-CSS המותאמות אישית שלכם ל-Wrapper של השדה.

Element Class (מחלקת אלמנט): באופן דומה, אתם יכולים להוסיף מחלקות CSS מותאמות אישית לשדה ה-Input עצמו.

Enable Searchable Smart Options (הפוך אפשרויות חכמות ניתנות לחיפוש): כאשר יש לכם רשימת Dropdown ארוכה, ייתכן שתרצו לתן למשתמשים את אפשרות החיפוש לבחירת שדה. פשוט הפעילו את אפשרויות Searchable Smart כדי לאפשר למשתמשים לחפש בשדות Dropdown. כאשר אפשרות זו נבחרת, מופיעה אפשרות חיפוש המאפשרת למשתמש לחפש באופן ידני.

Conditional Logic (לוגיקה תנאית): אתם יכולים ליצור כללים מסוימים כדי להסתיר/להציג באופן דינמי את שדה ה-Input בהתאם לערכים משדות אחרים.

אהבתם? מוזמנים לשתף:

מדריך זה היה שימושי?

תוכן עניינים