Working with Embedded Editor

Prerequisites

To embed the workflow editor (canvas) into your application website, first configure the following settings:

1. Import the index.html file on the following route:

   /projects/project_uid/workflows/workflow_uid/edit

   Note: You can optionally add the ‘Subpath’ prefix in the given URL. To add subpath, navigate to demo_site > clientview > dist > index.html file and update the value of window.SUBPATH.
   Example: /subpath/projects/project_uid/workflows/workflow_uid/edit

2. Ensure that the ‘identifier’ and ‘synergy’ keys are present in the localstorage before loading the given URL in browser. Only logged-in users can see the editor in Embed.

Supported Functions

Use the following functions supported by webMethods.io Embed to embed workflow editor in your application website:

1. projectNameValidation(projectName)

   This function allows you to validate the specified name of the project.

   Sample code to validate project name

   var projectName = "Project1"; // Name of the project
   var error =  Embed.projectNameValidation(projectName);
   if( error ) {
   console.log(error);
   }

   Error messages

   • The project name should not be empty.
   • Max character length should be 36.
   • The project name should not start with a number or any special character. It can only contain alphanumeric characters and underscores.

2. tagNameValidation(tags)

   This function allows you to validate name of a tag.

   Payload

   Name	Type	Description
   tags	Array of String (required)	Array of tags to validate

   Sample Code

   var tags = [“tag123”, “tag456”]; // Array of tags
   var error =  Embed.tagNameValidation(tags);
   if( error ) {
   console.log(error);
   }

   Error messages

   • Tag name length should not exceed 100 characters.
   • Tag name should contain only alphanumeric characters, underscores, and hyphens.
   • Tag name should contain at least one alphanumeric character.

3. getConsumerProjects(getConsumerProjectPayload: Object)

   This function returns all projects associated with logged in user.

   Sample Code

   var skip = 0;
   var limit = 100;
   var name = "proj"; // Partial search on project name
   var fields = ["name", "uid" , "solution"] // fetch mentioned fields
   var tags = ["tag123", "tag456" ] // fetch mentioned tags
   window.Embed.getConsumerProjects({skip, limit, name, fields, tags}).then((resp) => {
       //resp => display project list
   }, (err)=> {
       console.log(err);
   })
   
   //Fields = uid, name, ic_project_name, env_uid, tenant_uid, created_by, updated_by, flow_count, icons, integration_icons ,integration_count ,rest_soap_icons ,deleted_at ,deployed ,version ,from_tenant ,solution ,default ,hidden ,product_type ,embed_name ,tags ,created_at ,updated_at

4. getConsumerProjectByUid(project_uid: String)

   This function returns record associated with a specific project UID.

   Sample code to fetch specific project

   var project_uid = "fl123456789"; //Uid of project
   Embed.getConsumerProjectByUid(project_uid).then((resp) => {
   // resp => single project record
   },(err)=> {
   console.logO(err);
   })

5. createConsumerProject(createProjectPayload: Object)

   This function creates a new project for the logged-in user.

   Sample code to create new project

   var name = "Project1"; //Name of the project
   window.Embed.createConsumerProject({name}).then((resp) => {
   // resp => Newly created project record
   }, (err) => {
   if(err.message) {
   console.log(err.message)
   } else {
   console.log(err);
   }
   });

6. updateConsumerProject(updateProjectPayload: Object)

   This function updates a project name.

   Sample code to update project name

   var name = "UpdateProj"; // Updated project name
   var uid = "fl123456789"; // Uid of the project
   window.Embed.updateConsumerProject({name, uid}).then( (resp) => {
   // resp => Updated project record
   }, (err) => {
   console.log(err);
   })

7. deleteConsumerProject(deleteProjectpayload: Object)

   This functions deletes a specific project.

   Sample code to delete a project

   var uid = "fl123456789"; // Uid of the project
   window.Embed.deleteConsumerProject({uid}).then((resp) => {
   // resp => Project successdully deleted.
   }, (err) => {
   console.log(err);
   })

8. updateConsumerProjectTags(updateProjectTagsPayload : Object)

   This function updates tag(s) associated with a project (create, update, delete) and returns the updated project.

   Payload object keys

   Name	Type	Description
   uid	String (required)	UID of the project
   tags	Arrary of String (required)	Updated tags array

   Sample code

   var tags = [“tag123”, “tag456”]; // Updated project tags
   var uid = "fl123456789"; // Uid of the project
   window.Embed. updateConsumerProjectTags({tags, uid}).then( (resp) => {
   // resp => Updated project record
   }, (err) => {
   console.log(err);
   })

