How to create a custom Save button

Ask the community
1

Hi YeeFlow,

On Task Form, how to use custom code or any other way to make a custom button trigger the save function?

Right now, the user can only click the “Save” button on the top right corner to save the form.
image

Thanks!

2

Hi Sam,

You can try use below custom script to trigger the click event of the Save button.

export class CodeInApplication implements CodeInComp {
    execute(context: CodeInContext, fieldsValues: any) {
        const btn: HTMLButtonElement = document.querySelector(".akfc-form-header .right-btn>button");
        btn && btn.click();
    }

    requiredFields(params) {
        return [];
    }

    requiredModules() {
        return [];
    }

    description() {
        return "Execute save on task form";
    }

    inputParameters() {
        return [] as InputParameter[];
    }
}

BTW, this code snippet require compile by Yeeflow custom script scaffold.

Regards,
Frank

1 Like
3

Hi @frank ,

Thank you for your quick reply and your custom code.

I just try it on my form. After I click my custom button, it shows the loading icon for less than a second, then it quickly disappears, and no successful message pops up. And the form data are not saved.

I use Chrome browser to test the form FYI.

Thank you!

4

Hi Sam,

Sorry. Please try this.

import { MODULE_COMMON } from "./constants";

export class CodeInApplication implements CodeInComp {
    execute(context: CodeInContext, fieldsValues: any) {
        const btn: HTMLButtonElement = document.querySelector(".akfc-form-header .right-btn>button");
        if (btn) {
            setTimeout(() => {
                btn.click();
            }, 500);
        }
    }

    requiredFields(params) {
        return [];
    }

    requiredModules() {
        return [];
    }

    description() {
        return "Execute save on task form";
    }

    inputParameters() {
        return [] as InputParameter[];
    }
}

Regards,
Frank

1 Like
5

Thanks @frank, it works perfectly fine.

6

Hi @frank ,

I have a follow-up question about custom save.

On your custom code, after the “Save” button is clicked, is there any way I can know when the save process is finished?

 setTimeout(() => {
      btn.click();
            setTimeout(() => {
               //my coding
            }, 10000);
 }, 500);

Right now I need to wait like 10 seconds, to make sure the auto-save task is finished.

Is there any way I can catch the auto-save process?

7

Hi Sam,

Here’s a litter trick you can try:

render() {
        // const ReactDOM = require('react-dom');
        console.log("ReactDOM", ReactDOM);
        const { context } = this.props;
        const common = context.modules[MODULE_COMMON]
        const { AkButton } = common;
        let setL: any = context.formContext.setLoading;
        const onClick = () => {
            console.log("Set loading", setL(true)); //simulate save function which will set loading to true.

            let inte = setInterval(() => {
                if (setL(true)) {
                    console.log("Loading is false, execution complete")
                    //Set true succeed when loading is false;
                    setL(false);
                    clearInterval(inte);
                } else {
                    console.log("Loading is true");
                }
            }, 100)

            //Clear loading (simulate saving completed)
            setTimeout(() => {
                setL(false);
            }, 1000);
        }

        return <AkButton onClick={onClick}>Test loading</AkButton>
    }
1 Like
8

Hi @frank ,

Thank you for your prompt reply! I just tried your code, which simulates the save function perfectly.

On the other hand, after I use the below code to trigger the save button

const btn: HTMLButtonElement = document.querySelector(".akfc-form-header .right-btn>button");
            
if (btn) {
     setTimeout(() => {
     btn.click();
   }, 500);
}

There is no way I can know when will the save process finish.

Can you help add a getLoading function on _codeIn.d.ts line 50 ?

setLoading?: (loading: boolean) => void;//set loading for current form
getLoading?: () => boolean; //get loading status of current form

Which helps me to know whether the loading icon is showing on the screen or not.

Thank you for your time.

9

Hi Sam, I have added the code snippet to your code segment. After form saved, the loading status will be changed to false. Then setLoading(true) can return true after that. The trick is to use this to determine whether the save completed.

const btn: HTMLButtonElement = document.querySelector(".akfc-form-header .right-btn>button");
            
if (btn) {
     setTimeout(() => {
     btn.click();

     let setL: any = context.formContext.setLoading;
     let inte = setInterval(() => {
                if (setL(true)) {
                    console.log("Loading is false, execution complete")
                    setL(false);
                    clearInterval(inte);


                    //put your logic here
                    
                } else {
                    console.log("Loading is true");
                }
            }, 100)
   }, 500);
}
10

To be more clear, the method will return false if to be set value equals to the current value. For instance, if the form is currently loading, and execute setLoading(true) will return false.

1 Like