สร้างขั้นตอน

คู่มือนี้อธิบายวิธีสร้างขั้นตอนที่ผู้ใช้เพิ่มลงในโฟลว์ใน Google Workspace Studio ได้

ขั้นตอนคือขั้นตอนเดียวในลำดับงานของโฟลว์ ขั้นตอนไม่สามารถเริ่ม โฟลว์ได้

ตัวอย่างเช่น ลองพิจารณาขั้นตอนที่ทำการคำนวณทางคณิตศาสตร์ โดยจะขอให้ผู้ใช้ป้อนค่า 2 ค่าและดำเนินการทางคณิตศาสตร์ จากนั้นจะดำเนินการทางคณิตศาสตร์กับค่า และแสดงผลลัพธ์

ผู้ใช้กำหนดค่าขั้นตอนเครื่องคิดเลขเป็นส่วนหนึ่งของโฟลว์

รูปที่ 1: ผู้ใช้กําหนดค่าขั้นตอนเครื่องคิดเลขเป็นส่วนหนึ่งของโฟลว์

หากต้องการสร้างขั้นตอน ให้กำหนดค่าในไฟล์ Manifest ของส่วนเสริม เขียนตรรกะของแอปพลิเคชันในโค้ดของส่วนเสริม Google Workspace แล้วนำไปใช้งานและทดสอบขั้นตอน

กำหนดขั้นตอน

หากต้องการกำหนดค่าขั้นตอน ให้กำหนดไว้ในไฟล์ Manifest และเขียนตรรกะของแอปพลิเคชันในโค้ด

กำหนดขั้นตอนในไฟล์ Manifest

ในไฟล์ Manifest appsscript.json

  1. ตั้งค่า onConfigFunction และ onExecuteFunction เป็นชื่อของฟังก์ชันที่เกี่ยวข้องในโค้ดของส่วนเสริม ในตัวอย่างนี้ ฟังก์ชันจะเรียกว่า onConfigCalculate() และ onExecuteCalculate()
    • onConfigFunction จะตั้งค่าและกำหนดค่าขั้นตอน หากจำเป็น รวบรวมข้อมูลจากผู้ใช้ที่จำเป็นต่อการดำเนินการตามขั้นตอน เช่น ที่อยู่ เพื่อส่งอีเมล ในตัวอย่างของคู่มือนี้ เราขอค่า 2 ค่าและ การดำเนินการทางคณิตศาสตร์
    • onExecuteFunction จะดำเนินการตามขั้นตอน หากรวบรวมข้อมูลจากผู้ใช้ ระบบจะส่งข้อมูลนั้นไปยังฟังก์ชันนี้ หากมี ระบบจะแสดงผลลัพธ์ ในตัวอย่างของคำแนะนำนี้ จะแสดงผลลัพธ์ของการคำนวณทางคณิตศาสตร์
  2. ตั้งค่าอินพุตและเอาต์พุตที่จำเป็น ซึ่งจะช่วยให้ขั้นตอนรวบรวมข้อมูลและส่งไปยังขั้นตอนต่อๆ ไปได้ ในตัวอย่างนี้ ให้ขอค่า 2 ค่าและ การดำเนินการทางคณิตศาสตร์ที่กำหนดไว้ใน inputs[] จากผู้ใช้ แสดงผลลัพธ์ที่คำนวณแล้วตามที่กำหนดไว้ใน outputs[]

    ดูข้อมูลเพิ่มเติมเกี่ยวกับอินพุตและเอาต์พุตได้ที่ ตัวแปรอินพุตและ ตัวแปรเอาต์พุต หากต้องการให้โฟลว์ทํางานโดยไม่มีข้อผิดพลาด ให้ตรวจสอบตัวแปรอินพุต

ไฟล์ Manifest สำหรับขั้นตอนเครื่องคิดเลขมีดังนี้

JSON

{
  "timeZone": "America/Los_Angeles",
  "exceptionLogging": "STACKDRIVER",
  "runtimeVersion": "V8",
  "addOns": {
    "common": {
      "name": "Calculator",
      "logoUrl": "https://www.gstatic.com/images/branding/productlogos/calculator_search/v1/web-24dp/logo_calculator_search_color_1x_web_24dp.png",
      "useLocaleFromApp": true
    },
    "flows": {
      "workflowElements": [
        {
          "id": "calculatorDemo",
          "state": "ACTIVE",
          "name": "Calculate",
          "description": "Asks the user for two values and a math operation, then performs the math operation on the values and outputs the result.",
          "workflowAction": {
            "inputs": [
              {
                "id": "value1",
                "description": "value1",
                "cardinality": "SINGLE",
                "dataType": {
                  "basicType": "INTEGER"
                }
              },
              {
                "id": "value2",
                "description": "value2",
                "cardinality": "SINGLE",
                "dataType": {
                  "basicType": "INTEGER"
                }
              },
              {
                "id": "operation",
                "description": "operation",
                "cardinality": "SINGLE",
                "dataType": {
                  "basicType": "STRING"
                }
              }
            ],
            "outputs": [
              {
                "id": "result",
                "description": "Calculated result",
                "cardinality": "SINGLE",
                "dataType": {
                  "basicType": "INTEGER"
                }
              }
            ],
            "onConfigFunction": "onConfigCalculate",
            "onExecuteFunction": "onExecuteCalculate"
          }
        }
      ]
    }
  }
}

