Dialog Line breaks in Custom Code

[Sam]

Hi YeeFlow,

I like to use some line breaks in my dialog, with character \n on my content string like below code

                AkModal.confirm({
                     title: "Script sample",
                     content: "Your data list reach \n\nthe maximun No. of record.",
                //...

Source Code Reference to https://github.com/Yeeflow/custom-code/blob/master/src/codeInExecute.tsx

• When only using custom code, it fails to show line breaks

But If I save the content sting on a variable, and use “Confirm Dialog” to display it

context.setFieldValue("content_string", "Your data list reach \n\nthe maximun No. of record.");

it will show line breaks on the content message.

• when using “Confirm Dialog” and variable(value set on custom code), it’ll show line breaks.

My question is there any way to show line breaks in a dialog’s message using custom code only?

Thank you!

[frank]

Hi Sam, you can use HTML element in dialog content.

import * as React from "react";
import { MODULE_COMMON } from "./constants";

export class CodeInApplication implements CodeInComp {
    execute(context: CodeInContext, fieldsValues: any) {
        return new Promise((resolve, reject) => {
            const params = context.params;
            const fieldId = params["varId"];
            if (!fieldId) {
                alert("Please configure input parameter: varId");
                resolve(false);
            }

            const common = context.modules[MODULE_COMMON];
            const { AkModal } = common;
            AkModal.confirm({
                title: "Script sample",
                content: <div>First line <br/> Second line</div>,
                onOk: () => {
                    context.setFieldValue(fieldId, !fieldsValues[fieldId]);
                    resolve(true);
                },
                onCancel: () => {
                    resolve(false);
                }
            });
        });
    }

    requiredFields(params) {
        return [params["varId"]];
    }

    requiredModules() {
        return [];
    }

    description() {
        return "Show a modal dialog.  And toggle the swtich value of provided varId.";
    }

    inputParameters() {
        return [{
            id: "varId",
            type: "string",
            desc: "Varaible ID of the switch control"
        }, {
            id: "content",
            type: "string",
            desc: "Modal dialog content"
        }] as InputParameter[];
    }
}

[Sam]

Hi @frank, your code works fine, thank you!

One more question about custom code, if the user clicks “OK” on a dialog, can I use custom code to submit the form? (Without adding “Submit Form” step on the Actions, image below)

Thank you!

[Jason]

@Sam
Yes, you can “Submit Form” relevant data in the subsequent custom code。

[Sam]

Hi @Jason, do you have any coding examples? I couldn’t find “Submit Form” function on YeeFlow custom code.
Thank you!

[Jason]

What I mean is that you can add a “Submit Form” action after the custom code action