Flow

โฟลว์ (Flows) ในลักษณะของ FlowEngine คือ พื้นที่ที่อนุญาตให้ผู้ใช้งานเชื่อมต่อการทำงานในแต่ละส่วนเข้าด้วยกันราวกับสายไฟที่เชื่อมต่อระหว่างสวิตช์ไปยังหลอดไฟต่าง ๆ โดยเปรียบโหนด (Nodes) แต่ละโหนดเป็นอุปกรณ์แต่ละตัว และใช้เส้นการเชื่อมต่อ (Wires) แทนสายไฟที่เชื่อมโยงแต่ละอุปกรณ์เข้าด้วยกัน โฟลว์ คือ การประกอบร่างรวมกันระหว่างโหนดแต่ละประเภท ซึ่งลักษณะของโฟลว์ที่ถูกสร้างขึ้นมานั้นจะมีลักษณะคล้ายคลึงกับผังงาน (Flowchart) ที่ใช้โหนดแทนสัญลักษณ์ต่างของผังงาน และใช้เส้นที่เชื่อมโยงระหว่างแต่ละโหนดแทนลูกศรที่ถูกชี้ไประหว่างสัญลักษณ์แต่ละอย่าง ซึ่งจะเป็นการอธิบายว่าเมื่อการทำงานของโหนดนี้สิ้นสุดลง จะส่งผลลัพธ์หรือต้องการให้โหนดโหนดใดทำงานในลำดับถัดไป

สร้างโฟลว์ใหม่

โฟลว์แต่ละผังจะถูกแยกออกจากกันโดยแถบเมนูด้านบนของเวิร์คสเปซ ซึ่งผู้ใช้งานสามารถสร้างโฟลว์เพิ่มเติมได้ ในกรณีที่ต้องการแยกประเภทของโฟลว์แต่ละผังออกจากกันและเพื่อจัดการโหนดต่าง ๆ ให้เป็นระเบียบเรียบร้อยมากขึ้น โดยโฟลว์แต่ละโฟลว์จะมีชื่อและคำอธิบายปรากฏที่แถบเมนูรายละเอียดด้านขวามือ การสร้างโฟลว์ใหม่ขึ้นมานั้น ผู้ใช้งานสามารถทำได้โดยการคลิกที่ปุ่ม ‘+’ บนแถบรายชื่อโฟลว์ หรือทำการ double-click บนพื้นที่เปล่าที่แถบรายชื่อโฟลว์นั้น

โฟลว์ใหม่ที่ถูกสร้างขึ้นมาจะถูกตั้งชื่อว่า ‘Flow #’ ซึ่ง # คือลำดับของโฟลว์ที่ถูกสร้างขึ้นมาล่าสุดที่ยังไม่ได้ทำการตั้งชื่อ ในกรณีที่ผู้ใช้งานต้องการเปลี่ยนชื่อหรือเพิ่มคำอธิบายให้กับโฟลว์นี้ ให้ผู้ใช้งานทำการกด double-click ที่ชื่อของโฟลว์นี้ที่แถบรายชื่อโฟลว์เพื่อเปิดหน้าต่างแก้ไขออกมาทางด้านขวาของหน้าต่างโปรแกรม ซึ่งเมื่อทำการแก้ไขเสร็จเรียบร้อยแล้ว ชื่อใหม่จะปรากฏขึ้นบนแถบโฟลว์ของโฟลว์นี้ และจะปรากฏทั้งชื่อและคำอธิบายใหม่ที่สร้างขึ้นมาบนแถบเมนูข้อมูลรายละเอียดด้านขวามือของหน้าต่างโปรแกรม นอกจากคำอธิบายโดยปกติแล้ว ผู้ใช้งานยังสามารถใช้การเขียนในลักษณะ Markdown ลงไปในส่วนของคำอธิบายได้อีกด้วย ผู้ใช้งานสามารถศึกษาวิธีการเขียน Markdown ลงไปได้ผ่านทางเว็บไซต์ https://www.markdownguide.org/basic-syntax/ หรือใช้เครื่องมือที่ปรากฏให้บนแถบเครื่องมือของแถบหน้าต่างแก้ไขนั้นในการเขียนก็ได้เช่นกัน

การปรับมุมมองโฟลว์

