Frontend Interface

Frontend
Forms
API Integration
Build a user interface to display, add, edit and delete books, connecting to the backend API.
Library CRUD (Episode 2)
Back to the Academy

Frontend and CRUD Interactions

Quick Summary: Connect the backend to a user interface to display, create, update, and delete books using a store system and reusable components.

1. Main Page Structure

Create the frontend page

  1. Create a new page for the interface
  2. Design: book list on the left, interactions on the right

Configure the main container

  1. Create a container block with styles:
    • Display: flex
    • Gap: random value (e.g., 12px)
    • Align-items: flex-start (top alignment)
    • Width: 100%
    • Padding: 12px

Create the list container (booklist)

  1. Add a block named booklist inside the container
  2. Configure styles:
    • Display: grid
    • Gap: 2px
    • Grid-template-columns: 2 columns
    • Width: 50% (half the space)
    • Height: 100vh

2. BookInfo Component

Create the base component

  1. Create a new component named book-info
  2. Define styles:
    • Width: 100%
    • Height: 80px
    • Background: use a token (e.g., background-lightest)
    • Padding: 12px
    • Border-radius: 8px

If the component isn't visible, change preview mode from "Compact" to "Stretch"

Add dynamic properties

  1. Create two custom text elements in the component
  2. First text: write {title}
    • Curly braces create a dynamic property (turns blue)
  3. Second text: write {author}

Configure component properties

  1. Click on the book-info component
  2. Define input properties:
    • title (string)
    • author (string)
    • id (string) - add for future interactions
  3. Set default values for testing

Link properties to texts

  1. Click on the first custom text
  2. Click the lightning icon (⚡)
  3. Select the title property from the component
  4. Repeat for author

Style the title

  1. Select the title's custom text
  2. Modify styles:
    • Font-size: 24px
    • Color: content-deepest (for more contrast)

3. Store - Data Management

Create the store

  1. Create a new store named book-store
  2. The store holds frontend data
  3. Advantage: single database query, then data reuse

Define the store schema

Create the following structure:

books (array of objects)
  ├─ id (string)
  ├─ author (string)
  └─ title (string)

4. Load Data on Mount

Loading logic

  1. Go to the page's Logic tab
  2. Use the onMounted trigger (when page loads)

Fetch the data

  1. Pull an execution wire from onMounted
  2. Call the getbooks route (created in previous episode)
  3. The route returns a response with all data

Update the store

  1. Create a get node to retrieve bookstore
  2. Create a setproperty node
  3. Connect bookstore to target
  4. Select the books property
  5. Connect the response from getbooks to the books field
  6. Connect the execution wire

Test with Execute and Ctrl+Space: db-books data appears in the store

5. Display Books with Template

Create the loop

  1. In the page, delete test book-info components
  2. Add a book-info component
  3. Right-click on book-info → Wrap a component
  4. Select Template
  5. Change from if to for (to iterate)
  6. Select books from the store

Link dynamic data

  1. Click on the book-info component in the template
  2. Define properties:
    • title: click lightning → select title from template
    • author: click lightning → select author from template
    • id: click lightning → select id from template

In Builder mode, set template to "All" to see all elements (instead of "Once")

6. Creation Pop-up

Create the pop-up structure

  1. Click + or type "pop-up" in search
  2. Add a block in the pop-up containing:
    • Two text input elements
    • One button

Style the pop-up

  1. To visualize in development mode, force display in properties
  2. Configure the block:
    • Width: 200px
    • Display: flex
    • Flex-direction: column
    • Gap: 12px
  3. Configure the button:
    • Width: 100%
    • Text: "Create"

Configure inputs

  1. First input:
    • Placeholder: "book title"
  2. Second input:
    • Placeholder: "author"

Create page variables

  1. In the page, add two variables:
    • title (string)
    • author (string)

Link inputs to variables

  1. First text input: select model → choose title
  2. Second text input: select model → choose author

Model creates a two-way binding between input and variable

7. Creation Logic

Test value retrieval

  1. On the Create button, add an onClick event
  2. Create a get title and display in console
  3. Test in preview: write in input → click Create → see value

Call the creation route

  1. Delete the console test
  2. Pull a wire from onClick
  3. Call the createbooks route
  4. For the body:
    • Pull a wire → automatically create a create object
    • Connect get title to title field
    • Connect get author to author field

Update the store

  1. Create a get bookstore
  2. Create a setproperty
  3. Select books
  4. Connect the response from createbooks

The book is now added to the list!

8. Managing Pop-up Display