9. getConsumerProjectTags()

   This function returns all the tags along with projects associated to respective tags.

   Sample code

   window.Embed.getConsumerProjectTags().then((resp) => {
   // resp => Workflow list
   },(err)=>{
   console.log(err);
   })

10. getConsumerWorkflows(getConsumerWorkflowPayload: Object)

    This function return all workflows associated with project.

    Sample code to fetch all project workflows

    var skip = 0;
    var limit = 100;
    var project_uid = "fl123456789"; // Uid of the project
    var name = "Workflow1"; // Workflow Name
    window.Embed.getConsumerWorkflows({skip, limit, project_uid, name}).then((resp) => {
    // resp => Workflow list
    },(err)=>{
    console.log(err);
    })

11. getConsumerWorkflowById(getConsumerWorkflowPayload: Object)

    This function returns a specific workflow based on the workflow version.

    Sample code to fetch specific workflow based on a version

    var workflow_uid = "fl987654321"; // Uid of workflow
    var flow_version = 1; // Version of the workflow
    var project_uid = "fl123456789"; // Uid of project
    window.Embed.Embed.getConsumerWorkflowById({project_uid, workflow_uid, flow_version} ).then((resp) => {
    // resp => single Workflow record
    },(err)=>{
    console.log(err);
    })

12. createConsumerWorkflow(createWorkflowPayload: object)

    This function creates a new workflow.

    Sample code to create a workflow.

    var name = "Workflow1"; // Name of the workflow
    var project_uid = "fl123456789"; // Uid of workflow
    var description = "description of the workflow"; //Worfklow description
    window.Embed.createConsumerWorkflow({name, project_uid, description}).then((resp) => {
    // resp => Newly created workflow record
    }, (err) => {
    console.log(err);
    });

13. updateConsumerWorkflowName(updateWorkflowPayload: Object)

    This function updates the name of a workflow.

    Sample code

    var name = "Workflow1Updated"; //Updated workflow name
    var uid = "fl9876543210"; // Uid of the workflow
    var project_uid = "fl123456789"; // Uid of the project
    var description = "UpdatedDescription"; //Updated description of the workflow
    window.Embed.updateConsumerWorkflowName({ name, uid, project_uid }).then((resp) => {
    //resp => Updated workflow  record
    }, (err) => {
    console.log(err);
    })

14. deleteConsumerWorkflow(deleteWorkflowPayload: Object)

    This function deletes a workflow.

    Sample code

    var uid = "fl987654321"; // Uid of workflow
    var project_uid = "fl123456789"; //Uid of project
    window.Embed.deleteConsumerWorkflow({uid, project_uid}).then((resp) => {
    // resp => Flow successdully deleted.
    }, (err) => {
    console.log(err);
    })

15. importConsumerWorkflow({workflow_file, project_uid})

    This function imports (upload) an exported (downloaded) workflow for a project with the given uid and returns an object with imported workflow details.

    Parameters

    workflowObject (object):

    • workflow_file (file object) : Workflow file to import
    • project_uid (string) : UID of the project to which workflow needs to be imported (can be obtained from Embed.getConsumerWorkflows() or Embed.getConsumerProjects())

    Sample code

    let workflow_file = document.getElementById('importInputElement').files[0]; // workflow file to import
    let project_uid = '123456abcd';     // can be obtained from Embed.getConsumerWorkflows() or Embed.getConsumerProjects()
    window.Embed.importConsumerWorkflow({workflow_file, project_uid}).then(function(resp){
    // resp => imported workflow record
    } ,(err) =>{
    console.log(err);
    })