ด้านล่างของโฟลว์จะประกอบไปด้วยปุ่มที่ใช้ในการปรับลด-ขยายมุมมองของโฟลว์ได้ เช่นเดียวกับการกลับไปยังค่าเริ่มต้นของการปรับลด-ขยายมุมมอง อีกทั้งยังมีปุ่มที่จะแสดงให้เห็นกรอบมุมมองปัจจุบัน (View Navigator) ของโฟลว์ที่ใช้งานอยู่นี้อีกด้วย ภาพมุมมองปัจจุบันที่ปรากฏขึ้นมานี้จะช่วยให้ผู้ใช้งานรู้ว่าตอนนี้โฟลว์ปัจจุบันแสดงโฟลว์ในตำแหน่งใดให้เห็นอยู่ ซึ่งจะมีประโยชน์ต่อโฟลว์ขนาดใหญ่ที่ผู้ใช้งานทำการสร้างเอาไว้ โดยจะปรากฏขึ้นเป็นหน้าต่างเล็ก ๆ ทางขวามือด้านล่างของโฟลว์ ซึ่งมุมมองปัจจุบันจะปรากฏภายในกรอบสีขาวในหน้าต่างนั้น หากผู้ใช้งานต้องการจัดการตั้งค่าเกี่ยวกับมุมมองของ ให้ทำการไปยังหน้าการตั้งค่าโดยกดปุ่ม Ctrl/⌘ + , เพื่อเปิดหน้าต่างการตั้งค่าขึ้นมา ซึ่งภายในหน้าต่างการตั้งค่านั้น ผู้ใช้งานสามารถตั้งค่าได้ตั้งแต่ภาษาที่ใช้งาน ลักษณะของตารางที่ปรากฏในโฟลว์ ลักษณะของโหนดในโฟลว์ รวมไปถึงการปรากฏตัวช่วย (Tips) ขึ้นมาด้วย

การตั้งค่าโฟลว์

ดังที่กล่าวไปในหัวข้อก่อนหน้า ผู้ใช้งานสามารถแก้ไขชื่อและคำอธิบายของโฟลว์แต่ละหน้าได้โดยการ double-click ที่ชื่อของโฟลว์บนแถบรายชื่อโฟลว์นั้น นอกเหนือจากนั้น ผู้ใช้งานยังสามารถเลือกได้ว่าต้องการให้โหนดต่าง ๆ ภายในโฟลว์ทั้งหมดนั้นทำงานหรือไม่ โดยคลิกที่ปุ่ม ‘Enabled/Disabled’ ที่อยู่ด้านล่างของแถบเมนูแก้ไขทางด้านขวาเพื่อเปิด/ปิดการใช้งานของโฟลว์นั้น ซึ่งการปิดการใช้งานโฟลว์จะไม่ทำการลบสิ่งที่ผู้ใช้งานสร้างเอาไว้ภายในโฟลว์ แต่จะเป็นการไม่ทำให้โหนดต่าง ๆ เหล่านั้นที่ถูกสร้างเอาไว้ได้ออกมาแสดงผลให้ผู้ใช้งานเห็น

หากผู้ใช้งานต้องการลบโฟลว์นั้นทิ้ง ให้ทำการคลิกที่ปุ่ม ‘Delete’ ด้านซ้ายบนของแถบเมนูแก้ไขเพื่อลบโฟลว์นั้นทิ้ง

โหนด

เพื่อสร้างโฟลว์ขึ้นมาภายในโฟลว์ ผู้ใช้งานจำเป็นต้องนำโหนดซึ่งอยู่ภายในแพลิตต์ทางด้านซ้ายของโปรแกรมลงมาวางในโฟลว์ ซึ่งผู้ใช้งานสามารถลากโหนดเหล่านั้นลงมาได้โดยตรง หรือทำการกดปุ่ม Ctrl/⌘ ค้างไว้แล้วทำการ double-click บนเวิร์คสเปซซึ่งจะปรากฏตัวเลือกโหนด (Quick-Add Dialog) ขึ้นมาให้ผู้ใช้งานสามารถเลือกโหนดที่จะปรากฏบนโฟลว์นี้ได้ทันที โดยจะปรากฏโหนดหลัก 5 ประเภท ได้แก่ Inject, Debug, Function, Change, และ Switch อยู่ด้านบนสุดของตัวเลือกนี้ ตามด้วยโหนดที่ถูกเพิ่มไปในโฟลว์ล่าสุด และปิดท้ายด้วยโหนดอื่น ๆ ที่เหลือ เรียงตามลำดับตัวอักษร โหนดแต่ละโหนดจะถูกเชื่อมเข้าด้วยกันจากการลากเส้นเชื่อมต่อจากจุดเชื่อมของโหนดเหล่านั้น ซึ่งโหนดแต่ละโหนดจะมีจุดเชื่อมขาเข้าไปในโหนดได้เพียงจุดเดียว แต่สามารถส่งข้อมูลออกจากโหนดนั้นเป็นหลายจุดการเชื่อมต่อได้ โดยหากผู้ใช้งานนำเมาส์ไปลอยเหนือจุดเชื่อมต่อขาออกของแต่ละโหนด จุดเชื่อมต่อนั้นจะปรากฏข้อความช่วยเหลือเพื่อแสดงว่าค่าใดที่จะกลายเป็นผลลัพธ์ออกไปจากจุดการเชื่อมต่อของโหนดนั้น

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

