How to create dialogs and return values?

[WilcoHendriksen]

In the WorkloadClient we have this function:

      const result = await workloadClient.dialog.open({
        dialogType: DialogType.IFrame,
        route: { path: "/some-route" },
        workloadName: "Org.WorkloadSample",
        mode: OpenMode.Append,
        options: {
          height: "600px",
          width: "600px",
          hasCloseButton: true
        }
      })

The description of the function is:
@description — Opens a dialog that loads the workload app

Then my route looks like this:

export const router = createBrowserRouter(
  [
    {
      path: "/some-route",
      element: <NiceDialog />
    },
    etc...
  ]

Should we do it this way? Because when I try, the first time it opens my whole app(path: ""), the second time it loads my "dialog route". Seems like I need to preload it or something like that. And how do I return values from the dialog? The example application only calls a dialog from the "worker".

Or should we just use the "fluent ui" dialogs and skip the "workloadClient.dialog.open" function. If we call it this way the backdrop is only the portion of iframe(for modals), which is not ideal but works.

some context:
Our workload opens a UI in fabric, within that UI we want to open dialogs todo some stuff and update our UI.

[anitamayorov]

Hi @WilcoHendriksen,
Could you please elaborate on "the first time it opens my whole app(path: ""), the second time it loads my "dialog route"""? What exactly is your scenario?

Regarding the dialog's value, currently Fabric's framework does not support returning values from the dialogs opened using workloadClient.dialog.open for the Iframe dialogType, and for MessageBox type the return value is an object { value: { clickedButton: string } }.

Other \ custom return values are not supported at the moment.

[WilcoHendriksen]

My dialog:

import { makeStyles } from "@fluentui/react-components"

const useStyles = makeStyles({
  main: {
    width: "600px",
    height: "600px",
    display: "flex",
    flexDirection: "column",
    flex: "1"
  },
  header: {
    height: "90px",
    backgroundColor: "red"
  },
  body: {
    display: "flex",
    flex: "1",
    backgroundColor: "green"
  },
  footer: {
    height: "90px",
    backgroundColor: "blue"
  }
})

export default function NiceDialog() {
  const styles = useStyles()
  return (
    <div className={styles.main}>
      <div className={styles.header}>
        <p>header</p>
      </div>
      <div className={styles.body}>
        <p>body</p>
      </div>
      <div className={styles.footer}>
        <p>footer</p>
      </div>
    </div>
  )
}

my router:

export const router = createBrowserRouter(
  [
    {
      path: "/nice-dialog",
      element: <NiceDialog />
    },
    {
      path: "/",
      element: <Root />,
      children: [
        {
          path: "",
          element: <Home />
        },
        //other routes...
      ]
    }
  ],
  {
    // I added these here to be compatible with react router v7 in the future
    future: {
      v7_relativeSplatPath: true,
      v7_fetcherPersist: true,
      v7_normalizeFormMethod: true,
      v7_partialHydration: true
    }
  }
)

I have this button which calls the opendialog function

<Button onClick={() => opendialog()}>open dialog</Button>

The opendialog function calls the workload client:

const workloadClientx = createWorkloadClient()
  const opendialog = () => {
    const result = workloadClientx.dialog.open({
      dialogType: DialogType.IFrame,
      route: { path: "/nice-dialog" },
      workloadName: "Org.WorkloadSample",
      mode: OpenMode.Append,
      options: {
        height: "600px",
        width: "600px",
        hasCloseButton: true
      }
    })
  }

A dialog is opened but it shows my app without a route.

I close the dialog and open it again, then it shows correctly:

My use case is that I wanted to open a dialog with a form on it and return the values, but that is not supported.

We can work around it by creating a separate page or create a dialog and not use the workload function. So I will mark it as answered.