https://embedded-workflow-builder.netlify.app/assets/js/7485ae2a.118c4a42.js

1"use strict";(self.webpackChunkembedded_workflow_builder_docs=self.webpackChunkembedded_workflow_builder_docs||[]).push([["319"],{91007(e,t,r){r.r(t),r.d(t,{metadata:()=>s,default:()=>c,frontMatter:()=>i,contentTitle:()=>l,toc:()=>d,assets:()=>a});var s=JSON.parse('{"id":"get-started","title":"Getting Started","description":"Start building your own Workflows","source":"@site/docs/get-started.md","sourceDirName":".","slug":"/get-started","permalink":"/get-started","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{"title":"Getting Started","description":"Start building your own Workflows"},"sidebar":"docs","previous":{"title":"Acme Inc\'s Workflow Builder","permalink":"/"},"next":{"title":"Building Workflows","permalink":"/building"}}'),n=r(74848),o=r(28453);let i={title:"Getting Started",description:"Start building your own Workflows"},l,a={},d=[{value:"Overview",id:"overview",level:2},{value:"Workflow overview",id:"workflow-overview",level:2},{value:"Start building",id:"start-building",level:2},{value:"Configure the Workflow trigger",id:"configure-the-workflow-trigger",level:3},{value:"Fetch user data from an API",id:"fetch-user-data-from-an-api",level:3},{value:"Loop over the users",id:"loop-over-the-users",level:3},{value:"Branch based on user's location",id:"branch-based-on-users-location",level:3},{value:"Handle users in each branch",id:"handle-users-in-each-branch",level:3},{value:"Next steps",id:"next-steps",level:2}];function h(e){let t={a:"a",code:"code",h2:"h2",h3:"h3",img:"img",li:"li",p:"p",strong:"strong",ul:"ul",...(0,o.R)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.h2,{id:"overview",children:"Overview"}),"\n",(0,n.jsx)(t.p,{children:"This tutorial will walk you through some basic concepts of Workflow development using the Acme Inc's Workflow Builder."}),"\n",(0,n.jsxs)(t.ul,{children:["\n",(0,n.jsx)(t.li,{children:"Fetch user data from an API"}),"\n",(0,n.jsx)(t.li,{children:"Learn how data flows between steps of a Workflow"}),"\n",(0,n.jsx)(t.li,{children:"Use a loop to iterate over the users you fetch"}),"\n",(0,n.jsx)(t.li,{children:"Use logical branches to make decisions based on user properties"}),"\n",(0,n.jsx)(t.li,{children:"Take different actions based on user characteristics"}),"\n"]}),"\n",(0,n.jsx)(t.h2,{id:"workflow-overview",children:"Workflow overview"}),"\n",(0,n.jsx)(t.p,{children:"The Workflow you build here will fetch a list of users from an API, loop over each user, check if they're from a specific geographic region (south or north of the equator), and take different actions based on their location."}),"\n",(0,n.jsxs)(t.p,{children:["We'll use the JSONPlaceholder API ",(0,n.jsx)(t.code,{children:"https://jsonplaceholder.typicode.com/users"}),", which provides sample user data."]}),"\n",(0,n.jsx)(t.h2,{id:"start-building",children:"Start building"}),"\n",(0,n.jsxs)(t.p,{children:["We'll start by creating a new Workflow.\nLog in to ",(0,n.jsx)(t.a,{href:"https://acme.com/login",children:"Widget ERP"}),", then navigate to integrations > workflows and click on 'manage workflows'."]}),"\n",(0,n.jsxs)(t.p,{children:["Create a new Workflow by clicking ",(0,n.jsx)(t.strong,{children:"+ Workflow"}),"."]}),"\n",(0,n.jsx)(t.h3,{id:"configure-the-workflow-trigger",children:"Configure the Workflow trigger"}),"\n",(0,n.jsxs)(t.p,{children:["This Workflow will run on a schedule.\nWhen prompted, select ",(0,n.jsx)(t.strong,{children:"Schedule"})," under ",(0,n.jsx)(t.strong,{children:"select your trigger"})," and then configure your Workflow to run on a daily basis at a time of your choosing."]}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.img,{alt:"Configuring a schedule trigger",src:r(53889).A+"",width:"550",height:"652"})}),"\n",(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.strong,{children:"Note"}),": Your schedule trigger will be active once you finish building and ",(0,n.jsx)(t.a,{href:"/enabling",children:"enable"})," your Workflow.\nFor now, you can test your workflow as you build it by clicking the ",(0,n.jsx)(t.strong,{children:"Run"})," button at the bottom left of the canvas."]}),"\n",(0,n.jsx)(t.h3,{id:"fetch-user-data-from-an-api",children:"Fetch user data from an API"}),"\n",(0,n.jsxs)(t.p,{children:["Next, add a new step to your Workflow by clicking the ",(0,n.jsx)(t.strong,{children:"+"})," button below your trigger.\nSearch for the ",(0,n.jsx)(t.strong,{children:"HTTP"})," connector and add a ",(0,n.jsx)(t.strong,{children:"GET Request"})," step."]}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.img,{alt:"Add an HTTP GET step",src:r(82892).A+"",width:"500",height:"624"})}),"\n",(0,n.jsxs)(t.p,{children:["Rename the step to ",(0,n.jsx)(t.strong,{children:"Get Users"}),".\nConfigure your step to fetch user data from the JSONPlaceholder API.\nJSONPlaceholder does not require authentication, so no ",(0,n.jsx)(t.strong,{children:"connection"})," is required.\nIn the ",(0,n.jsx)(t.strong,{children:"URL"})," field, enter: ",(0,n.jsx)(t.code,{children:"https://jsonplaceholder.typicode.com/users"})]}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.img,{alt:"Configure HTTP GET step",src:r(53289).A+"",width:"1083",height:"575"})}),"\n",(0,n.jsxs)(t.p,{children:["Click the green ",(0,n.jsx)(t.strong,{children:"Test"})," button to test your Workflow so far.\nIf you select the ",(0,n.jsx)(t.strong,{children:"Get Users"})," step in your test results, you will see the user data that was fetched from the API in the ",(0,n.jsx)(t.strong,{children:"Output"})," tab."]}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.img,{alt:"HTTP GET step results",src:r(50079).A+"",width:"1069",height:"426"})}),"\n",(0,n.jsx)(t.h3,{id:"loop-over-the-users",children:"Loop over the users"}),"\n",(0,n.jsxs)(t.p,{children:["Now that we're fetching a list of users, we need to loop over each user to process their information.\nAdd another step under your ",(0,n.jsx)(t.strong,{children:"Get Users"})," step, this time searching for the ",(0,n.jsx)(t.strong,{children:"Loop"})," > ",(0,n.jsx)(t.strong,{children:"Repeat for Each"})," action."]}),"\n",(0,n.jsxs)(t.p,{children:["Name your step ",(0,n.jsx)(t.strong,{children:"Loop Over Users"}),".\nConfigure your loop step to iterate over the user data from the previous step.\nIn the ",(0,n.jsx)(t.strong,{children:"Items"})," field, click ",(0,n.jsx)(t.strong,{children:"Configure Reference"})," and select the ",(0,n.jsx)(t.code,{children:"data"})," property (or ",(0,n.jsx)(t.code,{children:"body"})," property) of the ",(0,n.jsx)(t.strong,{children:"Get Users"})," step."]}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.img,{alt:"Configure loop step",src:r(10047).A+"",width:"1087",height:"926"})}),"\n",(0,n.jsxs)(t.p,{children:["Run a test of your Workflow again.\nThis time, you'll see that the loop step has a ",(0,n.jsx)(t.strong,{children:"currentItem"}

1)," property in its output that contains the data for the current user being processed.\nWe'll use this property in the next step to check the user's location."]}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.img,{alt:"Loop step results",src:r(88945).A+"",width:"1070",height:"574"})}),"\n",(0,n.jsx)(t.h3,{id:"branch-based-on-users-location",children:"Branch based on user's location"}),"\n",(0,n.jsxs)(t.p,{children:["Now that we're looping over each user, we need to check their address to see if they're from a specific region.\nLooking at the user data, each user has an ",(0,n.jsx)(t.code,{children:"address"})," object with a ",(0,n.jsx)(t.code,{children:"geo"})," property containing latitude and longitude coordinates.\nWe'll use the latitude to determine if they live south of the equator (latitude < 0)."]}),"\n",(0,n.jsxs)(t.p,{children:["Add a step within your loop, this time selecting ",(0,n.jsx)(t.strong,{children:"Branch"})," > ",(0,n.jsx)(t.strong,{children:"If Condition is Met"}),".\nName the step ",(0,n.jsx)(t.strong,{children:"Check User Location"}),"."]}),"\n",(0,n.jsxs)(t.p,{children:["Configure the branch step to have a condition called ",(0,n.jsx)(t.strong,{children:"Is Southern User?"}),".\nIn the ",(0,n.jsx)(t.strong,{children:"Field"})," input, click ",(0,n.jsx)(t.strong,{children:"Configure Reference"})," and select the loop step's ",(0,n.jsx)(t.strong,{children:"currentItem.address.geo.lat"})," property.\nUnder ",(0,n.jsx)(t.strong,{children:"Operator"})," select ",(0,n.jsx)(t.strong,{children:"is less than"}),".\nIn the ",(0,n.jsx)(t.strong,{children:"Value"})," field, enter ",(0,n.jsx)(t.code,{children:"0"}),"."]}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.img,{alt:"Configure branch step",src:r(4001).A+"",width:"1168",height:"1317"})}),"\n",(0,n.jsxs)(t.p,{children:["Now, users with latitude less than 0 (southern hemisphere) will follow the ",(0,n.jsx)(t.strong,{children:"Is Southern User?"})," branch, while users from the northern hemisphere will follow the ",(0,n.jsx)(t.strong,{children:"Else"})," branch."]}),"\n",(0,n.jsxs)(t.p,{children:["If we run our Workflow once more and look at our ",(0,n.jsx)(t.strong,{children:"Loop Over Users"})," step again, we can see that the branch step followed the ",(0,n.jsx)(t.strong,{children:"Is Southern User?"})," branch for the first three items, then the ",(0,n.jsx)(t.strong,{children:"Else"})," branch once, etc."]}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.img,{alt:"Configure branch step",src:r(46560).A+"",width:"1190",height:"582"})}),"\n",(0,n.jsx)(t.h3,{id:"handle-users-in-each-branch",children:"Handle users in each branch"}),"\n",(0,n.jsxs)(t.p,{children:["Under the ",(0,n.jsx)(t.strong,{children:"Is Southern User?"})," branch, add a ",(0,n.jsx)(t.strong,{children:"log"})," step.\nCreate a friendly log message announcing the user by name.\nYou can reference the user's name from the loop step's ",(0,n.jsx)(t.code,{children:"currentItem.name"}),"."]}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.img,{alt:"Configure log step",src:r(2383).A+"",width:"1277",height:"968"})}),"\n",(0,n.jsxs)(t.p,{children:["Add a similar log step to your ",(0,n.jsx)(t.strong,{children:"Else"})," branch."]}),"\n",(0,n.jsxs)(t.p,{children:["If you toggle ",(0,n.jsx)(t.strong,{children:"Logs"})," on in the test runner drawer and increment the ",(0,n.jsx)(t.strong,{children:"Index"})," of your loop step, you can view the log message that each loop iteration yielded."]}),"\n",(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.img,{alt:"Log step result 1",src:r(23449).A+"",width:"718",height:"427"}),"\n",(0,n.jsx)(t.img,{alt:"Log step result 2",src:r(70717).A+"",width:"714",height:"428"})]}),"\n",(0,n.jsx)(t.h2,{id:"next-steps",children:"Next steps"}),"\n",(0,n.jsx)(t.p,{children:"Congratulations! You created your first Workflow!\nWhile a little contrived, this Workflow demonstrates how to fetch data from a third party, loop over lists of records, and use branching logic."}),"\n",(0,n.jsx)(t.p,{children:"Here are a few things you should try next:"}),"\n",(0,n.jsxs)(t.ul,{children:["\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.strong,{children:"Modify the branching logic"}),": Try branching on different user properties like company name, email domain, or website."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.strong,{children:"Add external actions"}),": Instead of just logging, ",(0,n.jsx)(t.a,{href:"/connectors/sendgrid#sendemail",children:"send emails"})," to users, create records in a ",(0,n.jsx)(t.a,{href:"/connectors/postgres#query",children:"database"}),", or post to a chat system like ",(0,n.jsx)(t.a,{href:"/connectors/slack#postmessage",children:"Slack"}),"."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.strong,{children:"Add more complex processing"}),": Parse user data and validate email formats using a ",(0,n.jsx)(t.a,{href:"/custom-code",children:"code"})," step, or enrich user information with additional API calls."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.strong,{children:"Add error handling"}),": Use ",(0,n.jsx)(t.a,{href:"/error-handling#step-level-error-handling",children:"step-level error handling"})," to handle potential errors gracefully."]}),"\n"]})]})}function c(e={}){let{wrapper:t}={...(0,o.R)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(h,{...e})}):h(e)}},4001(e,t,r){r.d(t,{A:()=>s});let s=r.p+"assets/images/branch-step-configure-3b7fcbaacd8ee5ce7440a83f003ac09e.png"},82892(e,t,r){r.d(t,{A:()=>s});let s=r.p+"assets/images/http-step-add-9434aa5953892632f354bce02e82bf34.png"},53289(e,t,r){r.d(t,{A:()=>s});let s=r.p+"assets/images/http-step-configure-21979aa80a874423d0e371bd593f81ed.png"},50079(e,t,r){r.d(t,{A:()=>s});let s=r.p+"assets/images/http-step-results-6d5ddd21118e7ffff62819207c89a271.png"},2383(e,t,r){r.d(t,{A:()=>s});let s=r.p+"assets/images/log-step-configure-6d5d4ad082001bd40042c02d2017aa7d.png"},23449(e,t,r){r.d(t,{A:()=>s});let s=r.p+"assets/images/log-step-result-1-75de40201b2855e44fce5bb2495d115b.png"},70717(e,t,r){r.d(t,{A:()=>s});let s=r.p+"assets/images/log-step-result-2-00744fe7d68b7475dc6d04e073c7ba2a.png"},10047(e,t,r){r.d(t,{A:()=>s});let s=r.p+"assets/images/loop-step-configure-92274671740e3259386ae7de45a66655.png"},88945(e,t,r){r.d(t,{A:()=>s});let s=r.p+"assets/images/loop-step-results-905b6b605ca905a92ba37a495fd87e53.png"},46560(e,t,r){r.d(t,{A:()=>s});let s=r.p+"assets/images/loop-with-branch-results-a951c07b865050e8346944d82a237281.png"},53889(e,t,r){r.d(t,{A:()=>s});let s=r.p+"assets/images/schedule-trigger-97ecf8429c1fbca92e281f5480a8bb8d.png"},28453(e,t,r){r.d(t,{R:()=>i,x:()=>l});var s=r(96540);let n={},o=s.createContext(n);function i(e){let t=s.useContext(o);return s.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function l(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(n):e.components||n:i(e.components),s.createElement(o.Provider,{value:t},e.children)}}}]);