ในกรณีที่โหนดนั้นมีการเปลี่ยนแปลงเกิดขึ้นและยังไม่ได้ทำการบันทึกการเปลี่ยนแปลงที่เกิดขึ้นกับโฟลว์ โหนดจะปรากฏวงกลมสีฟ้าขึ้นเล็ก ๆ ที่ด้านบนของโหนด ในขณะที่โหนดที่เกิดความผิดพลาดในการตั้งค่าภายในจะปรากฏเป็นสามเหลี่ยมสีแดงขึ้นบนโหนดแทน

โหนดบางโหนดอาจปรากฏปุ่มขึ้นที่ด้านซ้ายหรือขวาของโหนดนั้นเพื่อใช้ในการมีปฏิสัมพันธ์กับโหนดนั้นได้โดยตรง โดยโหนดหลักที่มีปุ่มการเหล่านี้ปรากฏขึ้น ได้แก่โหนด Inject และ Debug นั่นเอง

เส้นเชื่อมต่อ

โหนดแต่ละโหนดจะถูกเชื่อมเข้าด้วยกันโดยการคลิกเมาส์ซ้ายค้างบนจุดเชื่อมต่อของโหนดหนึ่งแล้วลากไปโยงกับอีกโหนดหนึ่งแล้วปล่อยเมาส์ การทำเช่นนี้จะทำให้ปรากฏเส้นเชื่อมต่อ (Wire) ขึ้นระหว่างโหนดที่เลือกทั้งสองโหนดนั้น โดยมีกฎเพียงข้อเดียวว่า เส้นที่ลากออกจากโหนดนั้นต้องลากออกจากทางด้านขวาของโหนด และลากเข้าทางด้านซ้ายของอีกโหนดหนึ่งเท่านั้น

อีกวิธีหนึ่งที่สามารถทำได้คือการคลิกที่ปุ่ม Ctrl/Command ค้างบนแป้นคีย์บอร์ดแล้วทำการนำเมาส์ซ้ายไปคลิกบนจุดการเชื่อมต่อทางออกของโหนดหนึ่ง (โดยไม่ต้องลากเส้นออกมา) จากนั้นผู้ใช้งานสามารถทำการคลิกที่จุดเชื่อมต่อบนอีกโหนดหนึ่ง ได้ทันที ซึ่งจะปรากฏเป็นเส้นเชื่อมต่อเช่นเดียวกับการลากเชื่อมธรรมดา แต่การทำเช่นนี้จะอนุญาตให้ผู้ใช้งานสามารถลากเส้นเชื่อมต่อเพิ่มเติมจากโหนดล่าสุดที่คลิกไป เพื่อลากไปยังโหนดอื่น ๆ อีกได้เช่นกัน ซึ่งจะมีประโยชน์ในกรณีที่ผู้ใช้งานต้องการเชื่อมต่อโหนดจำนวนมากเข้าด้วยกันเป็นโฟลว์ขนาดใหญ่โฟลว์หนึ่ง ยิ่งไปกว่านั้น หากผู้ใช้งานนำโหนดที่สามารถทำหน้าที่ได้ทั้งรับและส่งค่าข้อมูล (โหนดที่มีจุดสีเทาอยู่ทั้งสองข้างของโหนด) มาวางลงไปบนเส้นเชื่อมต่อที่เชื่อมระหว่างโหนดอื่น ๆ สองโหนดอยู่ เส้นเชื่อมต่อจะกลายเป็นเส้นประ และเมื่อผู้ใช้งานปล่อยเมาส์ เส้นเชื่อมต่อนั้นจะเชื่อมโหนดนั้นล่าสุดเข้ากับอีกสองโหนดที่เหลือทันทีโดยที่ผู้ใช้งานไม่จำเป็นต้องลากการเชื่อมต่อใหม่อีกต่อไป

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

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

ซับโฟลว์

