Creating a "Create reservation" custom page by using the IBM Carbon UI Builder

Learn how to create a page by using the IBM Carbon UI Builder. In this lesson, you can either build the form manually according to the design of your choosing, or download the sample and import the form into the builder.

Procedure

Use the IBM Carbon UI Builder to create a new Create reservation page.

Carbon is IBM's design system with ready-to-go component implementations in Angular, React and Vue.

The IBM Carbon UI Builder is a visual builder tool for Carbon UI components allowing you to build product pages in a fraction of time that it normally take. Export in seconds as image for presentations, live demo app for user testing or production quality code and incorporate in the existing product front-end. No coding required. For more information, see the carbon-ui-builder GitHub repo.

You can build the form manually, or use the sample assets to import the form into the IBM Carbon UI Builder (recommended).

To build the form manually:

  1. Open the IBM Carbon UI Builder: https://builder.carbondesignsystem.com
  2. Go to File > New.
  3. Click Empty page (with grid), then click Next.
  4. Use the IBM Carbon UI Builder to create a new Create reservation page by dragging and dropping your form elements into the builder.
  5. After you are finished building the form, click Export. Ensure that the Angular tab is selected and make note of the angular code inside each generated file. They will be used later in this task.
Recommended: To import the form into the IBM Carbon UI Builder:
Example: As a reference, you can use the sample assets to create the following form in the IBM Carbon UI Builder:
Create reservation
To use the sample assets:
  1. Download and extract the sample assets: create-reservation-form.zip.
  2. Open the IBM Carbon UI Builder: https://builder.carbondesignsystem.com
  3. Go to File > New.
  4. Click Import JSON, then click Next.
  5. Click Add file, then select the extracted create-reservation-form.json file.
  6. Click Done. The sample Create reservation form is imported into the IBM Carbon UI Builder. Review the form elements to familiarize yourself with how the sample is built.
  7. Rename the title to Create reservation form so that the Angular file paths contain create-reservation-form.
    Carbon UI Builder title
  8. Click Export. Ensure that the Angular tab is selected and make note of the angular code inside each generated file. They will be used later in this task.