Class ModalFormData

Example: modalFormSimple.ts

import { Player } from '@minecraft/server';
import { ModalFormData } from '@minecraft/server-ui';

function showExampleModal(player: Player) {
    const modalForm = new ModalFormData().title('Example Modal Controls for §o§7ModalFormData§r');

    modalForm.toggle('Toggle w/o default');
    modalForm.toggle('Toggle w/ default', true);

    modalForm.slider('Slider w/o default', 0, 50, 5);
    modalForm.slider('Slider w/ default', 0, 50, 5, 30);

    modalForm.dropdown('Dropdown w/o default', ['option 1', 'option 2', 'option 3']);
    modalForm.dropdown('Dropdown w/ default', ['option 1', 'option 2', 'option 3'], 2);

    modalForm.textField('Input w/o default', 'type text here');
    modalForm.textField('Input w/ default', 'type text here', 'this is default');

    modalForm
        .show(player)
        .then(formData => {
            player.sendMessage(`Modal form results: ${JSON.stringify(formData.formValues, undefined, 2)}`);
        })
        .catch((error: Error) => {
            player.sendMessage('Failed to show form: ' + error);
            return -1;
        });
}
Copy

Example: effectGenerator.js

import { Player, world } from "@minecraft/server";
import { ModalFormData } from "@minecraft/server-ui";
let form = new ModalFormData();
let effectList = [
    { name: "Regeneration", id: "minecraft:regeneration" },
    { name: "Resistance", id: "minecraft:resistance" },
    { name: "Fire Resistance", id: "minecraft:fire_resistance" },
    { name: "Poison", id: "minecraft:poison" },
];
form.title("Effect Generator");
form.textField("Target", "Target of Effect");
form.dropdown(
    "Effect Type",
    effectList.map((effect) => effect.name),
);
form.slider("Effect Level", 0, 255, 1);
form.toggle("Hide Effect Particle", true);
for (const player of world.getAllPlayers()) {
    form.show(player).then((response) => {
        if (response.canceled) {
            player.sendMessage("Canceled due to " + response.cancelationReason);
        } else {
            const [targetName, dropdownValue, effectLevel, hideParticles] =
                response.formValues;
            if (
                typeof dropdownValue !== "string" ||
                typeof dropdownValue !== "number" ||
                typeof effectLevel !== "number" ||
                typeof hideParticles !== "boolean"
            )
                return player.sendMessage("Cannot process form result.");
            const target = world
                .getAllPlayers()
                .find((player) => player.name === targetName);
            if (!(target instanceof Player))
                return player.sendMessage("Target does not exist.");
            target.addEffect(effectList[dropdownValue].id, 50, {
                amplifier: effectLevel,
                showParticles: !hideParticles,
            });
        }
    });
}
Copy

Example: Effect Generator Form

Example Code (v2)

import { Player, world } from "@minecraft/server";
import { ModalFormData } from "@minecraft/server-ui";
let form = new ModalFormData();
let effectList = [
  { name: "Regeneration", id: "minecraft:regeneration" },
  { name: "Resistance", id: "minecraft:resistance" },
  { name: "Fire Resistance", id: "minecraft:fire_resistance" },
  { name: "Poison", id: "minecraft:poison" },
];
form.title("Effect Generator");
form.textField("Target", "Target of Effect");
form.dropdown(
  "Effect Type",
  effectList.map((effect) => effect.name)
);
form.slider("Effect Level", 0, 255, {
  defaultValue: 1,
  tooltip: "Level of the effect",
  valueStep: 1,
});
form.toggle("Hide Effect Particle", {
  defaultValue: true,
  tooltip: "Toggle to hide/show effect particles",
});
for (const player of world.getAllPlayers()) {
  form.show(player).then((response) => {
    if (response.canceled) {
      player.sendMessage("Canceled due to " + response.cancelationReason);
    } else {
      const [targetName, dropdownValue, effectLevel, hideParticles] =
        response.formValues;
      if (
        typeof dropdownValue !== "string" ||
        typeof dropdownValue !== "number" ||
        typeof effectLevel !== "number" ||
        typeof hideParticles !== "boolean"
      )
        return player.sendMessage("Cannot process form result.");
      const target = world
        .getAllPlayers()
        .find((player) => player.name === targetName);
      if (!(target instanceof Player))
        return player.sendMessage("Target does not exist.");
      target.addEffect(effectList[dropdownValue].id, 50, {
        amplifier: effectLevel,
        showParticles: !hideParticles,
      });
    }
  });
}
Copy

Example Code (v1)

import { Player, world } from "@minecraft/server";
import { ModalFormData } from "@minecraft/server-ui";
let form = new ModalFormData();
let effectList = [
  { name: "Regeneration", id: "minecraft:regeneration" },
  { name: "Resistance", id: "minecraft:resistance" },
  { name: "Fire Resistance", id: "minecraft:fire_resistance" },
  { name: "Poison", id: "minecraft:poison" },
];
form.title("Effect Generator");
form.textField("Target", "Target of Effect");
form.dropdown(
  "Effect Type",
  effectList.map((effect) => effect.name)
);
form.slider("Effect Level", 0, 255, 1);
form.toggle("Hide Effect Particle", true);
for (const player of world.getAllPlayers()) {
  form.show(player).then((response) => {
    if (response.canceled) {
      player.sendMessage("Canceled due to " + response.cancelationReason);
    } else {
      const [targetName, dropdownValue, effectLevel, hideParticles] =
        response.formValues;
      if (
        typeof dropdownValue !== "string" ||
        typeof dropdownValue !== "number" ||
        typeof effectLevel !== "number" ||
        typeof hideParticles !== "boolean"
      )
        return player.sendMessage("Cannot process form result.");
      const target = world
        .getAllPlayers()
        .find((player) => player.name === targetName);
      if (!(target instanceof Player))
        return player.sendMessage("Target does not exist.");
      target.addEffect(effectList[dropdownValue].id, 50, {
        amplifier: effectLevel,
        showParticles: !hideParticles,
      });
    }
  });
}
Copy

Modal Form v2.0.0-beta features

@minecraft/server-ui v2.0.0-beta module currently adds headers, dividers, labels and more. The following images demostrates those features (subject to change).

Image from xKingDark