ในบางครั้ง การสร้างโฟลว์ขนาดใหญ่โฟลว์หนึ่งอาจประกอบไปด้วยส่วนของการทำงานในหลาย ๆ ส่วนที่ถูกเชื่อมต่ออยู่ภายในโฟลว์เดียวกัน บางโฟลว์อาจเป็นโฟลว์ที่ถูกใช้อยู่บ่อยครั้ง หรือบางโฟลว์นั้นทำให้โฟลว์โดยรวมดูใหญ่จนยุ่งเหยิง และยากต่อการจัดการ การสร้างซับโฟลว์ (Subflows) ขึ้นมาจึงจะช่วยสร้างกลุ่มให้แก่โหนดต่าง ๆ ภายในโฟลว์ให้อยู่รวมกันได้ การทำเช่นนี้จะลดความยุ่งเหยิงของการเชื่อมต่อลง อีกทั้งยังมีประโยชน์สำหรับกลุ่มของโหนดที่อาจจะนำ ไปใช้ในตำแหน่งอื่น ๆ ของโฟลว์อีกด้วย

การสร้างซับโฟลว์ขึ้นมาจะเปรียบเสมือนการสร้างโหนดใหม่ขึ้นมาด้วย ซึ่งเมื่อการสร้างซับโฟลว์นี้ถูกสร้างได้สำเร็จ ซับโฟลว์นี้จะปรากฏเป็นอีกโหนดหนึ่งบนแพลิตต์ด้านซ้ายมือของหน้าต่างโปรแกรม อย่างไรก็ดี การสร้างซับโฟลว์นั้นไม่สามารถสร้าง โดยมีซับโฟลว์ตัวเองอยู่ภายในนั้นได้ ไม่ว่ากรณีใดก็ตาม การสร้างซับโฟลว์สามารถทำได้ 2 วิธี

1. การสร้างซับโฟลว์ใหม่ขึ้นมา ให้ทำการไปยังเมนู ‘Subflows’ บนแถบเมนูด้านบน แล้วเลือก ‘Create Subflow’ ซึ่งโปรแกรมจะ ปรากฏหน้าต่างซับโฟลว์ใหม่ขึ้นมาให้ผู้ใช้งานสามารถสร้างซับโฟลว์ภายในหน้านั้นได้

2. การสร้างซับโฟลว์จากโหนดที่เลือกไว้ในหน้าโฟลว์ ให้ผู้ใช้งานคลิกเมาส์ซ้ายแล้วลากคลุมโหนดที่ต้องการสร้างเป็นซับโฟลว์ จากนั้นไปยังเมนู ‘Subflows’ บนแถบเมนูด้านบนแล้วเลือก ‘Selection to Subflow’ เพื่อเปลี่ยนกลุ่มของโหนดที่เลือกให้กลายเป็นซับโฟลว์ใหม่ทันที ซึ่งการเช่นนี้จะสามารถทำได้ในกรณีที่เส้นเชื่อมต่อขาเข้าไปในซับโฟลว์นั้น เชื่อมต่อไปยังโหนดเพียงโหนดเดียวเท่านั้น

เมื่อซับโฟลว์ถูกสร้างขึ้นมาแล้ว ในกรณีที่ผู้ใช้งานต้องการแก้ไขโฟลว์ภายในหน้าโฟลว์นั้น ผู้ใช้งานสามารถทำได้โดยการ double-click ที่โหนดของซับโฟลว์ที่ต้องการแก้ไขในแพลิตต์ หรือคลิกที่ปุ่ม ‘Edit flow template’ เมื่อทำการ double-click ที่โหนดของซับโฟลว์นี้ที่วางอยู่บนหน้าโฟลว์ซึ่งจะทำการเปิดโฟลว์ใหม่ขึ้นมาในลักษณะเดียวกันกับโฟลว์ทั่ว ๆ ไป นั่นหมายความว่า ผู้ใช้งานสามารถแก้ไขหรือใช้งานซับโฟลว์นั้นได้เช่นเดียวกับโฟลว์ปกติอื่น ๆ และสามารถปิดแถบซับโฟลว์นั้นเพื่อซ่อนซับโฟลว์ลงไปได้เช่นกัน