จากนั้นเขียนโค้ดสนับสนุนโดยกำหนดขั้นตอนในโค้ด

กำหนดขั้นตอนในโค้ด

ในโค้ดของแอปพลิเคชัน ให้ทำดังนี้

  1. เขียน onConfigFunction ซึ่งในตัวอย่างนี้เรียกว่า onConfigCalculate() เมื่อผู้ใช้เพิ่มขั้นตอนลงในโฟลว์ ผู้ใช้จะกำหนดค่าลักษณะของขั้นตอนในตัวสร้างโฟลว์ได้ onConfigFunctionกําหนดการ์ดการกําหนดค่า เพื่อรวบรวมข้อมูลที่จําเป็นจากผู้ใช้

    การ์ดคือองค์ประกอบพื้นฐานสำหรับอินเทอร์เฟซผู้ใช้ในส่วนเสริม การ์ดรองรับเลย์เอาต์ที่กำหนด องค์ประกอบ UI แบบอินเทอร์แอกทีฟ เช่น ปุ่ม และริชมีเดีย เช่น รูปภาพ การ์ดเป็นวิธีรับข้อมูลจากผู้ใช้ที่ขั้นตอนต้องใช้ในการเรียกใช้ เช่น อีเมลสำหรับส่งอีเมล

    OnConfigFunction จะแสดงผลบัตร การ์ดนี้กำหนด UI ที่ผู้ใช้ ตั้งค่าข้อมูลของขั้นตอน ในตัวอย่างนี้ onConfigFunction จะสร้างการ์ด ที่ขอให้ผู้ใช้ป้อนค่า 2 ค่าและการดำเนินการทางคณิตศาสตร์

  2. เขียน onExecuteFunction ที่เรียกว่า onExecuteCalculate() ในตัวอย่างนี้ เมื่อขั้นตอนทำงานในโฟลว์ OnExecuteFunction จะทำงาน ระบบจะส่งค่าอินพุตใดก็ตามที่ผู้ใช้ตั้งค่าไว้ระหว่างการกำหนดค่าตามที่กำหนดไว้ใน onConfigurationFunction ไปยัง OnExecuteFunction

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

ตัวอย่างโค้ดนี้มีฟังก์ชันสนับสนุน outputVariables() ซึ่งสร้างและส่งตัวแปรที่ระบุเป็นเอาต์พุตจากขั้นตอน

ขั้นตอนของคุณพร้อมสำหรับการทดสอบแล้ว

โค้ดสำหรับขั้นตอนเครื่องคิดเลขมีดังนี้

Apps Script

/**
 * Generates and displays a configuration card for the sample calculation step.
 *
 * This function creates a card with input fields for two values and a drop-down
 * for selecting an arithmetic operation.
 *
 * The input fields are configured to let the user select outputs from previous
 * steps as input values using the `hostAppDataSource` property.
 */
function onConfigCalculate() {
  const firstInput = CardService.newTextInput()
  .setFieldName("value1")
  .setTitle("First Value")
  .setHostAppDataSource(
    CardService.newHostAppDataSource()
      .setWorkflowDataSource(
        CardService.newWorkflowDataSource()
          .setIncludeVariables(true)
      )
  );
  const secondInput = CardService.newTextInput()
    .setFieldName("value2")
    .setTitle("Second Value").setHostAppDataSource(
      CardService.newHostAppDataSource()
        .setWorkflowDataSource(
          CardService.newWorkflowDataSource()
            .setIncludeVariables(true)
        )
    );
  const selectionInput = CardService.newSelectionInput()
    .setTitle("operation")
    .setFieldName("operation")
    .setType(CardService.SelectionInputType.DROPDOWN)
    .addItem("+", "+", false)
    .addItem("-", "-", true)
    .addItem("x", "x", false)
    .addItem("/", "/", false);

  const sections = CardService.newCardSection()
    .setHeader("Action_sample: Calculate")
    .setId("section_1")
    .addWidget(firstInput)
    .addWidget(selectionInput)
    .addWidget(secondInput)

  var card = CardService.newCardBuilder()
    .addSection(sections)
    .build();

  return card;
}

/**
* Returns output variables from a step.
*
* This function constructs an object that, when returned, sends the
* provided variable values as output from the current step.
* The variable values are logged to the console for debugging purposes.
*/
function outputVariables(variableDataMap) {
const workflowAction = AddOnsResponseService.newReturnOutputVariablesAction()
  .setVariableDataMap(variableDataMap);

const hostAppAction = AddOnsResponseService.newHostAppAction()
  .setWorkflowAction(workflowAction);

const renderAction = AddOnsResponseService.newRenderActionBuilder()
  .setHostAppAction(hostAppAction)
  .build();

return renderAction;
}

