Here is an example of using the advanced-filter in a plain html page:
<html>
<head>
<link href="https://developer.temenos.com/uux/base.css" rel="stylesheet" />
<script src="https://developer.temenos.com/uux/unified-ux-web.min.js"></script>
<style>
:root {
--uwc-gutter-padding: 0 0 10px 0;
}
uwc-advanced-filter {
--mdc-dialog-min-width: 700px;
--uwc-advanced-filter-column-gap: 30px;
--mdc-dialog-content-ink-color: #3b3b3b;
--uwc-dialog-footer-padding: 14px 20px 14px;
}
</style>
</head>
<body>
<uwc-advanced-filter id="advanced-filter" headingText="Advanced Filters"></uwc-advanced-filter>
<script>
window.onload = function () {
const advancedFilterSpec = [
{
type: "string",
fieldName: "legalDocId",
label: {
lookupKey: "advancedFilter.fieldLegalDocumentId",
defaultValue: "Legal Document ID",
},
operators: ["eq", "neq"],
defaultOperator: "eq",
},
{
type: "date",
fieldName: "dateOfBirth",
label: "Date of Birth",
},
{
type: "number",
fieldName: "amount",
label: "Transaction Amount",
},
{
type: "select",
fieldName: "gender",
label: "Gender",
options: [
{ label: "Male", value: "M" },
{ label: "Female", value: "FM" },
],
},
{
type: "string",
fieldName: "entity",
label: "Entity",
},
{
type: "string",
fieldName: "direction",
label: "Direction",
},
{
type: "select",
fieldName: "scheme",
label: "Scheme",
options: [
{ label: "Monthly", value: "M" },
{ label: "Yearly", value: "Y" },
],
},
{
type: "date",
fieldName: "processingDate",
label: "Processing Date",
},
{
type: "number",
fieldName: "fees",
label: "Fee Amount",
},
{
type: "select",
fieldName: "currency",
label: "Currency",
options: [
{ label: "USD", value: "USD" },
{ label: "GBP", value: "GBP" },
],
},
{
type: "date",
fieldName: "valueDateFrom",
label: "Value Date From",
},
{
type: "date",
fieldName: "valueDateTo",
label: "Value Date To",
},
{
type: "string",
fieldName: "outputChannel",
label: "Output Channel",
},
{
type: "string",
fieldName: "sender",
label: "Sender",
},
{
type: "string",
fieldName: "receiver",
label: "Receiver",
},
{
type: "string",
fieldName: "reference",
label: "Reference",
},
];
document.getElementById("advanced-filter").advancedFilterSpec = advancedFilterSpec;
};
</script>
</body>
</html>