16. exportConsumerWorkflow({name, description, project_uid, uid})

    This function exports (download) a workflow with given project_uid and uid. It returns an object with download_link(URL String) and valid_till (ISO Date String).

    Note: The response is valid only for 10 minutes.

    Parameters

    workflowObject (object):

    • name: Name of the workflow (mandatory)
    • description: Description of the workflow (non-mandatory)
    • project_uid (string) : UID of the project whose workflow needs to be exported (can be obtained from Embed.getConsumerWorkflows() or Embed.getConsumerProjects())
    • uid: UID of the workflow which needs to be exported (can be obtained from Embed.getConsumerWorkflows())

    Sample code

    let projectUID = '123456abcd';  // can be obtained from Embed.getConsumerWorkflows() or Embed.getConsumerProjects()
    let workflowUID = 'qwertyuiop1234';     // can be obtained from Embed.getConsumerWorkflows()
    window.Embed.importConsumerWorkflow({name:"Export Workflow", description:"Test export", project_uid: projectUID, uid: workflowUID}).then(function(res){
        var url=res.download_link;
        if(res.valid_till > new Date().toISOStirng())
        window.open(url, '_blank');
    } ,(err) =>{
    console.log(err);
    })

17. activateConsumerWorkflow (activateWorkflowPayload : Object)

    This function activates or deactivates a specific workflow and returns the updated workflow.

    Payload object keys

    Name	Type	Description
    project_uid	String (required)	UID of the Project
    uid	String (required)	UID of the Workflow
    active	Boolean (optional) (default: true)	True to activate the workflow False to deactivate the workflow

    Sample code

    var project_uid = "fl987654321"; // Uid of the project
    var uid = "fl123456789"; // Uid of the workflow
    var active = true; // activate or deactivate workflow
    window.Embed.activateConsumerWorkflow({project_uid, uid, active}).then( (resp) => {
        // resp => Updated workflow record
    }, (err) => {
    console.log(err);

    })

18. getConsumerTemplates(getTemplatesPayload : Object)

    This function returns all the templates.

    Payload object keys

    Name	Type	Description
    name	String (optional)	Template name to search (complete/ partial)
    tags	Array of String(optional)	Template tags to search
    skip	Integer(optional) (default: 0)	Pagination skip
    limit	Integer(optional) (default: 15)	Pagination limit
    orderBy	String(optional)	Can use: ‘published_on’, ‘created_at’, ‘updated_at’, ‘name’, keys
    sortBy	String(optional)	Must be “asc” or “desc” to sort in ascending and descending order respectively

    Sample code

    var name = “Template1”; // Template name
    var tags = [“tag123”]; // Template tags
    var skip = 0; // pagination skip
    var limit = 15; // pagination limit
    var orderBy = “updated_at”; // order by updated_at value
    var sortBy= “desc”; // descending sort
    
    window.Embed.getConsumerTemplates({name, tags, skip, limit, orderBy ,sortBy}).then( (resp) => {
        // resp => Templates record
    }, (err) => {
    console.log(err);
    })

19. createConsumerTemplate(createTemplatePayload : Object)

    This function creates consumer template for a project and returns the template response.

    Payload object keys

    Name	Type	Description
    project_uid	String (required)	UID of the project
    name	String (required)	Template name
    description	String(optional)	Template description
    publish	Boolean(optional)	Publish template
    tags	Array of String(optional)	Template tags

    Sample code

    var project_uid = "fl987654321"; // Uid of the project
    var name = "Template123"; // Name of the template
    var description = "Test Template"; // Description of the template
    var publish = true; // Publish the template
    var tags = [“tag123”, “tag456”]; // Template tags
    
    window.Embed.createConsumerTemplate({project_uid, name, description ,publish, tags }).then( (resp) => {
        // resp => Created Template record
    }, (err) => {
        console.log(err);
    })

20. updateConsumerTemplate(updateTemplatePayload : Object)

    This function updates a consumer template for a project and returns the updated template response.

    Payload object keys

    Name	Type	Description
    solution	String(required)	UID of the template
    name	String (required)	Template name
    description	String(optional)	Template description
    publish	Boolean(optional)	Publish template
    tags	Array of String(optional)	Template tags

    Sample code

    var solution = "fl1234567789"; // Uid of the template
    var name = "Template123"; // Name of the template
    var description = "Test Template"; // Description of the template
    var publish = true; // Publish the template
    var tags = [“tag123”, “tag456”]; // Template tags
    window.Embed.updateConsumerTemplate({solution, name, description, publish, tags }).then( (resp) => {
        // resp => Updated Template record
    }, (err) => {
    console.log(err);
    })

21. deleteConsumerTemplate(deleteTemplatePayload: Object)

    This function deletes a template and returns a delete message.

    Payload object keys

    Name	Type	Description
    solution	String (required)	UID of the template

    Sample code

    var solution = "fl123456789"; //Uid of template
    window.Embed.deleteConsumerTemplate({solution}).then((resp) => {
    // resp => Template deleted successfully.
    }, (err) => {
        console.log(err);
    })