/**
 * Executes the calculation step based on the inputs from a flow event.
 *
 * This function retrieves input values and the operation from the flow event,
 * performs the calculation, and returns the result as an output variable.
 * The function logs the event for debugging purposes.
 */
function onExecuteCalculate(event) {
  console.log("output: " + JSON.stringify(event));
  var calculatedValue = 0;
  var value1 = event.workflow.actionInvocation.inputs["value1"].integerValues[0];
  var value2 = event.workflow.actionInvocation.inputs["value2"].integerValues[0];
  var operation = event.workflow.actionInvocation.inputs["operation"].stringValues[0];

  if (operation == "+") {
    calculatedValue = value1 + value2;
  } else if (operation == "-") {
    calculatedValue = value1 - value2;
  } else if (operation == "x") {
    calculatedValue = value1 * value2;
  } else if (operation == "/") {
    calculatedValue = value1 / value2;
  }

  const variableDataMap = { "result": AddOnsResponseService.newVariableData().addIntegerValue(calculatedValue) };

  return outputVariables(variableDataMap);
}

ทดสอบการก้าว

หากต้องการทดสอบขั้นตอน ให้ตั้งค่าการทดสอบการติดตั้งใช้งานสำหรับ ส่วนเสริม เพิ่มขั้นตอนลงใน โฟลว์ แล้วเรียกใช้ โฟลว์

  1. ตั้งค่าการทำให้ใช้งานได้สำหรับการทดสอบสำหรับส่วนเสริม

    1. เปิดโปรเจ็กต์สคริปต์ในเครื่องมือแก้ไขสคริปต์
    2. คลิกทำให้ใช้งานได้ > การนำการทดสอบไปใช้งาน
    3. คลิกติดตั้ง
    4. คลิกเสร็จสิ้นที่ด้านล่าง

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

    เมื่อติดตั้งแล้ว ส่วนเสริมจะพร้อมใช้งานในโฟลว์ทันที คุณอาจต้องรีเฟรช Flows ก่อนที่ ส่วนเสริมจะปรากฏ คุณต้อง ให้สิทธิ์ส่วนเสริมก่อนใช้งานด้วย

    ดูข้อมูลเพิ่มเติมเกี่ยวกับการติดตั้งใช้งานเวอร์ชันทดสอบได้ที่ติดตั้งส่วนเสริมที่ยังไม่ได้เผยแพร่

  2. เปิดโฟลว์

  3. สร้างโฟลว์ที่มีขั้นตอนของคุณ

    1. คลิกโฟลว์ใหม่
    2. เลือกวิธีเริ่มโฟลว์ เมื่อทดสอบ ขั้นตอน คุณควรเลือกตัวเริ่มต้นที่สามารถเรียกใช้ได้ด้วยตัวเอง เช่น การส่งอีเมลถึงตัวเอง หากขั้นตอนต้องใช้ตัวแปรอินพุต ให้กำหนดค่าตัวแปรอินพุตเป็นส่วนหนึ่งของเอาต์พุตของตัวเริ่มต้น
    3. คลิกเพิ่มขั้นตอน เลือกขั้นตอนที่คุณสร้างหรืออัปเดต ซึ่งเรียกว่าคำนวณ
    4. กำหนดค่าขั้นตอน สําหรับขั้นตอนการคํานวณ ให้เลือกค่า 2 ค่าและ การดําเนินการทางคณิตศาสตร์ ระบบจะบันทึกขั้นตอนโดยอัตโนมัติ
    5. หากต้องการทดสอบเอาต์พุตของขั้นตอน ให้เพิ่มอีกขั้นตอน เช่น หากต้องการเพิ่มเอาต์พุต ลงในข้อความอีเมล คุณอาจเพิ่มขั้นตอนส่งข้อความ ของ Gmail ในข้อความ ให้คลิก ตัวแปร แล้วเลือกเอาต์พุตของ ขั้นตอน สําหรับขั้นตอนการคํานวณ ให้เลือก ตัวแปร > ขั้นตอนที่ 2: ผลลัพธ์ที่คํานวณแล้ว > ผลลัพธ์ที่คํานวณแล้ว ตัวแปรจะปรากฏเป็นชิปในช่องข้อความ
    6. คลิกเปิด โฟลว์ของคุณพร้อมทำงานแล้ว
  4. เรียกใช้โฟลว์โดยการตั้งค่าตัวเริ่มต้นของโฟลว์ เช่น หากโฟลว์เริ่มต้นเมื่อคุณได้รับอีเมล ให้ส่งอีเมลถึงตัวคุณเอง

  5. ตรวจสอบว่าโฟลว์ทำงานตามที่คาดไว้ ตรวจสอบบันทึกโดย ไปที่แท็บกิจกรรมของเครื่องมือสร้างโฟลว์ ดูวิธีสร้างบันทึกที่กําหนดเองในแท็บกิจกรรมได้ที่บันทึกกิจกรรม