Agile UI Demo v5.0-dev

Welcome to Agile Toolkit

Layout

Layouts Sliding Panel

Basics

View Button Header Message Labels Menu Breadcrumb Columns Grid Layout

Form

Basics and Layouting Data Integration Form Sections Form Multi-column layout Integration with Columns HTML Layout Conditional Fields

Form Controls

Input Input Decoration Calendar Checkboxes Value Selectors Lookup Lookup Dependency Dropdown File Upload Multi Line Tree Selector Scope Builder

Data Collection

Data table with formatted columns Advanced table examples Table interractions Column Menus Column Filters Grid - Table+Bar+Search+Paginator Crud - Full editing solution Crud - /w Array Persistence Card Deck - /w custom actions Lister Table column decorator from model

Data Action Executor

Executor Examples Assign action to event Assign action to button (Modal)Assign action to button (Panel)Assign action to button (V. Page)Execute from Grid Execute from Crud Executor Factory

Interactive

Tabs Card Card Table Accordion Wizard Virtual Page Modal Loader Console Dynamic scroll Background PHP Jobs (SSE)Progress Bar Pop-up Toast Paginator Drag sorting

Javascript

Events Element Reloading Vue Integration

Others

Sticky GET More Sticky Recursive Views

Agile UI Demo v5.0-dev

View Source

Extensions to ATK Data Actions

Showing different UserAction executors that can execute Atk4\Data model action.

JsCallbackExecutor

Path argument is set via POST URL when setting actions in executor.

Import File

BasicExecutor

Import From Filesystem

Execute Import action using "BasicExecutor" with argument "path" equal to "."

Import

PreviewExecutor

Execute Import using path: "."

Confirm

FormExecutor

Import From Filesystem

Only fields set in $action[field] array will be added in form.

Name

Save

ArgumentFormExecutor

Import From Filesystem

ArgumentFormExecutor will ask user about arguments set in actions.

Path

Run Import

Made with Agile Toolkit v5.0-dev