22. getConsumerTemplateTags()

    This function returns all the template tags along with templates associated with each respective tag.

    Sample code

    window.Embed.getConsumerWorkflows().then((resp) => {
        // resp => Template tags
    },(err)=>{
        console.log(err);
    })

23. updateConsumerTemplateTags (updateTemplateTagsPayload : Object)

    This function updates (create, update, delete) tag(s) associated with a specific template and returns the updated template.

    Payload object keys

    Name	Type	Description
    solution	String (required)	UID of the template
    tags	Arrary of String (required)	Updated array of tags

    Sample code

    var tags = [“tag123”, “tag456”]; // Updated template tags
    var solution = "fl123456789"; // Uid of the template
    window.Embed. updateConsumerTemplateTags({tags, solution}).then( (resp) => {
        // resp => Updated project record
    }, (err) => {
        console.log(err);
    })

24. publishConsumerTemplate(publishTemplatePayload: Object)

    This function publishes or unpublishes a template.

    Payload object keys

    Name	Type	Description
    solution	String (required)	UID of the template
    version	Sring (required)	Version of the template
    publish	Boolean (optional) (default: true)	“true” to publish template “false” to unpublish template

    Sample code

    var solution = "fl123456789"; //Uid of template
    var version = "1"; //version of template
    var publish = true; // publish template
    window.Embed.publishConsumerTemplate({solution, version, publish}).then((resp) => {
        // resp => Published Template record.
    }, (err) => {
        console.log(err);
    })

25. getConsumerTemplateSchema(getTemplateSchemaPayload: Object)

    This function returns schema associated with a specific template.

    Payload object keys

    Name	Type	Description
    solution	String (required)	UID of the template

    Sample code

    var solution = "fl123456789"; //Uid of template
    window.Embed.getConsumerTemplateSchema({solution}).then((resp) => {
        // resp => Template schema record.
    }, (err) => {
        console.log(err);
    })

26. updateConsumerTemplateSchema(updateTemplateSchemaPayload: Object)

    This function updates schema associated with particular template and returns updated schema.

    Payload object keys

    Name	Type	Description
    solution	String (required)	UID of the template
    schema	String (required)	Template schema

    Sample code

    var solution = "fl123456789"; //Uid of template
    var schema =
    "[
    {
        "icon": "webhook",
        "auth_type": "",
        "webhook_auth": {
            "type": "basic",
            "auth": {
                "user_name": "",
                "password": ""
            }
        },
        "webhook_token": {
            "type": "authtoken",
            "auth": {
                "token": ""
            }
        },
        "show_auth": true,
        "url_execution": true,
        "sync_webhook": false,
        "original_sid": "qwre234TY",
        "type": "trigger"
    }
    ]"; // Schema of template
    window.Embed.ConsumerTemplateSchema({solution}).then((resp) => {
        // resp => Update template schema record.
    }, (err) => {
        console.log(err);
    })

27. getConsumerTemplateVersions(getTemplateVersionsPayload: Object)

    This function returns all template versions associated with a specific template.

    Payload object keys

    Name	Type	Description
    solution	String (required)	UID of the template
    skip	Integer(optional) (default: 0)	Pagination skip
    limit	Integer(optional) (default: 15)	Pagination limit
    orderBy	String(optional)
    sortBy	String(optional)	Must be “asc” or “desc” to sort in ascending and descending order respectively

    Sample code

    var solution = "fl123456789"; //Uid of template
    var skip = 0; // pagination skip
    var limit = 15; // pagination limit
    var orderBy = “updated_at”; // order by updated_at value
    var sortBy= “desc”; // descending sort
    window.Embed.getConsumerTemplateVersions({solution, skip, limit, orderBy ,sortBy }).then((resp) => {
        // resp => Template versions record.
    }, (err) => {
        console.log(err);
    })

28. deleteConsumerTemplateVersion(deleteTemplateVersionsPayload: Object)

    This function deletes a specific version of a template and returns deletion success message.

    Payload object keys

    Name	Type	Description
    solution	String (required)	UID of the template
    version	String (required)	Version of the template
    force_delete	Boolean (optional) (default: false)	“true ”: Force delete template version

    Sample code

    var solution = "fl123456789"; //Uid of template
    var version = 1; //Version of template
    window.Embed.deleteConsumerTemplateVersion({solution, version}).then((resp) => {
        // resp => Template version deleted.
    }, (err) => {
        console.log(err);
    })