ลักษณะของโหนดแบบซับโฟลว์เป็นเช่นเดียวกับโหนดทั่ว ๆ ไป คือจะปรากฏจุดการเชื่อมต่อสีเทาอยู่ด้านซ้ายและขวาของโหนดตามกฎเดิมเช่นกัน มีจุดขาเข้าได้เพียงจุดเดียว แต่สามารถมีจุดการเชื่อมต่อขาออกได้มากกว่าหนึ่งจุด อีกทั้งยังสามารถแก้ไขข้อมูลทั้งชื่อ คำอธิบาย สัญลักษณ์ หรือสีก็ได้เช่นกัน อย่างไรก็ดี สิ่งหนึ่งที่แตกต่างจากโหนดปกติคือการปรากฏแถบแก้ไขส่วน Environment Varibale ขึ้นมาเพื่อให้ผู้ใช้งานสามารถสร้างตัวแปรเพิ่มเติมขึ้นมาใช้งาน ภายในโฟลว์ได้ โดยตัวแปรเหล่านี้จะเป็นตัวแปรที่เฉพาะโหนดที่ถูกใช้งานภายในซับโฟลว์นี้เท่านั้นจึงจะสามารถใช้ค่าตัวแปรที่สร้างมาเหล่านั้นได้

การเลือกโหนด

ในการเลือกโหนดที่วางอยู่แล้วในโฟลว์ ผู้ใช้งานสามารถคลิกลงไปบนโหนดนั้นได้โดยตรง เช่นเดียวกับการยกเลิกการเลือกโหนดนั้น โดยโหนดที่ถูกเลือกจะถูกล้อมไว้ด้วยกรอบสีส้ม และจะปรากฏรายละเอียดขึ้นในแถบเมนูข้างทางด้านขวาของหน้าต่างโปรแกรม

หากปุ่ม Ctrl/⌘ ถูกกดค้างเอาไว้บนแป้นคีย์บอร์ดในขณะที่กดบนโหนดต่าง ๆ จะเป็นการเพิ่มโหนดภายในโฟลว์นั้นเข้าไปอยู่ในชุดของโหนดที่เลือกทีละโหนด แต่หากเป็น Shift ที่ถูกกดค้างไว้บนแป้นคีย์บอร์ด โหนดที่เลือกและทุกโหนดที่เชื่อมอยู่กับโหนดที่เลือกนั้นจะถูกเพิ่มเข้าไปอยู่ในชุดของโหนดที่เลือก หรืออีกกรณีคือให้ผู้ใช้งานทำการใช้เมาส์ลากคลุมโหนดที่ต้องการเลือกได้โดยตรงผ่านเครื่องมือการเลือกแบบอิสระ (Lasso Tool) ซึ่งจะช่วยให้ผู้ใช้งานสามารถเลือกโหนดหลาย ๆ โหนดได้ภายในการลากคลุมเพียงครั้งเดียว

ในทางกลับกัน เส้นเชื่อมต่อระหว่างแต่ละโหนดจะสามารถถูกเลือกได้เพียงทีละเส้นเท่านั้น โหนดที่ถูกเลือกต่าง ๆ สามารถคัดลอก ตัด และวางบนโฟลว์ต่าง ๆ ได้ โดยใช้คลิปบอร์ดภายใน (Internal Clipboard) ในการวางโหนดที่ถูกคัดลอกหรือตัด

การเลือกโฟลว์

ผู้ใช้งานสามารถเลือกโฟลว์หลาย ๆ หน้าได้ด้วยการกดปุ่ม Ctrl หรือ Command ค้างไว้แล้วกดเลือกโฟลว์ที่ต้องการบนแถบโฟลว์ด้านบนได้เช่นเดียวกับการเลือกโหนด ซึ่งโฟลว์ที่ถูกเลือกด้วยวิธีนี้จะปรากฏสัญลักษณ์เครื่องหมาย ถูกขึ้นมาบนแถบชื่อของโฟลว์นั้น นอกเหนือจากนี้ ผู้ใช้งานยังสามารถคัดลอก ตัด และวางหน้าโฟลว์เหล่านี้ได้เช่นเดียวกับการเลือกโหนด

การส่งออกโฟลว์

ผู้ใช้งานสามารถนำโฟลว์ที่ถูกสร้างเอาไว้ออกไปวางยังโฟลว์ของผู้ใช้งานคนอื่น ๆ ได้ในรูปแบบของไฟล์ JSON โดยให้ทำการไปเมนูด้านขวามือบนแถบเมนูด้านบนแล้วคลิกเลือกที่ ‘Export’ ซึ่งผู้ใช้งานสามารถเลือกที่จะส่งออกโฟลว์หมดทั้งหน้า หรือส่งออกเฉพาะโฟลว์ที่ทำการเลือกไว้ก็ได้เช่นกัน

