Knowledge Base

Introduction

The Experience Designer is an intuitive visual interface builder for creating engaging user experiences. It provides a drag-and-drop interface and dynamic data integration capabilities, allowing you to easily design and configure custom user experiences for your Ligantic solution.

Experience Configuration

The Experience Configuration section allows you to set up the basic details of your Experience:

1. Name: This field allows you to enter a name for the Experience.
2. Pathname: This field allows you to enter a pathname for the Experience.
3. Access Mode: This dropdown menu allows you to select the access mode for the experience, choosing between "Space Members", "Authenticated", and "Public".
4. Remove Powered By Logo: This checkbox allows you to remove the "Powered By Ligantic" logo if it is available in your subscription.
5. View Preview: This opens a live preview page for you to view your Experience.
6. Remove: In the settings dropdown (icon) you can choose to Remove the Experience from your Space.
7. Save (icon): Experiences automatically save. You can see that the Experience is valid and the current state saved from a green icon with a tick. A red icon with a cross through the cloud indicates there is an error in the Experience that needs to be resolved prior to saving.

Experience Designer

The Experience Designer interface consists of three main panels:

1. Block Selector: This panel on the left displays the different types of blocks that can be used to build the Experience, such as Box, Text, Link, Button, Input, Image, Audio, and Video.
2. Designer Canvas: This central panel is where you can drag and drop the blocks to create the layout of your Experience.
3. Block Configuration: This panel on the right allows you to configure the settings for the selected block, such as spacing, layout, size, border, background, and visual effects.

There is the ability to undo and redo last actions via the icons in the top right corner of the Experience Designer.

Blocks

The Experience Designer provides a variety of block types that you can use to build your user interface:

1. Box: This block type allows you to add a box or container to the Experience.
2. Text: This block type allows you to add text to the Experience.
3. Link: This block type allows you to add a link to the Experience.
4. Button: This block type allows you to add a button to the Experience.
5. Input: This block type allows you to add an input field to the Experience.
6. Image: This block type allows you to add an image to the Experience.
7. Audio: This block type allows you to add audio to the Experience.
8. Video: This block type allows you to add video to the Experience.

Configuration Settings

When you select a block in the Experience Designer, you can configure various settings for that block:

• Spacing: This section allows you to configure the spacing of the selected block, including gaps, margins, and padding.
• Query: This section allows you to configure a Query against a Schema in the Space, which can introduce dynamic data into the block.
• For Each: This section allows you to configure a loop over specific data from a Schema in the Space.
• Entity Context: This section allows you to configure a Query against a Schema in the Space and make it available to the current block and any children of the block.
• Layout: This section allows you to configure the layout of the selected block, including direction, alignment, justification, and wrapping options.
• Size: This section allows you to configure the size of the selected block, including relative positioning, width and height, and overflow behaviour.
• Border: This section allows you to configure the border of the selected block, including style, colour, radius, and width.
• Background: This section allows you to configure the background of the selected block, including the colour.
• Visual Effects: This section allows you to configure the visual effects of the selected block, including box shadows.
• Text: This section allows you to configure the text styling of the selected block, including linking to dynamic data, font family, size, alignment, and white space.
• Link: This section allows you to configure the link behaviour of the selected block, including the type of link, destination, and any data to send with the navigation.
• Flow Trigger: This section allows you to configure the link behaviour of the selected block to trigger a Flow from the Space.
• Input: This section allows you to configure the input behaviour of the selected block, including the Schema it should be connected with.
• Image: This section allows you to configure the image source, alternative text, size, and positioning behaviour.
• Audio: This section allows you to configure the audio source, play behaviours, and size and positioning of the player controls.
• Video: This section allows you to configure the video source, play behaviours, and size and positioning of the player controls.

Tree Section

The Tree section in the Experience Designer allows you to navigate the hierarchical structure of your user interface. This is particularly important in complex, nested user interface systems, as it provides a clear overview of the layout and relationships between different elements.

AI Powered Experiences

Ligantic's latest capability in the Experiences section is AI Content Generation. You can now generate content using AI by pressing "ctrl + i" to bring up an input where you can describe the UI that you want to generate. This new feature allows you to quickly create content using AI, without the need for manual design or development.

Preview

The Preview feature in the Experience Designer allows you to see a live preview of the Experience you've designed. This helps you validate the layout, functionality, and overall user experience before publishing your solution.