# Custom the flow chart status

**URL:** <https://community.yeeflow.com/t/custom-the-flow-chart-status/205>\
**Category:** Ask the community\
**Created:** [September 12, 2023, 7:38am UTC](https://community.yeeflow.com/t/custom-the-flow-chart-status/205 "2023-09-12T07:38:16Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![BMY](https://yyz2.discourse-cdn.com/flex032/user_avatar/community.yeeflow.com/bmy/32/285_2.png) [@BMY](https://community.yeeflow.com/u/BMY)\
**Post date:** [September 12, 2023, 7:38am UTC](https://community.yeeflow.com/t/custom-the-flow-chart-status/205/1 "2023-09-12T07:38:16Z")

</div>

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](https://canada1.discourse-cdn.com/flex032/uploads/yeeflow/original/1X/aad7174b9b35f6253ae6d8fb49ef18836b776261.png)

---

<div class="post-metadata">

**Author:** ![frank](https://avatars.discourse-cdn.com/v4/letter/f/3d9bf3/32.png) [@frank](https://community.yeeflow.com/u/frank)\
**Post date:** [September 13, 2023, 10:52am UTC](https://community.yeeflow.com/t/custom-the-flow-chart-status/205/2 "2023-09-13T10:52:07Z")

</div>

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

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

```

---

<div class="post-metadata">

**Author:** ![johnny](https://avatars.discourse-cdn.com/v4/letter/j/ecb155/32.png) [@johnny](https://community.yeeflow.com/u/johnny)\
**Post date:** [September 14, 2023, 3:59pm UTC](https://community.yeeflow.com/t/custom-the-flow-chart-status/205/3 "2023-09-14T15:59:41Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![frank](https://avatars.discourse-cdn.com/v4/letter/f/3d9bf3/32.png) [@frank](https://community.yeeflow.com/u/frank)\
**Post date:** [September 15, 2023, 3:09am UTC](https://community.yeeflow.com/t/custom-the-flow-chart-status/205/4 "2023-09-15T03:09:43Z")

</div>

Hi Johnny,

Here’s a full code sample for your reference.

```auto
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 [];
    }
}

```

---

<div class="post-metadata">

**Author:** ![johnny](https://avatars.discourse-cdn.com/v4/letter/j/ecb155/32.png) [@johnny](https://community.yeeflow.com/u/johnny)\
**Post date:** [September 15, 2023, 6:43am UTC](https://community.yeeflow.com/t/custom-the-flow-chart-status/205/5 "2023-09-15T06:43:07Z")

</div>

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](https://canada1.discourse-cdn.com/flex032/uploads/yeeflow/original/1X/c5c92340465a790418f51d37e658a1b88d572e05.png)  
 ![002](https://canada1.discourse-cdn.com/flex032/uploads/yeeflow/original/1X/9243d599424c6a44685e3e4ba68d56a527eeabb8.jpeg)  
 ![003](https://canada1.discourse-cdn.com/flex032/uploads/yeeflow/original/1X/25f830b05d49d324a2340ffed5fc0e09b61062b5.jpeg)  
 ![004](https://canada1.discourse-cdn.com/flex032/uploads/yeeflow/original/1X/50e3c18208461a699918767f7fe0d29015c9c1b6.jpeg)

---

<div class="post-metadata">

**Author:** ![frank](https://avatars.discourse-cdn.com/v4/letter/f/3d9bf3/32.png) [@frank](https://community.yeeflow.com/u/frank)\
**Post date:** [September 15, 2023, 7:01am UTC](https://community.yeeflow.com/t/custom-the-flow-chart-status/205/7 "2023-09-15T07:01:57Z")

</div>

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.

```auto
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}]);

```

---

<div class="post-metadata">

**Author:** ![johnny](https://avatars.discourse-cdn.com/v4/letter/j/ecb155/32.png) [@johnny](https://community.yeeflow.com/u/johnny)\
**Post date:** [September 15, 2023, 7:28am UTC](https://community.yeeflow.com/t/custom-the-flow-chart-status/205/8 "2023-09-15T07:28:27Z")

</div>

Great! It is successful, thanks a lot!

 ![001](https://canada1.discourse-cdn.com/flex032/uploads/yeeflow/original/1X/de7cf33726e94bd41e8dca4f42e504b63fb74344.png)