Page type

Timeline: every table with a date becomes a timeline.

This timeline reads the same 52 sales from the sample app. They appear in date order, grouped by day, each with the salesperson and payment method.

The most recent sales, grouped by day

You don't write a query. You point to the table and say which field is the title, which is the body and which is the date. The page sorts the records, groups them by day and draws the rail.

Sales timeline grouped by date, with customer, amount, salesperson and payment method on each entry
Each day gets a date badge, and each sale shows customer and amount in the title, with salesperson, payment and items right below.

One tag builds the whole page

In the generated code, the page fits in a single tag. The same format works for order history, inventory movement, auditing and support.

resources/views/…blade.php
<mad-timelinemodel="Venda"title_field="titulo_timeline"   {{-- accessor: customer + amount --}}body_field="resumo_timeline"    {{-- accessor: salesperson · payment · items --}}date_field="data_venda"color_field="status"date_format="m/d/Y":limit="14"cards />

When to use the timeline

The timeline is for telling the story of something: what happened, in what order and on which day. It is made to be read top to bottom, with no columns or day grid.

  • Customer history. Orders, contacts and tickets in date order, so whoever picks up the customer knows what already happened.
  • Inventory movement. A product's stock in and out, each with its own color.
  • Auditing. Who changed what and when, with the changes grouped by day.
  • Order tracking. Paid, picked, shipped: each step with its date and its icon.

If the person needs to filter, sort by other columns or export, the list view is the right type. If they need to see the week and the month on a grid, or change the date by dragging, use the calendar. You can also describe the timeline in plain English and ask the AI agent, which builds the page with the PHP and Blade.

What you configure

It all lives in the same tag. These are the example's attributes and what each one changes.

Table model
Where the entries come from. Here, the sales table.
Title and body title_field
The field that becomes each entry's title. The text right below comes from body_field.
Date date_field
The field that sorts the entries and decides which day each is grouped under. The badge format goes in date_format.
Color color_field
The field that gives each entry its color. Here, the sale's status.
Amount limit
How many entries the page shows. The example stops at 14.
Cards cards
Shows each entry in a card. Without it, the entry is a simple row.

What goes into the Laravel project

The timeline is a class in app/Control with the <mad-timeline> view. Items can come from three places:

  • Title and body in model accessors. In the example, titulo_timeline and resumo_timeline are accessors on the Venda model. One combines customer and amount, the other combines salesperson, payment and items.
  • Items built in PHP. With no table, the list comes from a method on the screen (:items="$that->timelineItems()"), with the date, title, body, icon and color of each item.
  • Items written in the view. For a fixed timeline, each entry is a <mad-timeline-item> tag, with title, date and icon.

Like every MadBuilder screen, these files open in your editor, go into your Git and accept hand-written code in protected blocks, which stay there when the screen is regenerated. See how the code is generated.

Questions about the timeline

Does any table become a timeline?

Any table with a date field. You point to that field, the title field and the body field, and the page sorts the entries and groups them by day.

Does the timeline load all the records at once?

It doesn't have to. You limit how many entries appear, and the page can load more when the person asks. In this example, it is the 14 most recent sales.

What is the difference between a timeline and a calendar?

The calendar shows events on a day grid, with day, week, month and list views, and lets you drag to change the date. The timeline is a list in date order, grouped by day, made for reading history.

And more

Groups entries by date on its ownCards or a simple row, your choiceEntries on both sides of the rail, for long historiesIts own icon and color on each entryLoads more entries when you askHand-written items, when the data doesn't come from a tableTitle and body that combine several fields, such as customer and amount

See also the Calendar or the page types.

Create an account, build a screen, download the project.

No scheduled demo, no discovery call. If the Laravel that comes out doesn’t pass your team’s review, you lost an afternoon.

  1. Create an accountOpen beta, no credit card.
  2. Build a screenVisually, in code, or by asking the AI.
  3. Download the .zipA Laravel project that runs wherever you want.