UX

User eXperience (UX) features are sets of component and schema conventions that add specific behavior to the current theme feature. Add instances of these features using the AddUx() extension;

app.Features.AddUx([...]);

Notice this is a multiple feature, meaning you may add more than one UX features. Since AddUxes() doesn't read well, while being still available, we kept the singular AddUx naming as the default.

Actions as Buttons

Renders non-GET actions as buttons under paths ending with actions/*.

c => c.ActionsAsButtons(maxParameterCountForConfirm: ...)

• Parameterized actions are rendered as forms in dialogs
  • When an action has UiRoute attribute, it is rendered as a Button that routes to the indicated path
• Submit buttons are rendered using primary severity
• Cancel and back buttons are rendered using text variant
• Mode for dialog is Dialog by default
  • DELETE dialogs use Confirm mode
  • Any method with <= maxParameterCountForConfirm use Confirm mode
• Default icons of buttons are added based on their HTTP method
  • PUT and PATCH use pi pi-pencil
  • DELETE use pi pi-trash with danger severity
  • POST that starts with add, create or new use pi pi-plus

Default value of maxParameterCountForConfirm is 3.

Actions are Contents

Adds GET actions as contents for SimplePage and TabbedPage. It also groups contents under configured tabs for TabbedPage.

c => c.ActionsAreContents()

• All GET actions of a type, except initializers, are added as contents
  • Without a Content configuration for a method at expected path, method will be skipped
• For TabbedPage, actions are grouped under tabs using their tab name in Group attribute
  • Tab titles are automatically localized and formatted (e.g., SampleTab → Sample Tab) when there are more than one tabs

Actions as Data Panels

Renders controller actions as DataPanel components inside a TabbedPage.

c => c.ActionsAsDataPanels()

• Methods with ApiAction attribute become DataPanel components
• Each action is shown inside the tab content where it belongs
• The panel title is taken from the method name
• Action parameters are added to the panel schema automatically
  • Panel parameters use float:on label by default

Data Table defaults

Configures DataTable components with a bunch of default settings.

c => c.DataTableDefaults()

• Sets row count to 5 and adds paginator
• Adds properties with UiData attribute as columns
  • For locatable properties, uses the first label (or id) property as component data, e.g., row.parent.name
  • Otherwise, sets the property value as component data, e.g., row.name
• Hides locatable properties of type as the same as the type of current page, e.g., Child.Parent column is hidden under any Parent page
• Adds export action to header
• Prepares action column to include item actions along with a reload reaction
• Action and dialog buttons use text variant using rounded style

Description Property

Marks properties and parameters that ends with or equal to Description using UiDescription attribute and treats properties and parameters with UiDescription attribute special attention to allow more UI space when under a DataTable, Fieldset or FormPage.

• Set Field.Wide to true to have a full width under a fieldset
• Set FormPage.InputGroup.Wide to true to have a full width under a form page
• Sets up a dialog button to show the content of description properties in a dialog under data tables

Enum Parameter is Select

Renders enum parameters as Select by default.

c => c.EnumParameterIsSelect(maxMemberCountForSelectButton: ...)

• By default, enum parameters are shown as a Select dropdown
  • For flags enum types, it uses MultiSelect
• When the number of enum members is less than or equal to the given limit, it switches to a SelectButton
  • For flags enum types, it switches to MultiSelectButton
• Required enum parameters default to the first enum member when parameter is in query or route

Default value of maxMemberCountForSelectButton is 3.

Form Inputs are Ifta Label

Configures all form inputs to use ifta label.

c => c.FormInputsAreIftaLabel()

Initializer Parameters are in Page Title

Adds initializer parameters of a transient class to the page title area of a TabbedPage.

c => c.InitializerParametersAreInPageTitle()

• Adds initializer parameters as query parameters of the page
  • Query parameters use float:on label by default
• Works for types marked with Transient attribute

Labels are Frozen

Configure label properties (properties with Label attribute) to have a better display in DataTable columns.

c => c.LabelsAreFrozen()

• Brings label columns before other columns via UiData.Order
• Label columns in a DataTable are frozen and have minimum width
• The first label column is used as the table’s data key if no key is set

List is Data Table

Shows list results of controller actions as a DataTable inside a DataPanel.

c => c.ListIsDataTable()

• Methods with ApiAction attribute that return a list are rendered as DataTable
• The DataTable is placed in the action’s panel content
• Properties of the list element type are added as table columns automatically

Numeric Values are Formatted

Right-aligns numeric columns and uses suitable components for each numeric type.

c => c.NumericValuesAreFormatted()

• int and long properties render with Number
• decimal properties render with Money
• double properties render with Rate
• DataTable columns for int, double, decimal and long are right-aligned

Object with List is Data Table

Shows list data from an object result as a DataTable inside a DataPanel.

c => c.ObjectWithListIsDataTable()

• Methods with ApiAction attribute that return an object containing a visible list property are rendered as DataTable
• The list property is detected automatically and used as the data source
• Properties of the list element type are added as table columns
• Other properties of the object are shown in the table footer as summary columns

This feature uses ObjectWithList attribute to decide which list property to render in a DataTable. You can override an existing attribute to point to another IEnumerable property. You can also add this attribute to a type so that actions returning it are rendered as a DataTable as well.

Panel Parameters are Stateful

Keeps parameter selections inside a DataPanel when the panel reloads. Parameters rendered with Select and SelectButton are marked as stateful.

c => c.PanelParametersAreStateful()

This only prevents losing user selection when changing query parameters of a report or navigating to different pages without refreshing. When a refresh occurs, client app is reloaded and all panel states are reset to their default.

Properties as Fieldset

Allows to add properties as a Fieldset component under SimplePage.

c => c.PropertiesAsFieldset()

• A content is created under .../simple-page/contents/fields path
• Each data property is configured as one field under a Fieldset instance
• Field components get their data from parent context
  • For locatable properties, uses the first label (or id) property as component data, e.g., data.parent.name
  • Otherwise, sets the property value as component data, e.g., data.name

Query Action as Data Container

Renders methods with QueryMethod attribute within the DataContainer component.

c => c.QueryActionAsDataContainer(
  pageSizeOptions: [...]
)

• Paging attribute with take role is rendered as Select
• Paging attribute with skip role is rendered as Paginator
  • When there is take parameter, paginator uses its value for page size calculation, otherwise it defaults to 10
• When container is wrapped in a DataPanel, only parameters with Sorting or Paging attributes are kept in DataContainer, remaining parameters are placed in DataPanel

Routed Types as Nav Links

Configures NavLink component for types that have UiRoute attribute under data table columns.

c => c.RoutedTypesAsNavLinks()

• Converts label properties to a NavLink using UiRoute route params

This will support other paths than data table column in the upcoming releases.