# Dialog Line breaks in Custom Code

**URL:** <https://community.yeeflow.com/t/dialog-line-breaks-in-custom-code/193>\
**Category:** Ask the community\
**Created:** [July 27, 2023, 6:13am UTC](https://community.yeeflow.com/t/dialog-line-breaks-in-custom-code/193 "2023-07-27T06:13:40Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Sam](https://yyz2.discourse-cdn.com/flex032/user_avatar/community.yeeflow.com/sam/32/151_2.png) [@Sam](https://community.yeeflow.com/u/Sam)\
**Post date:** [July 27, 2023, 6:13am UTC](https://community.yeeflow.com/t/dialog-line-breaks-in-custom-code/193/1 "2023-07-27T06:13:40Z")

</div>

Hi YeeFlow,

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

```auto
                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](https://github.com/Yeeflow/custom-code/blob/master/src/codeInExecute.tsx)

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

- 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.

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

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

- 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!

---

<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:** [July 27, 2023, 10:12am UTC](https://community.yeeflow.com/t/dialog-line-breaks-in-custom-code/193/2 "2023-07-27T10:12:03Z")

</div>

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

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

```

---

<div class="post-metadata">

**Author:** ![Sam](https://yyz2.discourse-cdn.com/flex032/user_avatar/community.yeeflow.com/sam/32/151_2.png) [@Sam](https://community.yeeflow.com/u/Sam)\
**Post date:** [July 28, 2023, 6:46am UTC](https://community.yeeflow.com/t/dialog-line-breaks-in-custom-code/193/3 "2023-07-28T06:46:58Z")

</div>

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)

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

Thank you!

---

<div class="post-metadata">

**Author:** ![Jason](https://yyz2.discourse-cdn.com/flex032/user_avatar/community.yeeflow.com/jason/32/186_2.png) [@Jason](https://community.yeeflow.com/u/Jason)\
**Post date:** [July 31, 2023, 8:00am UTC](https://community.yeeflow.com/t/dialog-line-breaks-in-custom-code/193/4 "2023-07-31T08:00:36Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Sam](https://yyz2.discourse-cdn.com/flex032/user_avatar/community.yeeflow.com/sam/32/151_2.png) [@Sam](https://community.yeeflow.com/u/Sam)\
**Post date:** [August 1, 2023, 3:41am UTC](https://community.yeeflow.com/t/dialog-line-breaks-in-custom-code/193/5 "2023-08-01T03:41:00Z")

</div>

Hi @Jason, do you have any coding examples? I couldn’t find “Submit Form” function on [YeeFlow custom code](https://github.com/Yeeflow/custom-code/tree/master).  
Thank you!

---

<div class="post-metadata">

**Author:** ![Jason](https://yyz2.discourse-cdn.com/flex032/user_avatar/community.yeeflow.com/jason/32/186_2.png) [@Jason](https://community.yeeflow.com/u/Jason)\
**Post date:** [August 2, 2023, 2:48am UTC](https://community.yeeflow.com/t/dialog-line-breaks-in-custom-code/193/6 "2023-08-02T02:48:28Z")

</div>

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

 ![微信图片_20230802104718](https://canada1.discourse-cdn.com/flex032/uploads/yeeflow/original/1X/df867ac322f712ccbf9003d2908e50408386fe4c.png)