1. เลือกกลุ่มของโหนดที่ต้องการส่งออกจากโฟลว์นี้ โดยสามารถเลือกได้สามลักษณะ ได้แก่

   1. กลุ่มของโหนดที่ถูกเลือกภายในโฟลว์ (Selected nodes)

   2. หน้าของโฟลว์ปัจจุบันที่ทำการเปิดใช้งานอยู่ (Current flow)

   3. ทุกโฟลว์ที่อยู่ภายในโปรแกรมนี้ (All flows)

2. ผู้ใช้งานสามารถเลือกที่จะคัดลอกค่าของหน้าโฟลว์ที่ต้องการส่งออกนี้ให้ไปวางไว้ในหน้าคลิปบอร์ด (Clipboard) ได้

3. ผู้ใช้งานสามารถเลือกจัดเก็บโฟลว์ทั้งหมดให้อยู่ในลักษณะของ library ที่สามารถนำไปใช้งานในภายหลังได้ ซึ่ง library ที่ถูกจัดเก็บนั้นจะถูกใช้งานอยู่ภายในโฟลว์นั้นและถูกจัดเก็บในลักษณะของไฟล์ JSON

4. หน้าต่างนี้จะปรากฏค่า JSON ของโฟลว์ที่ผู้ใช้งานต้องการส่งออกขึ้นมา

5. ผู้ใช้งานสามารถจัดลักษณะของการแสดงผลได้ว่าต้องการให้แสดงออกมาในลักษณะใด ระหว่างย่อค่าข้อมูลทั้งหมดเข้าด้วยกัน (Compact) หรือจัดรูปให้อยู่ในลักษณะที่ดูง่าย (Formatted)

6. การคัดลอกค่าข้อมูล JSON ที่ปรากฏข้างต้นไปวางลงบนคลิปบอร์ด

7. ผู้ใช้งานสามารถดาวน์โหลดค่าข้อมูลของโฟลว์ให้ออกมาเป็นไฟล์ JSON ได้โดยตรง

การนำเข้าโฟลว์

ผู้ใช้งานสามารถเพิ่มโฟลว์เข้ามายังโฟลว์ปัจจุบันได้ ไม่ว่าจะเป็นการวางค่า JSON ที่ได้รับมาลงไปโดยตรง การเพิ่มไฟล์ JSON ที่ผู้ใช้งานมีอยู่เข้าไปในโฟลว์ การใช้งานจาก Flow library ที่อยู่ในพื้นที่ปัจจุบัน หรือการใช้งานโฟลว์ตัวอย่างที่จัดการโดยโหนดที่ถูกติดตั้งเอาไว้ และไม่ว่าจะนำเข้าโฟลว์ด้วยวิธีใด ผู้ใช้งานสามารถเลือกได้ว่าจะนำโฟลว์ที่นำเข้ามานั้นวางลงในโฟลว์ปัจจุบันหรือสร้างเป็นโฟลว์ใหม่ก็ได้เช่นกัน การนำเข้าโฟลว์นั้น ให้ผู้ใช้งานไปที่แถบเมนูด้านขวาบนแถบเมนูด้านบนแล้วคลิกเลือกที่ ‘Import’ เพื่อนำเข้าโฟลว์ที่ทำการส่งออก (Export) มาจากโฟลว์อื่น ๆ

1. ผู้ใช้งานสามารถนำไฟล์ JSON ของโหนดที่ถูกส่งออกมาก่อนหน้านี้มาวางลงไปในหน้าโฟลว์นี้เพื่อทำการนำเข้าโฟลว์นั้นเข้ามาในโปรแกรมได้

2. หากผู้ใช้งานทำการบันทึกค่าของโฟลว์นั้นใน library ผู้ใช้งานสามารถใช้งานมันได้โดยการเปิดแถบ library ขึ้นมาแล้วเลือกโฟลว์ที่ต้องการ

3. ในบางครั้ง อาจมีโฟลว์ตัวอย่างที่ถูกสร้างเอาไว้เพื่อเป็นแบบแปลนในการสร้างโฟลว์อื่น ๆ ที่เกี่ยวข้องกับโฟลว์ตัวอย่างนั้นอยู่ด้วย

4. ผู้ใช้งานสามารถวาง (Paste) ค่า JSON ที่ทำการคัดลอกลงบนคลิปบอร์ดไว้ก่อนหน้านี้ลงไปในพื้นที่ตรงกลางได้โดยตรง

