Howto:Flowe - Wecom - Partner App: Difference between revisions

From innovaphone wiki
Jump to navigation Jump to search
Detailing of step by step of scripts management page
Complete scripts management page function section, step by step and images, and added images to additional functions section
Line 27: Line 27:


== Certification status ==
== Certification status ==
<!-- do not remove comment. Will be added by innovaphone upon document check & app availablity on appstore -->
<!-- Do not remove comment. Will be added by innovaphone upon document check & app availablity on app store. -->
''Space dedicated to Flowe certification information.''
''Space dedicated to Flowe certification information.''


== Category ==
== Category ==
<!-- Do not change this section and do not remove comments. Will be set by innovaphone upon document check -->
<!-- Do not change this section and do not remove comments. Will be set by innovaphone upon document check. -->
[[Category:Partner Apps|{{PAGENAME}}]]
[[Category:Partner Apps|{{PAGENAME}}]]
{{Category:3rdParty_VoIPSystem_Management}}
{{Category:3rdParty_VoIPSystem_Management}}
Line 58: Line 58:


=== Scripts - Initial Page ===
=== Scripts - Initial Page ===
[[File:Flowe's Scripts' Initial Page.png|thumb|584x584px|Scripts' Initial Page with highlighted features|flowe's_scripts'_initial_page.png/]]
[[File:Flowe's Scripts' Initial Page.png|thumb|584x584px|flowe's_scripts'_initial_page.png/|flowe's_scripts'_initial_page.png/]]
The Scripts '''Initial Page''' section is the main entry point of the Flowe application. Upon launching the app, users are presented with an overview of all existing XML scripts that have been created or imported into the system where users can quickly access, search for and manage scripts.
The Scripts '''Initial Page''' section is the main entry point of the Flowe application. Upon launching the app, users are presented with an overview of all existing XML scripts that have been created or imported into the system where users can quickly access, search for and manage scripts.


Line 69: Line 69:
* '''Delete''' – opens a confirmation modal for script deletion.
* '''Delete''' – opens a confirmation modal for script deletion.


==== 1. Search for script ====
==== 1. Searching for script ====


# Write in the ''"Type to search..."'' input area
# Write in the ''"Type to search..."'' input area
Line 76: Line 76:
[[File:Flowe Scripts' Search Bar.png|none|thumb|394x394px|flowe_scripts'_search_bar.png/|flowe_scripts'_search_bar.png/]]
[[File:Flowe Scripts' Search Bar.png|none|thumb|394x394px|flowe_scripts'_search_bar.png/|flowe_scripts'_search_bar.png/]]


==== 2. Add new script ====
==== 2. Adding new script ====


* Click on the "Add" button beside the search bar
* Click on the "''Add''" button beside the search bar
** You will be redirected to [[#Scripts - Management Page|Scripts Management Page]]
** You will be redirected to [[#Scripts - Management Page|Scripts Management Page]]


[[File:Flowe Scripts Add Button.png|none|thumb|flowe_scripts_add_button.png/|flowe_scripts_add_button.png/]]
[[File:Flowe Scripts Add Button.png|none|thumb|flowe_scripts_add_button.png/|flowe_scripts_add_button.png/]]


==== 3. Import script ====
==== 3. Importing script ====


# Click on the "Import" button beside the search bar
# Click on the "''Import''" button beside the search bar
#* An import modal will open
#* An import modal will open
# Select the file by clicking on the "Select file" button
# Select the file by clicking on the "Select file" button
Line 95: Line 95:
[[File:Flowe Import Script Modal.png|none|thumb|flowe_import_script_modal.png/|flowe_import_script_modal.png/]]
[[File:Flowe Import Script Modal.png|none|thumb|flowe_import_script_modal.png/|flowe_import_script_modal.png/]]


==== 4. Download script ====
==== 4. Downloading script ====


* Click on the download icon button on the right of the script's informations
* Click on the download icon button on the right of the script's informations
** The download will begin as soon as you click
** The download will begin as soon as you click


[[File:Flowe Download Script Button.png|none|thumb|Download script button|flowe_download_script_button.png/]]
[[File:Flowe Download Script Button.png|none|thumb|flowe_download_script_button.png/|flowe_download_script_button.png/]]


==== 5. Edit script ====
==== 5. Editing script ====


* Click on the edit icon button on the right of the script's informations
* Click on the edit icon button on the right of the script's informations
** You will be redirected to [[#Scripts - Management Page|Scripts Management Page]]
** You will be redirected to [[#Scripts - Management Page|Scripts Management Page]]


[[File:Flowe Edit Script Button.png|none|thumb|Edit script button|flowe_edit_script_button.png/]]
[[File:Flowe Edit Script Button.png|none|thumb|flowe_edit_script_button.png/|flowe_edit_script_button.png/]]


==== 6. Delete script ====
==== 6. Deleting script ====


#Click on the trash/delete icon button on the right of the script's informations
#Click on the trash/delete icon button on the right of the script's informations
Line 118: Line 118:
#* The modal will close
#* The modal will close


[[File:Flowe Delete Script Button.png|none|thumb|Delete script button|flowe_delete_script_button.png/]]
[[File:Flowe Delete Script Button.png|none|thumb|flowe_delete_script_button.png/|flowe_delete_script_button.png/]]
[[File:Flowe Delete Script Modal.png|none|thumb|Delete specified script modal|flowe_delete_script_modal.png/]]
[[File:Flowe Delete Script Modal.png|none|thumb|flowe_delete_script_modal.png/|flowe_delete_script_modal.png/]]


=== Scripts - Management Page ===
=== Scripts - Management Page ===
The Scripts '''Management Page''' is the core interface for creating and editing XML scripts within the Flowe application. This page is designed to provide users with a intuitive interactive editor where scripts can be built from scratch or modified as needed.
The Scripts '''Management Page''' is the core interface for creating and editing XML scripts within the Flowe application. This page is designed to provide users with a intuitive interactive editor where scripts can be built from scratch or modified as needed.
[[File:Flowe New Script Management Page.png|thumb|473x473px|Management page with highlighted features (new script)]]
[[File:Flowe New Script Management Page.png|thumb|473x473px|Management page with highlighted features (new script)|flowe_new_script_management_page.png/]]
[[File:Flowe Previously Made Script Management Page.png|thumb|473x473px|Management page with highlighted features (previously made script)]]
[[File:Flowe Scripts Management Page 2.1.png|thumb|473x473px|Management page with highlighted features (with added function)]]
The interface is divided into the following key areas:
The interface is divided into the following key areas:


Line 137: Line 137:


Elements are based on the official [https://www.innovaphone.com/xsd/vm.htm Innovaphone XML Schema].
Elements are based on the official [https://www.innovaphone.com/xsd/vm.htm Innovaphone XML Schema].
[[File:Flowe Script Collapsed Functions.png|none|thumb|465x465px|Collapsed functions when script is opened]]
[[File:Flowe Script Collapsed Functions.png|none|thumb|465x465px|Collapsed functions when script is opened (previously made script)|flowe_script_collapsed_functions.png/]]


==== 1. Elements List ====
==== 1. Elements List ====
The '''Elements List''' contains all XML components available for building scripts in the Flowe application. These elements are based on the official [https://www.innovaphone.com/xsd/vm.htm Innovaphone XML Schema], used for managing the script structure and logic within the XML file.
The '''Elements List''' contains all XML components available for building scripts in the Flowe application. These elements are based on the official [https://www.innovaphone.com/xsd/vm.htm Innovaphone XML Schema], used for managing the script structure and logic within the XML file.
[[File:Flowe Add Element.png|thumb|383x383px|Add element]]
[[File:Flowe Add Element.png|thumb|383x383px|Add element|flowe_add_element.png/]]
[[File:Flowe Assign Element.png|thumb|383x383px|Assign element]]
[[File:Flowe Assign Element.png|thumb|383x383px|Assign element|flowe_assign_element.png/]]
[[File:Flowe If Element.png|thumb|382x382px|If element with nestable element space]]
[[File:Flowe If Element.png|thumb|382x382px|If element with nestable element space|flowe_if_element.png/]]


* '''How to use the elements:''' Users can insert elements inside functions and fill out the required fields according to their purpose and the Innovaphone documentation. Each element should be configured with the necessary data to achieve the expected behavior within the script logic.
* '''How to use the elements:''' Users can insert elements inside functions and fill out the required fields according to their purpose and the Innovaphone documentation. Each element should be configured with the necessary data to achieve the expected behavior within the script logic.
Line 149: Line 149:
* '''Custom element – "Comment":''' In addition to the standard Innovaphone elements, Flowe provides a new custom element named '''Comment''' (as of now, shown as "Comentário"). This element is designed purely for documentation purposes and allows users to insert comments directly into the XML code. These comments have no effect on script execution and serve only as notes or explanations within the file.
* '''Custom element – "Comment":''' In addition to the standard Innovaphone elements, Flowe provides a new custom element named '''Comment''' (as of now, shown as "Comentário"). This element is designed purely for documentation purposes and allows users to insert comments directly into the XML code. These comments have no effect on script execution and serve only as notes or explanations within the file.


[[File:Flowe Comment Element.png|none|thumb|534x534px|Comment element]]
[[File:Flowe Comment Element.png|none|thumb|534x534px|Comment element|flowe_comment_element.png/]]


* In the example shown in the images:
* In the example shown in the images:
Line 157: Line 157:
** '''Comment element:''' with a text input, one can add a comment to the script in the position where the element was added.
** '''Comment element:''' with a text input, one can add a comment to the script in the position where the element was added.


==== 2. Search for element ====
==== 2. Searching for element ====


* Write in the "Search elements..." input area
* Write in the ''"Search elements..."'' input area
** Use keywords that match either the element name or its description
** Use keywords that match either the element name or its description


[[File:Flowe Scripts' Search Bar.png|none|thumb|410x410px|Search elements input]]
[[File:Flowe Scripts' Search Bar.png|none|thumb|410x410px|Search elements input|flowe_scripts'_search_bar.png/]]
[[File:Flowe Script Search Element Example.png|none|thumb|Searching element example]]
[[File:Flowe Script Search Element Example.png|none|thumb|Searching element example|flowe_script_search_element_example.png/]]


==== 3. Change script name ====
==== 3. Changing script name ====


==== 4. Cancel creation/edition ====
#Write in the ''"Enter the script name"'' input area;
#* The name is required for creating or editing a script.
#Save the changes by clicking on the save button after you are done with script management.
#*If the name is already in use, the input area will become red and the Save button will be deactivated;
#*If the project is attempted to be saved without a name, an alert will pop-up.


==== 5. Save script ====
[[File:Flowe Enter Script Name.png|none|thumb|499x499px|Script name input area]]
[[File:Flowe Script Name Already In Use Tooltip.png|none|thumb|499x499px|''"A script with this name already exists (...)"'']]
[[File:Flowe Name Required Modal.png|none|thumb|258x258px|Name requirement alert]]


==== 6. Add function to script ====
==== 4. Canceling script management ====


==== 7. Add element to function ====
* Click on the "''Cancel''" button between the name input and the save button.
** The page will be redirected back to the script initial area and <u>all progress won't be saved</u>.


==== 8. Fill element information ====
[[File:Flowe Cancel Script Button.png|none|thumb|260x260px|Cancel script management button]]


==== 9. Remove element from function ====
==== 5. Saving script ====
 
* Click on the "''Save''" button beside the cancel button.
** The page will be redirected back to the script initial area;
*** The script will be updated on/added to your list.
** A script can only be saved if it has a unique name that is not already in use.
 
[[File:Flowe Save Script Button.png|none|thumb|160x160px|Save script management button]]
 
==== 6. Adding function to script ====
 
# Write in the ''"New function name"'' input area;
#* A name is required to add a new function.
# Click on the "''Add''" button on the right;
#* New functions will be added in tandem.
 
[[File:Flowe Script New Function.png|none|thumb|543x543px|Add a new function]]
 
==== 7. Changing function name ====
 
# Click on the pencil icon button by the side of the red trash icon;
#* Only the main function can't be changed;
# Alter the name in the input area;
# When finished, click ouside the input area.
#* The name will be saved automatically.
 
[[File:Flowe Script Function Name Change.png|none|thumb|531x531px|Changing function's name]]
 
==== 8. Removing function from script ====
 
* Click on the trash/delete red icon button on the far top right side of the function area;
** The entire function will be deleted promptly.
 
[[File:Flowe Script Delete Function Button.png|none|thumb|266x266px|Delete function button]]
 
==== 9. Adding element to function ====
 
# Click on the + dotted area where you want to add an element;
#* The area will become blue when selected;
# Click on the element of your choice from the elements list add it;
#* Search for the element of your choice and just click on it;
#* If a place to add an element is not selected, clicking on an element will add it after the last added element;
#* If there is only the empty main function and the place to add an element is not selected, clicking on an element will not add it to the scrip;
#* An element can be added before, after and in between other elements;
#* An element can be nested in other elements and added as previously.
 
[[File:Flowe Add First Element.png|none|thumb|468x468px|Adding first element to the function (+ Dotted Area: Selected)]]
[[File:Flowe Adding More Elements.png|none|thumb|468x468px|Adding more elements to the function (+ Dotted Areas)]]
[[File:Flowe Adding Nested Elements.png|none|thumb|467x467px|Adding nested elements (+ Dotted Areas)]]
 
==== 10. Filling element informations ====
 
* Write in the input areas of the element as required;
** Every element has different inputs based on Innovaphone XML Schema.
 
[[File:Flowe Add Element Values.png|none|thumb|467x467px|Add function inputs]]
 
==== 11. Removing element from function ====
 
* Click on the trash/delete red icon button on the far top right side of the element area;
** The entire element will be deleted promptly.
 
[[File:Flowe Remove Element.png|none|thumb|469x469px|Remove element button]]


=== IVRs ===
=== IVRs ===
Line 197: Line 266:
IVRs are fully integrated with the Scripts module, ensuring that each IVR is functional only if a valid script is associated with it.
IVRs are fully integrated with the Scripts module, ensuring that each IVR is functional only if a valid script is associated with it.


==== Search for IVR ====
==== Searching for IVR ====


==== Add new IVR ====
==== Adding new IVR ====


==== Edit IVR ====
==== Editing IVR ====


==== Delete IVR ====
==== Deleting IVR ====


=== Additional Functions ===
=== Additional Functions ===
Line 209: Line 278:
==== Licensing Page ====
==== Licensing Page ====
The '''Licensing page''' displays essential licensing information related to the Flowe application. This page is purely informational and does not contain interactive elements. It typically shows a message with contact details for inquiries or further licensing procedures.
The '''Licensing page''' displays essential licensing information related to the Flowe application. This page is purely informational and does not contain interactive elements. It typically shows a message with contact details for inquiries or further licensing procedures.
[[File:Flowe Licensing Page.png|none|thumb|363x363px|Licensing page]]


==== Language Configuration ====
==== Language Configuration ====
The '''language selector''' is always visible within the application's interface, allowing users to seamlessly switch between Portuguese, English, and German at any time. This ensures that the application is accessible and user-friendly across different language preferences, with all texts dynamically updated upon selection.
The '''language selector''' is always visible within the application's interface, allowing users to seamlessly switch between Portuguese, English, and German at any time. This ensures that the application is accessible and user-friendly across different language preferences, with all texts dynamically updated upon selection.
[[File:Flowe Language Select.png|none|thumb|198x198px|Language Selection]]


== Licensing ==
== Licensing ==

Revision as of 20:46, 5 May 2025

Partner App Info
flowe_logo_small.png/
flowe_logo_small.png/
Name Flowe
Company Wecom
Version 1.0
Compatibility Innovaphone XML Schema
License Via Innovaphone Pricelist
Languages Portuguese, English, German

Product Name

Flowe Link

Certification status

Space dedicated to Flowe certification information.

Category

VoIP system management products

Vendor

logo_wecom.png/

Wecom

Description

Flowe is a Partner App developed by Wecom for the Innovaphone MyApps platform. It is designed to simplify the creation, edition, and management of XML scripts and Voicemail Objects within the PBX.

With a user-friendly and responsive interface optimized for mobile and desktop use, Flowe allows administrators to:

  • Create and edit XML scripts visually
  • Import and export script files
  • Create and assign scripts to IVRs (Interactive Voice Response systems)
  • Manage multi-language content (Portuguese, English, German)

Flowe enhances productivity by abstracting technical complexity and aligning with Innovaphone’s native schema definitions.

Functions

This section provides an overview of each core part of the Flowe application. It highlights the purpose of each page, what actions can be performed, and how to navigate through the available features. Additionally, this section provides step-by-step explanations for each functionality.

Scripts - Initial Page

flowe's_scripts'_initial_page.png/

The Scripts Initial Page section is the main entry point of the Flowe application. Upon launching the app, users are presented with an overview of all existing XML scripts that have been created or imported into the system where users can quickly access, search for and manage scripts.

The interface is divided into a search bar, a list of scripts, and two main action buttons: Add and Import. Each script listed displays essential information such as its filename, creation date, last modification date, file size and a unique identifier.

Additionally, each script entry offers three direct action buttons:

  • Download – allows the user to download the XML file locally.
  • Edit – redirects the user to the Script Management page, where the script can be fully edited.
  • Delete – opens a confirmation modal for script deletion.

1. Searching for script

  1. Write in the "Type to search..." input area
  2. The results will be shown below
flowe_scripts'_search_bar.png/

2. Adding new script

flowe_scripts_add_button.png/

3. Importing script

  1. Click on the "Import" button beside the search bar
    • An import modal will open
  2. Select the file by clicking on the "Select file" button
    • A file selection pop-up will open
  3. Click on the modal's "Import" button
    • The imported script will appear in the list below
flowe_scripts_import_button.png/
flowe_import_script_modal.png/

4. Downloading script

  • Click on the download icon button on the right of the script's informations
    • The download will begin as soon as you click
flowe_download_script_button.png/

5. Editing script

  • Click on the edit icon button on the right of the script's informations
flowe_edit_script_button.png/

6. Deleting script

  1. Click on the trash/delete icon button on the right of the script's informations
    • A delete modal will open
  2. If you want to delete, click on the "Delete" button on the right
    • The file will be deleted and won't appear in the list
  3. If you misclicked or don't want to delete, click on the "Cancel" button on the left
    • The modal will close
flowe_delete_script_button.png/
flowe_delete_script_modal.png/

Scripts - Management Page

The Scripts Management Page is the core interface for creating and editing XML scripts within the Flowe application. This page is designed to provide users with a intuitive interactive editor where scripts can be built from scratch or modified as needed.

flowe_new_script_management_page.png/
Management page with highlighted features (with added function)

The interface is divided into the following key areas:

  • Script Name Input – Located at the top of the page, this input field is mandatory. Users must define a unique name for the script before they can save it.
  • Elements List – Positioned on the left side, this section contains all available XML elements, each with a brief description, that can be inserted into the script.
  • Search Bar for Elements – A search bar above the elements list allows users to search through using keywords that match either the element name or its description.
  • Script Body – The main workspace is located on the right side and displays the full structure of the script as collapsed blocks. Each script begins with a pre-created Main Function (automatically provided when starting a new script), the following functions and, inside each function, users can dynamically insert and manage elements.
  • Add New Function – Below the script body, an input field and button allow users to sequentially create new named functions.
  • Action Buttons:
    • Save – Saves the current script, either as a new file or as an update to an existing one.
    • Cancel – Aborts the script creation or editing process and returns the user to the Initial Scripts Page.

Elements are based on the official Innovaphone XML Schema.

flowe_script_collapsed_functions.png/

1. Elements List

The Elements List contains all XML components available for building scripts in the Flowe application. These elements are based on the official Innovaphone XML Schema, used for managing the script structure and logic within the XML file.

flowe_add_element.png/
flowe_assign_element.png/
flowe_if_element.png/
  • How to use the elements: Users can insert elements inside functions and fill out the required fields according to their purpose and the Innovaphone documentation. Each element should be configured with the necessary data to achieve the expected behavior within the script logic.
  • Nested elements: Some elements allow other elements to be placed inside them, supporting nested structures. For example, you can insert a Switch block inside an If condition, and within that Switch, you can have additional If conditions, and so on. These elements are collapsible, with a collapsing button next to the element's name.
  • Custom element – "Comment": In addition to the standard Innovaphone elements, Flowe provides a new custom element named Comment (as of now, shown as "Comentário"). This element is designed purely for documentation purposes and allows users to insert comments directly into the XML code. These comments have no effect on script execution and serve only as notes or explanations within the file.
flowe_comment_element.png/
  • In the example shown in the images:
    • Add element: one can write two values and the output.
    • Assign element: one can assign a value to a variable
    • If element: one can define the condition and nest an element inside. The else if and else elements are not automatically created.
    • Comment element: with a text input, one can add a comment to the script in the position where the element was added.

2. Searching for element

  • Write in the "Search elements..." input area
    • Use keywords that match either the element name or its description
flowe_scripts'_search_bar.png/
flowe_script_search_element_example.png/

3. Changing script name

  1. Write in the "Enter the script name" input area;
    • The name is required for creating or editing a script.
  2. Save the changes by clicking on the save button after you are done with script management.
    • If the name is already in use, the input area will become red and the Save button will be deactivated;
    • If the project is attempted to be saved without a name, an alert will pop-up.
Script name input area
"A script with this name already exists (...)"
Name requirement alert

4. Canceling script management

  • Click on the "Cancel" button between the name input and the save button.
    • The page will be redirected back to the script initial area and all progress won't be saved.
Cancel script management button

5. Saving script

  • Click on the "Save" button beside the cancel button.
    • The page will be redirected back to the script initial area;
      • The script will be updated on/added to your list.
    • A script can only be saved if it has a unique name that is not already in use.
Save script management button

6. Adding function to script

  1. Write in the "New function name" input area;
    • A name is required to add a new function.
  2. Click on the "Add" button on the right;
    • New functions will be added in tandem.
Add a new function

7. Changing function name

  1. Click on the pencil icon button by the side of the red trash icon;
    • Only the main function can't be changed;
  2. Alter the name in the input area;
  3. When finished, click ouside the input area.
    • The name will be saved automatically.
Changing function's name

8. Removing function from script

  • Click on the trash/delete red icon button on the far top right side of the function area;
    • The entire function will be deleted promptly.
Delete function button

9. Adding element to function

  1. Click on the + dotted area where you want to add an element;
    • The area will become blue when selected;
  2. Click on the element of your choice from the elements list add it;
    • Search for the element of your choice and just click on it;
    • If a place to add an element is not selected, clicking on an element will add it after the last added element;
    • If there is only the empty main function and the place to add an element is not selected, clicking on an element will not add it to the scrip;
    • An element can be added before, after and in between other elements;
    • An element can be nested in other elements and added as previously.
Adding first element to the function (+ Dotted Area: Selected)
Adding more elements to the function (+ Dotted Areas)
Adding nested elements (+ Dotted Areas)

10. Filling element informations

  • Write in the input areas of the element as required;
    • Every element has different inputs based on Innovaphone XML Schema.
Add function inputs

11. Removing element from function

  • Click on the trash/delete red icon button on the far top right side of the element area;
    • The entire element will be deleted promptly.
Remove element button

IVRs

The IVRs Page is the main interface for managing IVR entries within the Flowe application. It allows users to create, edit, and organize IVRs that are associated with existing XML scripts.

The interface is divided into the following key areas:

  • IVR Search Bar – Positioned at the top of the page, this input allows users to search through existing IVRs by title.
  • Add IVR Button – Located to the right of the search bar, this button opens a modal window to create a new IVR entry. It is mandatory to associate the IVR with a previously created script.
  • IVRs List – Displays all IVRs in a card-based format. Each card contains the following details:
    • Title – The unique name identifying the IVR.
    • Internal Number – The internal extension assigned to the IVR.
    • SIP Number – The SIP number configured for the IVR.
    • Script – The XML script that is linked to the IVR.
  • Action Buttons on Each IVR:
    • Edit – Opens the same modal used for creation, pre-filled with the IVR’s current data for editing.
    • Delete – Removes the IVR after confirmation.

IVRs are fully integrated with the Scripts module, ensuring that each IVR is functional only if a valid script is associated with it.

Searching for IVR

Adding new IVR

Editing IVR

Deleting IVR

Additional Functions

Licensing Page

The Licensing page displays essential licensing information related to the Flowe application. This page is purely informational and does not contain interactive elements. It typically shows a message with contact details for inquiries or further licensing procedures.

Licensing page

Language Configuration

The language selector is always visible within the application's interface, allowing users to seamlessly switch between Portuguese, English, and German at any time. This ensures that the application is accessible and user-friendly across different language preferences, with all texts dynamically updated upon selection.

Language Selection

Licensing

Licensing information.

Prerequisites

Prerequisites information.

Versions

Versioning information.

Configuration

Configuration information.

Installation

Installation information.

Copyright information

Contact

Contact information.