Creating Custom Flows

This section walks you through the steps that you need to follow to create a custom flow:

STEP 1. Provide custom flow general information

From the menu, click Digital Journeys > Custom Flows. The Custom Flows page appears.

At the top-left corner of the page, click the Create button. The custom flow configuration is displayed which consists of three sections (tabs). The configuration page is displayed by default on the General tab.

Fill-in the fields based on your needs:

Click the ''Save and reload'' button and new tabs will be available.

STEP 2. Design the custom flow layout

Click the Code tab. The Code section is displayed on the Template tab. In the Template section, provide the HTML code which defines the layout of the custom flow.

Using custom flows you can also create custom controls. For more information, see Creating Custom Controls.

STEP 3. Define the custom flow

In the Code section, click the After Generate Js tab and provide the JavaScript code which defines the digital journey (redirect users to a specific data form or view, generate custom filtered views, add buttons which trigger specific actions).

var params = sessionStorage.getItem("sessionParameters");
params = JSON.parse(params);
params.fileIsBase64 = false;
var signContract = function()
{
   
    if(params.existingFile){
        ebs.showLoadingPanel();
        if(params.externalURL == true){
                params.settings.maskNextStepURLSuccess = params.settings.maskNextStepURLSuccess;
        }     else {
            params.settings.maskNextStepURLSuccess = ebs.getBaseUrl() + "/" + params.settings.maskNextStepURLSuccess;
        }
    console.log("params.settings.maskNextStepURLSuccess " + params.settings.maskNextStepURLSuccess);
    ebs.callActionByName("FTOS_DFP_ESign_Endpoint", {params: params}, function(result) {

        ebs.hideLoadingPanel();
        params = result.UIResult.Data.params;

        //remember to delete
        //console.log(JSON.stringify(params));
            
        sessionStorage.setItem("sessionParameters", JSON.stringify(params));     
        if(params.settings.redirecttoNamirialLink == true){   
                
                window.location.href = params.site;
                } else {
                window.history.back();
                }
        });
    } else ebs.showMessage("There is no file to sign!", "error");  
}
signContract();
// Upload document button
$('#btnUpload').click(function() {
        if(!params.existingFile){
                $('#fileInput').trigger('click');
                $('#fileInput').on('change', function(event) {
                var fileNotBase64 = event.target.files[0];      
                params.existingFile = true;       
                $('#fileInput').removeAttr('style');

                var reader = new FileReader();
                reader.onload = function(fileLoadedEvent) {
                var fileBase64 = fileLoadedEvent.target.result;
                fileBase64 = fileBase64.substring(fileBase64.indexOf(",")+1);
                params.file = fileBase64;
                params.fileIsBase64 = true;
                };
                reader.readAsDataURL(fileNotBase64);        
                });
        } else ebs.showMessage("A file was already uploaded!", "error");
});

// Sign document button
$("#btnSign").click(function(e) {
                signContract();
});        

STEP 4. Define who has access to the journey

If your business case requires that the custom flow is available to designated roles within your organization, click the Security Roles tab and add the security roles who should have access to them. If no security roles are added here, all users will be able to view the journey. For more information, see Creating Security Roles.

STEP 5. Save the journey

If you want to save and close the journey, at the top-right corner of the page click the Save and close icon.

If you want to save the journey and continue working on it, click the Save and reload icon.

STEP 6. Display the Custom Flow on the Portal

To add the flow to the dashboard, complete the following steps:

1. Navigate to the main menu, open the Digital Frontends, select the Digital Experience Portals.
2. Click on the Dashboards and from the list choose the dashboard name where you wish to place the flow.
3. The layout of the dashboard will open. Navigate to the right panel where there is a control table which adds the widgets.
   HINT
   If the dashboard does not have the checkbox ''Show on homepage'' equal true, then the dashboard will not be shown in the FintechOS Portal. Thus, any widget added to that dashboard will not be displayed.



4. Select the type ''Shortcut'', followed by the ''Custom Action'', and lastly the entity.
5. Click on the button which says ''Add Shortcut-EntityName''.

To add the flow as a menu item, complete the following steps:

1. Navigate to the main menu, open the Digital Frontends, select the Digital Experience Portals.
2. Click on the Menu Items. Click on ''Insert''.



3. The ''Add menu item'' page will open. Fill in the following:

   Field	Description
   Type	Select from the list: Entity Custom journey Report Menu section.
   Custom Journey	This field will open once you have chosen the type. Select the flow you wish to add.
   Display Name	Insert the name of the flow.
   Parent menu item	This field is optional, only if you are adding the flow inside another menu item. It shows the name of the menu item inside where the flow will appear.
   Icon URL	Select the desired icon.
   Disabled	Tick this checkbox if you wish to disable it.

4. Click the ''Save and reload''. The Edit menu item page will appear.
5. Add security roles by clicking the ''Insert existing.''