Create the control variable

  1. Add a createBook variable (boolean) in the page
  2. On the pop-up, set the model: createBook
    • If createBook = true → pop-up visible
    • If createBook = false → pop-up hidden

Open pop-up with + button

  1. Create a button in the page
  2. Configure the button:
    • Icon: plus
    • Size: large
    • Shape: round
  3. Style with position:
    • Position: absolute
    • Bottom: 16px
    • Right: 16px
  4. Add an onClick event
  5. Create a set createBook → check (set to true)

Close pop-up after creation

  1. In the Create button logic
  2. Add a set createBook → uncheck (set to false)
  3. Place after store update

Clicking outside the pop-up automatically closes it

9. Selected Book Display

Add to store schema

Create a new object in book-store:

selectedBook (object)
  ├─ id (string)
  ├─ author (string)
  └─ title (string)

Create the information container

  1. Add a bookinfo block (different from component)
  2. Place at top for clarity
  3. Configure:
    • Width: 50%
  4. Add:
    • One custom text for the title
    • One block with two icons

Add action icons

  1. First icon:
    • Icon: trash (delete)
    • Size: larger
    • Color: distinct color
    • Cursor: pointer
  2. Second icon:
    • Icon: pencil (edit)
    • Color: different color
    • Cursor: pointer

Selection logic in component

  1. In the book-info component, add an onClick event on the container
  2. Create a get bookstore
  3. Create a setproperty → select selectedBook
  4. Automatically create a create object
  5. Connect properties:
    • get id → id
    • get author → author
    • get title → title

Display selected title

  1. In the bookinfo container's custom text
  2. Write {selectedTitle} to create the property
  3. Define selectedTitle = bookstore.selectedBook.title

Clicking a book automatically updates the display

10. Deleting a Book

Deletion logic

  1. On the trash icon, add an onClick event
  2. Call the deletebook route
  3. Create a create object for the body:
    • id: retrieve with get bookstore → property selectedBook.id

Update the store

  1. Create a setproperty for books
  2. Connect the response

Reset selection

  1. Create another setproperty for selectedBook
  2. Don't connect anything (leave empty)
  3. Reason: book no longer exists, clear selection

Improvement with condition

  1. Wrap the bookinfo container in a template
  2. Use if logic
  3. Condition: bookstore.selectedBook.id exists (not empty)
  4. Uncheck to invert: display only if id exists

After deletion, icons automatically disappear

11. Modifying a Book

Create the modification pop-up

  1. Copy the creation pop-up
  2. Rename to "Modify" (and the other to "Create" to differentiate)
  3. Change button text to "Modify"

Create control variable

  1. Add a modifyBook variable (boolean)
  2. On the Modify pop-up, set the model: modifyBook

Open pop-up and pre-fill

  1. On the pencil icon, add an onClick event
  2. Create a set modifyBook → true
  3. Pre-fill inputs:
    • Create a get bookstore
    • Retrieve selectedBook
    • Create a spread to destructure
    • set title → connect title from spread
    • set author → connect author from spread

Modification logic

  1. On the Modify button, add an onClick event
  2. Call the updatebooks route
  3. Create the body:
    • id: retrieve from bookstore.selectedBook.id
    • title: get title (from variable)
    • author: get author (from variable)

Update the store

  1. setproperty for books → connect response
  2. setproperty for selectedBook → connect body (to display new values)
  3. set modifyBook → false (close pop-up)

Summary of Key Concepts

Concept Usage
Store Centralized frontend data storage
Template (for) Iterate over an array to display multiple elements
Template (if) Conditionally display elements
Model Two-way binding between input and variable
Get property Extract a property from an object
Set property Modify a property of an object or store
Spread Destructure all properties of an object
Page variables Store temporary values (inputs, states)
onMounted Execute code when page loads

Data Architecture

Page Variables
├─ title (string) - temporary input
├─ author (string) - temporary input
├─ createBook (boolean) - creation pop-up control
└─ modifyBook (boolean) - modification pop-up control

Book Store
├─ books (array) - complete list
└─ selectedBook (object) - currently selected book

Practical Tips

  • Always name clearly variables and components
  • Use "All" mode in templates to see all elements in development
  • Test with Ctrl+Space to visualize data at each step
  • Pop-ups automatically close when clicking outside
  • Use store tokens to access nested data
  • Reset selectedBook after deletion to avoid errors
  • Model creates two-way binding (input change = variable change)
  • Remember to close pop-ups after actions (create/modify)
  • Use spread to easily destructure complex objects