5. ผู้ใช้งานสามารถเลือกได้ว่าต้องการจะนำโฟลว์ที่นำเข้ามานั้นใส่ลงไปในหน้าโฟลว์ที่กำลังเปิดใช้งานอยู่ (Current flow) หรือสร้างเป็นโฟลว์ใหม่อีกโฟลว์หนึ่งไปเลย (New flow)

6. เมื่อทำการเลือกโฟลว์ที่ต้องการจะนำเข้าและตั้งค่าการนำเข้าของโฟลว์นั้นไว้เรียบร้อยแล้ว ให้ผู้ใช้งานทำการคลิกที่ปุ่ม ‘Import’ เพื่อนำเข้าโฟลว์นั้น โดยโฟลว์ที่นำเข้าจะเคลื่อนที่ตามตำแหน่งที่เมาส์ขยับไป จนกว่าผู้ใช้งานจะคลิกลงบนเวิร์คสเปซในตำแหน่งที่ต้องการนำโฟลว์นั้นไปวางลง

ในเอกสารฉบับนี้ได้ทำการเขียนตัวอย่างของโฟลว์บางส่วนเอาไว้ให้ผู้ใช้งานสามารถคัดลอกไปวางในโฟลว์ของผู้ใช้งานเองได้ โดยจะปรากฏในลักษณะของค่า JSON ที่ถูกวางเอาไว้ในกรอบสี่เหลี่ยม เช่น

[
    {
        "id": "4f19b295.ce21dc",
        "type": "inject",
        "z": "8cfb1028.a0d6d",
        "name": "",
        "topic": "",
        "payload": "Hello World!",
        "payloadType": "str",
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "x": 370,
        "y": 960,
        "wires": [["67bbe1fd.ec7f1"]]
    },
    {
        "id": "67bbe1fd.ec7f1",
        "type": "debug",
        "z": "8cfb1028.a0d6d",
        "name": "",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "payload",
        "targetType": "msg",
        "x": 590,
        "y": 960,
        "wires": []
    }
]

โค้ดด้านบนนี้ คือ ตัวอย่างของโฟลว์ที่ใช้ในการส่งค่าข้อความ ‘Hello World!’ ออกไปแสดงผลในแถบเมนูข้างดีบัก ซึ่งเมื่อนำโค้ดด้านบนไปวางลงในโฟลว์ของผู้ใช้งาน จะปรากฏโฟลว์ดังรูปขึ้น

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

แถบเมนูข้าง

แถบเมนูข้าง (Sidebar) ทางด้านขวาของหน้าต่างโปรแกรมจะมีเครื่องมือช่วยเหลือให้สำหรับผู้ใช้งานสามารถนำไปใช้งานได้ เช่น แถบเมนูรายละเอียด (Info) ที่จะแสดงรายละเอียดของโหนดนั้น แถบเมนู Debug ที่จะแสดงข้อความที่ถูกส่งภายในโฟลว์ แถบเมนูตั้งค่าโหนด (Config) ที่ใช้ในการแก้ไขตั้งค่าการทำงานของโหนดต่าง ๆ เป็นต้น โดยบางโหนดก็อาจจะมีแถบเมนูข้างนี้เป็นของตัวเองก็เป็นได้ เช่น โหนดประเภทแดชบอร์ด (Dashboard) ที่มีแถบเมนูในการแก้ไขจัดการการแสดงผลของโหนดต่าง ๆ เป็นต้น ซึ่งผู้ใช้งานสามารถเปลี่ยนไปหน้าเมนูต่าง ๆ ได้โดยการคลิกที่ปุ่มลูกศรมุมขวาบนของแถบเมนูข้างนี้แล้วเลือกเมนูที่ต้องการเปิดใช้งาน

ผู้ใช้งานสามารถย่อขยายแถบเมนูข้างนี้ได้โดยการลากขอบของแถบเมนูข้างย่อเข้า-ขยายออกบนเวิร์คสเปซ แต่หากผู้ใช้งานลากจนเข้าใกล้ขอบของหน้าโปรแกรมทางด้านขวา แถบเมนูข้างจะถูกซ่อนลงไป ซึ่งผู้ใช้งานสามารถเปิดมันขึ้นมา ได้อีกครั้งโดยการนำเมาส์ไปลอยเหนือขอบหน้าต่างโปรแกรมด้านขวามือให้ปรากฏลูกศรออกมาแล้วคลิกที่ลูกศรนั้น หรือกดเลือกที่ ‘Show sidebar’ ในเมนู ‘View’ ซึ่งอยู่ภายในเมนูด้านขวาที่อยู่บนแถบเมนูด้านบน

