Custom the flow chart status

Ask the community
1

is it possible to custom the below highlighted field in the flow chart? thanks.
E.G. status from ‘Rejected’ change to ‘Retuned’, ‘Completed’ change to ‘Accepted’

image
image1043×490 45.6 KB

2

Sorry that this cannot be done by configuration. An idea is you can use custom code to replace wording in HTML.

var a  = document.querySelector('.ak-form-workflow-history');
var s = a.innerHTML;
s = s.replaceAll('Rejected', 'Retuned').replaceAll('Completed', 'Accepted');
a.innerHTML = s;
3

Hi Frank, thank you for your code. Whether I put it in “Actions” and on load page or put it in “custom code” in form, the words of workflow status doesn’t change. But when I fresh the page or click a button with “Actions” in the form the words will be changed in HTML.
what can I do? Thanks!

4

Hi Johnny,

Here’s a full code sample for your reference.

import * as React from "react";

interface ChangeHistoryLogProps {
    context: CodeInContext;
    fieldsValues: any;
    readonly: boolean;
}

interface ChangeHistoryLogState {
}

class ChangeHistoryLog extends React.Component<ChangeHistoryLogProps, ChangeHistoryLogState> {

    constructor(props, context) {
        super(props, context);
    }

    componentDidMount() {
        //Avoiding component not yet loaded 
        let int = setInterval(() => {
            var a = document.querySelector('.ak-form-workflow-history');
            if (a) {
                clearInterval(int);
                var s = a.innerHTML;
                s = s.replace(/Rejected/g, "Retuned").replace(/Completed/g, "Accepted");
                a.innerHTML = s;
            }
        }, 100);
    }

    render() {
        return null;
    }
}

export class CodeInApplication implements CodeInComp {
    render(context: CodeInContext, fieldsValues: any, readonly: boolean) {
        return <ChangeHistoryLog context={context} fieldsValues={fieldsValues} readonly={readonly} />;
    }

    requiredFields() {
        return [];
    }

    requiredModules() {
        return [];
    }
}
5

Hi Frank, When I use this code, it is not still work with error messages.
And when I use your last code and click “button” on the form, your will see it is okay.
here is the screen capture for your reference. Thanks for your help!

001
0011920×819 256 KB

002
0021812×703 101 KB

003
0031920×923 217 KB

004
0041920×597 91.9 KB

7

Hi Johnny, It’s the source code to be used in custom code scaffolding project. Here is the compiled version of code, you can used directly in Custom Code control.

codeInModules=function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=3)}([,function(e,t){e.exports=React},,function(e,t,n){"use strict";var r,o=this&&this.__extends||(r=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)t.hasOwnProperty(n)&&(e[n]=t[n])},function(e,t){function n(){this.constructor=e}r(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)});Object.defineProperty(t,"__esModule",{value:!0});var u=n(1),i=function(e){function t(t,n){return e.call(this,t,n)||this}return o(t,e),t.prototype.componentDidMount=function(){var e=setInterval((function(){var t=document.querySelector(".ak-form-workflow-history");if(t){clearInterval(e);var n=t.innerHTML;n=n.replace(/Rejected/g,"Retuned").replace(/Completed/g,"Accepted"),t.innerHTML=n}}),100)},t.prototype.render=function(){return null},t}(u.Component),c=function(){function e(){}return e.prototype.render=function(e,t,n){return u.createElement(i,{context:e,fieldsValues:t,readonly:n})},e.prototype.description=function(){return"Change wording in workflow history"},e.prototype.requiredFields=function(){return[]},e.prototype.requiredModules=function(){return[]},e}();t.CodeInApplication=c}]);
8

Great! It is successful, thanks a lot!

001
0011418×413 212 KB