Filter the records

Hi,
I have a read-only grid and corresponding filters on that record-type.
On the site, when I select a filter, then the records are filtered based on that on the same page.

  Discussion posts and replies are publicly visible

Parents
  • Hello

    You can achieve this as a tab format in a single page instead of going for multiple pages in site.

    If you are willing to do this, create a wrapper interface with required no of card layouts which are clickable links. Create a child interfaces for each page. Call these child interfaces on click of the specific tab which you are pointing to.

    This would work,

  • Thanks for the reply

    Can we achieve to filter on all the pages at a time? 

  • Yes we can achieve to filter on all the tabs as we pass the filter from the wrapper interface to the child interfaces...

  • " create a wrapper interface with required no of card layouts which are clickable links. Create a child interfaces for each page. "

      Can you please provide the example of this implementation,  ?

  • Hello 

    Please have a look at the example: 

    a!localVariables(
    local!tab: 1,
    local!action: null,
    local!link: true(),
    local!exampleId,
    local!exampleName,
    {
    a!billboardLayout(
    backgroundMedia: a!documentImage(document: cons!DOCVIEWER[2]),
    backgroundColor: "#f0f0f0",
    showWhen: or(local!link, local!action = "cancel"),
    overlay: a!barOverlay(
    contents: {
    a!columnsLayout(
    columns: {
    a!columnLayout(
    contents: {
    a!richTextDisplayField(
    value: {
    a!richTextItem(
    text: "Hello " & loggedInUser() ,
    size: "MEDIUM_PLUS"
    )
    }
    )
    }
    ),
    a!columnLayout(
    contents: {
    a!richTextDisplayField(
    value: {
    a!richTextIcon(icon: "database", size: "MEDIUM_PLUS"),
    char(9),
    a!richTextItem(
    text: "Example",
    size: "MEDIUM_PLUS"
    )
    },
    align: "RIGHT"
    )
    }
    )
    }
    )
    }
    )
    ),
    a!columnsLayout(
    columns: {
    a!columnLayout(
    contents: {
    a!cardLayout(
    contents: {
    a!richTextDisplayField(
    label: " ",
    value: {
    a!richTextIcon(
    icon: "file-text",
    color: "ACCENT",
    size: "MEDIUM_PLUS"
    ),
    char(10),
    a!richTextItem(text: "Page 1", size: "MEDIUM_PLUS")
    },
    align: "CENTER"
    )
    },
    link: a!dynamicLink(
    value: 1,
    saveInto: local!tab
    ),
    style: if(
    local!tab = 1,
    "ACCENT",
    "STANDARD"
    )
    )
    }
    ),
    a!columnLayout(
    contents: {
    a!cardLayout(
    contents: {
    a!richTextDisplayField(
    label: " ",
    value: {
    a!richTextIcon(
    icon: "files-o",
    color: "ACCENT",
    size: "MEDIUM_PLUS"
    ),
    char(10),
    a!richTextItem(text: "Page 2", size: "MEDIUM_PLUS")
    },
    align: "CENTER"
    )
    },
    link: a!dynamicLink(
    value: 2,
    saveInto: local!tab
    ),
    style: if(
    local!tab = 2,
    "ACCENT",
    "STANDARD"
    )
    )
    }
    ),
    a!columnLayout(
    contents: {
    a!cardLayout(
    contents: {
    a!richTextDisplayField(
    label: " ",
    value: {
    a!richTextIcon(
    icon: "handshake-o",
    color: "ACCENT",
    size: "MEDIUM_PLUS"
    ),
    char(10),
    a!richTextItem(text: "Page 3", size: "MEDIUM_PLUS")
    },
    align: "CENTER"
    )
    },
    link: a!dynamicLink(
    value: 3,
    saveInto: local!tab
    ),
    style: if(
    local!tab = 3,
    "ACCENT",
    "STANDARD"
    )
    )
    }
    ),
    a!columnLayout(
    contents: {
    a!cardLayout(
    contents: {
    a!richTextDisplayField(
    label: " ",
    value: {
    a!richTextIcon(
    icon: "gears",
    color: "ACCENT",
    size: "MEDIUM_PLUS"
    ),
    char(10),
    a!richTextItem(text: "Page 4", size: "MEDIUM_PLUS")
    },
    align: "CENTER"
    )
    },
    link: a!dynamicLink(
    value: 4,
    saveInto: local!tab
    ),
    style: if(
    local!tab = 4,
    "ACCENT",
    "STANDARD"
    )
    )
    }
    ),
    a!columnLayout(
    contents: {
    a!cardLayout(
    contents: {
    a!richTextDisplayField(
    label: " ",
    value: {
    a!richTextIcon(
    icon: "newspaper-o",
    color: "ACCENT",
    size: "MEDIUM_PLUS"
    ),
    char(10),
    a!richTextItem(text: "Page 5", size: "MEDIUM_PLUS")
    },
    align: "CENTER"
    )
    },
    link: a!dynamicLink(
    value: 5,
    saveInto: local!tab
    ),
    style: if(
    local!tab = 5,
    "ACCENT",
    "STANDARD"
    )
    )
    }
    )
    },
    showWhen: or(local!link, local!action = "cancel")
    ),
    a!columnsLayout(
    columns: {
    a!columnLayout(
    contents: {
    a!textField(
    label: "Example ID",
    labelPosition: "ABOVE",
    placeholder: "Search by Example Id",
    value: local!exampleId,
    saveInto: local!exampleId
    ),
    a!linkField(
    label: " ",
    links: a!dynamicLink(
    label: "clear Filters",
    saveInto: {
    a!save(local!exampleId, null),
    a!save(local!exampleName, null)
    }
    )
    )
    }
    ),
    a!columnLayout(
    contents: {
    a!dropdownField(
    label: "Example Name",
    labelPosition: "ABOVE",
    placeholder: "Search by Example Name",
    value: local!exampleName,
    saveInto: local!exampleName
    )
    }
    )
    }
    ),
    choose(
    local!tab,
    {
    a!cardLayout(
    contents: rule!Child_Filter(
    exampleId: local!exampleId,
    exampleName: null,
    materiality: null,
    currentAssignee: null,
    statusSince: null
    ),
    showWhen: or(local!link, local!action = "cancel")
    )
    },
    {
    a!cardLayout(
    contents: rule!Child_Filter_2(
    exampleId: local!exampleId,
    exampleName: null,
    materiality: null,
    currentAssignee: null,
    statusSince: null
    ),
    showWhen: or(local!link, local!action = "cancel")
    )
    },
    {},
    {},
    {}
    )
    }
    )

  • Thank you .

    This is really helpful.

    I have a small doubt, We have a child interface in the card layout right. When I select name from the dropdown in the main interface, how can filter the child interface(having rule inputs) with the readonly grid. 

Reply Children