Overview
Output components are used to display data in form responses. The UI Metadata Framework Basic package provides several built-in output component bindings and types.
StringOutputComponentBinding
Component binding for text output fields.
The client-side component type identifier
Supported server-side C# types:
typeof(string)typeof(bool)
Usage
public class MyForm : Form<MyRequest, MyResponse>
{
public class MyResponse
{
public string Message { get; set; }
public bool Success { get; set; }
}
}
text output component.
DateTimeOutputComponentBinding
Component binding for date and time output fields.
The client-side component type identifier
serverType
Type
default:"typeof(DateTime)"
The server-side C# type this component binds to
Usage
public class MyForm : Form<MyRequest, MyResponse>
{
public class MyResponse
{
public DateTime CreatedAt { get; set; }
public DateTime? UpdatedAt { get; set; }
}
}
TableOutputComponentBinding
Component binding for rendering collections as tables.
The client-side component type identifier
Supported server-side C# types:
typeof(IEnumerable<>)typeof(IList<>)typeof(Array)
Tables have no label by default unless explicitly specified
Usage
public class MyForm : Form<MyRequest, MyResponse>
{
public class MyResponse
{
public IEnumerable<UserDto> Users { get; set; }
public List<ProductDto> Products { get; set; }
}
}
public class UserDto
{
public int Id { get; set; }
public string Name { get; set; }
public string Email { get; set; }
}
ActionList
Represents a list of actions that the user can perform.
List of actions available to the user
Properties
componentType
string
default:"action-list"
The client-side component type identifier
Usage
public class MyForm : Form<MyRequest, MyResponse>
{
public class MyResponse
{
public ActionList AvailableActions { get; set; }
}
protected override MyResponse Handle(MyRequest request)
{
return new MyResponse
{
AvailableActions = new ActionList(
new FormLink
{
Form = "EditUser",
Label = "Edit",
Action = FormLinkActions.OpenModal,
InputFieldValues = new Dictionary<string, object?>
{
{ "UserId", request.UserId }
}
},
new FormLink
{
Form = "DeleteUser",
Label = "Delete",
Action = FormLinkActions.Run
}
)
};
}
}
Name of the form to link to
Label to be shown on the client when rendering the link
What to do when the user clicks on the link. See FormLinkActions for available options
InputFieldValues
IDictionary<string, object?>?
Values for the input fields of the invoked form
Properties
The client-side component type identifier
Usage
public class MyResponse
{
public FormLink EditLink { get; set; }
}
var response = new MyResponse
{
EditLink = new FormLink
{
Form = "EditUser",
Label = "Edit User",
Action = FormLinkActions.OpenModal,
InputFieldValues = new Dictionary<string, object?>
{
{ "UserId", 123 }
}
}
};
Run
const string
default:"run"
Form should be run immediately after user clicks the link. User cannot modify InputFieldValues
OpenModal
const string
default:"open-modal"
Form should be opened in a modal, allowing user to review before running
Redirect
const string
default:"redirect"
Link behaves as a regular link, redirecting to the specified form
Usage
var link = new FormLink
{
Form = "ConfirmAction",
Action = FormLinkActions.OpenModal // Opens in modal
};
var quickAction = new FormLink
{
Form = "QuickDelete",
Action = FormLinkActions.Run // Executes immediately
};
var navigation = new FormLink
{
Form = "UserDetails",
Action = FormLinkActions.Redirect // Navigates to form
};
Name of the form to render
InputFieldValues
IDictionary<string, object?>?
Values for the input fields of the form
Properties
componentType
string
default:"inline-form"
The client-side component type identifier
Usage
public class MyForm : Form<MyRequest, MyResponse>
{
public class MyResponse
{
public InlineForm NestedForm { get; set; }
}
protected override MyResponse Handle(MyRequest request)
{
return new MyResponse
{
NestedForm = new InlineForm
{
Form = "AddressForm",
InputFieldValues = new Dictionary<string, object?>
{
{ "Country", "USA" },
{ "State", "CA" }
}
}
};
}
}
PaginatedData<T>
Represents a subset of data from a data store, corresponding to a single page.
Items in the current page
Total number of matching items in the data store (across all pages)
Properties
componentType
string
default:"paginated-data"
The client-side component type identifier
Paginated data has no label by default unless explicitly specified
Configuration Attributes
PaginatedDataAttribute
Name of the input field which controls the pagination parameters
Usage
public class SearchUsers : Form<SearchRequest, SearchResponse>
{
public class SearchRequest
{
public Paginator Paginator { get; set; }
public string Query { get; set; }
}
public class SearchResponse
{
[PaginatedData(nameof(SearchRequest.Paginator))]
public PaginatedData<UserDto> Results { get; set; }
}
protected override SearchResponse Handle(SearchRequest request)
{
var pageIndex = request.Paginator.PageIndex ?? 0;
var pageSize = request.Paginator.PageSize ?? 10;
var query = dbContext.Users
.Where(u => u.Name.Contains(request.Query));
var totalCount = query.Count();
var results = query
.Skip(pageIndex * pageSize)
.Take(pageSize)
.ToList();
return new SearchResponse
{
Results = new PaginatedData<UserDto>
{
Results = results,
TotalCount = totalCount
}
};
}
}
public class UserDto
{
public int Id { get; set; }
public string Name { get; set; }
public string Email { get; set; }
}
PaginatedDataAttribute links the output field to the paginator input field, enabling the client to automatically handle pagination controls.