Custom Methods

Custom methods allow you to create your own reusable value generators. They are useful when the built-in generators do not provide the exact behavior you need.

Global Methods

Custom methods are global. This means that a custom method is not associated with a specific preset. Once created, it can be used by fields in any preset. For example, you can create a method called randomUserId and use it across multiple presets.

Cereating a custom method

To create a new method

1. Load any preset
2. In any field, open method selector
3. Scroll at the end of selector and cligh in New Method +
4. The editor will be open and now you can write your custom method
5. The save is automatic

Editing custom method

You can edit by selecting you custom method at any field

1. Open field settings 2 Go to method tab
2. Edit you method

Tip: By edit a method, every fields that uses this method will be affected

Editing custom method name

To edit a name of a custom method you need to

1. go to method editor
2. 4 You can edit method name by clicking in name above the editor
3. confirm you edition

Custom method names must be unique.

Custom Method Rules

A custom method must be an arrow function. For example:

() => "Hello"

Or:

(name) => `Hello, ${name}`

A method can receive one or more parameters:

(firstName, lastName) => `${firstName} ${lastName}`

Method always must to return something

(options) => {
  // Yout custom method
  return something
}

The returned value is used by AutoForm when filling the field.

Using Other Generator

Custom methods can also access methods the other available generators. This allows you to combine built-in generators with your own logic. For example, a custom method can use a Faker generator and then transform its result:

() => faker.person.firstName().toUpperCase()

This makes custom methods useful for building more specialized generators from existing ones.

See the generator documentation for the available methods and APIs

• Faker
• Box4Dev

Returning Files

Custom Methods can return a File object. This allows you to generate files dynamically using JavaScript, such as CSV files, spreadsheets, PDFs, images, or any other file format that can be created in the browser.

The following example uses Faker to generate a small collection of users to generate the data into an CSV spreadsheet.

() => {
  const users = faker.helpers.multiple(
    () => ({
      name: faker.person.fullName(),
      email: faker.internet.email(),
      phone: faker.phone.number(),
    }),
    { count: 10 },
  );

  const headers = Object.keys(users[0]);

  const rows = users.map((user) =>
    headers.map((header) => JSON.stringify(user[header])).join(","),
  );

  const csv = [headers.join(","), ...rows].join("\n");

  return new File(
    [csv],
    "users.csv",
    { type: "text/csv;charset=utf-8" },
  );
}

The method first uses faker.helpers.multiple() to generate 10 user objects. These objects are then converted into CSV format using standard JavaScript APIs and returned as a File.

The same approach can be used to generate other file types. The Custom Method is responsible for creating and returning the file; AutoForm does not need to know how the file was generated or what its contents represent.

See the [Faker documentation](https://fakerjs.dev/api/helpers) for more information about faker.helpers.multiple().

Fetching external data

Custom Methods can use the native fetch() API to retrieve data from external services. This allows you to use APIs as data sources when generating values.

For example, the following method fetches a random user from an external API and returns their name:

async () => {
  const response = await fetch("https://randomuser.me/api/");
  const data = await response.json();

  return data.results[0].name.first;
}

The method can use the response in any way needed before returning a value. It can also make authenticated requests, send data using different HTTP methods, or consume APIs that return JSON, text, or other supported response formats.

Because Custom Methods run in the sandbox, network requests are performed independently from the page where AutoForm is being used. The target API must still allow the request according to its own access and CORS policies.

Method Options

The same Options rules described in Fields & Forms apply to custom methods.

Tip: Methods ar globals, but options works at field scope, so, you can pass diffrent options in diffrent filds to the same custom method

Formatting custom method

Custom methods can be formatted using the built-in formatting action. Formatting helps keep custom method code readable and consistently structured. Is haves an auto format on close editor that can be turne of on Configurations

Deleting a custom method

Custom methods can be deleted from the Custom Methods editor.

Be careful when deleting a method. Custocustom method may be referenced by fields in multiple presets. Removing the method also removes the method from any field that currently uses it. Before deleting a method, make sure it is no longer needed by your presets.