Nodes Information Sidebar

แถบเมนูแสดงรายละเอียดโหนด (Nodes Information Sidebar) จะแสดงให้เห็นถึงรายละเอียดของโหนดที่เลือกอยู่ในปัจจุบันขึ้นมา ไม่ว่าจะเป็นค่าคุณสมบัติของโหนดนั้น หรือข้อความตัวช่วยสำหรับโหนดนั้นก็ตาม แต่หากไม่ได้มีโหนดใดที่ถูกเลือกอยู่ภายในโฟลว์ แถบเมนูนี้จะแสดงรายละเอียดของโฟลว์นั้นขึ้นมาแทน ซึ่งเป็นรายละเอียดที่ผู้ใช้งานได้ทำการแก้ไขไว้เมื่อทำการแก้ไขโฟลว์

Debug Messages Sidebar

แถบหน้าต่าง Debug นี้จะใช้แสดงผลข้อความที่ถูกส่งเข้าไปในโหนด ‘Debug’ ภายในโฟลว์นั้นในลักษณะของ log หรือบันทึกเหตุการณ์พร้อมช่วงเวลาที่ข้อมูลนั้นได้ทำการถูกส่งเข้าไป ซึ่งรายละเอียดวิธีการใช้งานแถบเมนูนี้จะถูกอธิบายอีกครั้งเมื่อมีการกล่าวถึงการใช้งานของข้อความที่ถูกส่งอยู่ภายในโฟลว์

Dashboard Sidebar

โหนดบางประเภทจะมีแถบเมนูเป็นของตัวเอง หนึ่งในนั้นคือโหนดในหมวดหมู่ของแดชบอร์ด (Dashboard) ซึ่งจะมีแถบเมนูที่ปรากฏรายละเอียดของวิดเจ็ทต่าง ๆ ที่ถูกสร้างเอาไว้ ภายในแถบเมนูนี้ จะประกอบไปด้วยรายละเอียดของโหนดของหน้าต่างการแสดงผลต่าง ๆ ว่าถูกจัดกลุ่มไว้ให้อยู่ในกลุ่มใด (Group) ในแถบหน้าต่างใด (Tab) ของแดชบอร์ด ค่าข้อมูลและข้อความต่างที่ถูกส่งผ่านแต่ละโหนดข้อมูลนั้นยังคงเชื่อมต่อกันตามลักษณะของโฟลว์เช่นเดิม แม้แต่ละโหนดจะถูกจัดแยกอยู่ในต่างกลุ่มและแถบหน้าต่างก็ตาม

คีย์ลัดโฟลว์

ภายในโฟลว์นี้ ผู้ใช้งานสามารถใช้คีย์ลัดบนคีย์บอร์ดในการเข้าถึงหรือใช้งานส่วนต่าง ๆ ภายในโฟลว์ได้ หรือการใช้แถบเมนูที่อยู่ขวาสุดบนแถบด้านบนของโปรแกรมเพื่อเข้าถึงส่วนต่าง ๆ ของโปรแกรมได้ โดยด้านล่างคือรายการคีย์ลัดภายในโฟลว์นี้

การทำงาน	คีย์ลัด
ซูมเข้าโฟลว์ (Zoom In)	Ctrl/⌘ + =
ซูมออกโฟลว์ (Zoom Out)	Ctrl/⌘ + -
รีเซ็ตการซูมของโฟลว์กลับไปเป็นปกติ (Reset Zoom)	Ctrl/⌘ + 0
เลือกโหนดทั้งหมดในโฟลว์ (Select all)	Ctrl/⌘ + a
คัดลอกผังของโหนดที่เลือก (Copy to Clipboard)	Ctrl/⌘ + c
ตัดผังของโหนดที่เลือก (Cut to Clipboard)	Ctrl/⌘ + x
วางผังของโหนดที่คัดลอกหรือตัดเอาไว้ (Paste from Clipboard)	Ctrl/⌘ + v
นำเข้าหนัาโฟลว์ (Import)	Ctrl/⌘ + i
ส่งออกโฟลว์ (Export)	Ctrl/⌘ + e
ค้นหาโหนด (Search Flows)	Ctrl/⌘ + f
เปิดและปิดแพลิตต์ (Toggle Palette)	Ctrl/⌘ + p
เปิดและปิดแถบเมนูข้าง (Toggle Sidebar)	Ctrl/⌘ + Space
ล้างข้อความทั้งหมดในแถบเมนูข้าง Debug	Ctrl/⌘ + Alt + l