Instruct XB AI to use specific field types

Input

Output

Status

Text field - Simple title text

Formatted text field - HTML-enabled rich text description

Link field - Button with a relative URL

Image field - Displays an image with proper attributes

Boolean field - Toggle for showing/hiding advanced options

Integer field - Number of items with visual representation

Number field - Rating displayed as stars with decimal support

List: Text - Dropdown menu with text options

List: Integer - Button group with numeric options

The component uses Tailwind CSS for styling and includes interactive elements that respond to the provided props. Each field type has its own section with clear labeling to showcase how each prop type works in Experience Builder.

You can now add this component to your Experience Builder interface and configure the different field types through the props panel.

Component created with :

Prop name title and type Text

Prop name Description and type Text (should have being Formatted Text)

Prop name Button Link and type Link

Prop name Showcase Image and type Image

Prop name Number of Items and type Integer

Prop name Rating and type Number

and other fields are present as javascript code : (instead of props)
showAdvancedOptions = false,
statusOptions = ["Not Started", "In Progress", "Completed"],
valueOptions = [10, 20, 30]

const [selectedStatus, setSelectedStatus] = useState(statusOptions[0]);
const [selectedValue, setSelectedValue] = useState(valueOptions[0]);

The component includes:

A gender selection field with radio buttons for Male and Female

A profile photo upload field with image preview

A checkbox for yes/no boolean input (implemented as an "Accept Terms and Conditions" field)

A date selection field with options for 24, 25, and 26 displayed as clickable buttons

The form is fully functional with:

Form validation for all required fields

Visual feedback for errors

A success message when the form is submitted

Styling using Tailwind CSS for a clean, modern appearance

Customizable field labels and text through props

The component is now available in your Experience Builder and ready to be used in your project.

Creates props as

Prop name Form Title of type Text

Prop name Submit Button Text of type Text (should have being link)

Prop name Success Message of type Text

Prop name Upload Field Label of type Text

Prop name Boolean Field Label of type Text

Prop name Gender Field Label of type Text

Prop name Date Field Label of type Text

A field of type list:text for user inputs regarding Gender, with options for Male and Female.

A second field of type image to upload the user's profile photo.

A third field of type boolean that accepts Yes and No as input values.

Lastly, a field of type list:integer providing date options of 24, 25, and 26.

A Gender field (list:text) with options for Male and Female

A Profile Photo field (image) for uploading a profile photo

An Is Available field (boolean) that accepts Yes and No values

An Event Date field (list:integer) with options 24, 25, and 26

The component displays a profile card with:

A rounded profile photo at the top

A section showing the person's gender

Their availability status (Yes/No)

The event date they selected, formatted with the current month and year

The design uses Tailwind CSS for styling with a clean, modern card layout that's responsive and mobile-friendly. The component includes proper handling of image loading states and provides a placeholder when no image is available.

Creates props as

Prop name Gender of type List:text

Prop name Profile Photo of type Image

Prop name Is Available of type Boolean

Prop name Event Date of type List:integer

Added a new formatted text prop called "Description" to the component with an appropriate default value.

Created a new section in the profile card that appears after the existing fields to display the description content.

Used the dangerouslySetInnerHTML attribute to properly render the HTML content from the formatted text field.

Applied appropriate styling to maintain consistency with the existing design.

The description field will now be available for users to enter their personal description, and it will be displayed in a dedicated section below the other profile information fields.

Prop added

Prop name Description of type Formatted text

The button has been added below the description field

It has a blue background (bg-blue-500) with a hover state (hover:bg-blue-600)

The text is white (text-white)

The button displays the text "Submit"

It's centered using the text-center class on the parent div

When clicked, it triggers the handleSubmit() function which shows an alert saying "Profile submitted successfully!"

The button also includes additional styling for better user experience:

Rounded corners (rounded-md)

Appropriate padding (py-2 px-6)

Medium font weight (font-medium)

A smooth color transition effect on hover (transition-colors duration-300)

The component has been successfully updated while preserving all its existing functionality.

Instead of new prop of type link , java script code is added

  <div className="mt-6 text-center">
    <button 
      onClick={handleSubmit} 
      className="bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-6 rounded-md transition-colors duration-300">
      Submit
    </button>
  </div>

Added a new prop called buttonLink that accepts a relative URL (type: link)

Set a default value of "/submit-profile" for the buttonLink prop

Replaced the hardcoded button element with an anchor () element that uses the buttonLink prop as its href attribute

Removed the handleSubmit function since it's no longer needed with a link-based navigation

Updated the props metadata to include the new buttonLink prop with appropriate type and formatting

Now instead of triggering a JavaScript function when clicked, the button will navigate to the URL specified in the buttonLink prop. This allows content editors to control the button's destination through the Experience Builder interface rather than requiring a code change.

Prop added

Prop name Button Link of type Link

 <div className="mt-6 text-center">
    <a 
      href={buttonLink} 
      className="bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-6 rounded-md transition-colors duration-300 inline-block">
      Submit
    </a>
  </div>