29. getAdminTemplates(getTemplatesPayload : Object)

    This function returns all templates.

    Payload object keys

    Name	Type	Description
    name	String (optional)	Template name to search (complete/ partial)
    tags	Array of String (optional)	Template tags to search
    skip	Integer (optional) (default: 0)	Pagination skip
    limit	Integer (optional) (default: 15)	Pagination limit
    orderBy	String (optional)
    sortBy	String (optional)	Must be “asc” or “desc” to sort in ascending and descending order respectively

    Sample code

    var name = “Template1”; // pagination skip
    var tags = [“tag123”]; // pagination skip
    var skip = 0; // pagination skip
    var limit = 15; // pagination limit
    var orderBy = “updated_at”; // order by updated_at value
    var sortBy= “desc”; // descending sort
    
    window.Embed.getAdminTemplates({name, tags, skip, limit, orderBy ,sortBy}).then( (resp) => {
        // resp => Admin Templates record
    }, (err) => {
        console.log(err);
    })

30. getAdminTemplateTags()

    This function returns all admin template tags along with the admin templates associated with each tag.

    Sample code

    window.Embed.getAdminWorkflows().then((resp) => {
        // resp => Admin Template tags
    },(err)=>{
        console.log(err);
    })

31. getAdminTemplateVersions(getTemplateVersionsPayload: Object)

    This function returns all admin template versions associated with a specific template.

    Payload object keys

    Name	Type	Description
    solution	String (required)	UID of the template
    skip	Integer(optional) (default: 0)	Pagination skip
    limit	Integer(optional) (default: 15)	Pagination limit
    orderBy	String(optional)
    sortBy	String(optional)	Must be “asc” or “desc” to sort in ascending and descending order respectively

    Sample code

    var solution = "fl123456789"; //Uid of template
    var skip = 0; // pagination skip
    var limit = 15; // pagination limit
    var orderBy = “updated_at”; // order by updated_at value
    var sortBy= “desc”; // descending sort
    
    
    window.Embed.getAdminTemplateVersions({solution, skip, limit, orderBy ,sortBy }).then((resp) => {
        // resp => Admin Template versions record.
    }, (err) => {
        console.log(err);
    })

Customized Editor

You can customize the theme and certain elements of the editor based on your branding requirements.

Custom documentation link

You can add the custom documentation URL for your application website. To do so, navigate to demo_site > clientview > dist > index.html file and update the value of DOC_DOMAIN. If you don’t provide a custom documentation URL, the help icon (‘i’ icon) is not displayed in the UI.

Custom back button

You can customize the behaviour of the back button. To do so, navigate to demo_site > clientview > dist > assets > js > custom-editor.js file and make relevant changes in the editorBackButtonClicked() function.

Sample code to configure back button

    function editorBackButtonClicked(operation) {

    var a = window.location.pathname.split("/")
    var pid = null;
    for(let i = 0; i < a.length-1; i++){
    if(a[i]==="projects"){
        pid = a[i+1];
    }
    }
    var route = null;

    if(operation && operation === "logout") {
        route= "/login"
    }
    if(pid) {
        if(operation) {
            route= "/build-your-own-workflow/project/"+pid+"?error="+operation
    } else {
            route= "/build-your-own-workflow/project/"+pid;
    }
    } else {
            if(operation) {
            route= "/build-your-own-workflow"+"?error="+operation
            } else {
            route= "/build-your-own-workflow";
    }
    }

        return route;
    }

Custom CSS

You can apply custom styling based on your branding requirements to your workflow editor in the application website.

To do so, navigate to demo_site > clientview > dist > assets > css > custom-editor.css file and make changes in the relevant classes associated with the respective components you want to customize.

Sample code for applying custom css on a Save Workflow button.

    .btn.btn-primary.save_flow_btn.right.primary-btn{
    background: #000 !important;
    }

The following tables provide more information about the workflow editor components and their associated classes. You can make changes in these classes to apply custom styling.

Canvas

Canvas headers and subheaders

Canvas footer

Actions list panel

Canvas action

Action modal

Trigger modal

Workflow settings modal

Log console panel

Workflow versioning panel