• State Suggested Answer
  • Replies 6 replies
  • Answers 1 answer
  • Subscribers 8 subscribers
  • Views 7760 views
  • Users 0 members are here
Related Discussions
Home » Discussions » General

How to hide columns in an editable grid?

Jose H.

Is this possible? I have an editable grid in which I'm adding rows dynamically. I want to be able to hid one of the columns given a condition. I know I can do it with a paging grid. But the setup for an editable grid is different.

I tried adding "showWhen: false()" to the different parts of it, header, column config and the column data itself but it doesn't actually work. 

My guest is that the issue has to do with the dynamic rows. When I tried to add a new row I get the error message "Could not display interface. Please check definition and inputs. Interface Definition: Expression evaluation error at function a!gridLayout: A grid layout component [label=“”] has an invalid value for “rows”. Every row layout must have the same number of components and it must match the number of header cells. The row at index 1 has 4 component(s). Expected: 3 component(s)."

 

Has anyone done something like this before?

  Discussion posts and replies are publicly visible

  • 0
    Certified Lead Developer
    Hi Jose,

    You can hide columns by adding a condition to the showWhen parameter of the a!gridLayoutHeaderCell() for that column, or just wrap that whole a!gridLayoutHeaderCell() in an if condition. You also need to implement the same logic on the component you are hiding within the gridRowlayout(). From the error message you posted it looks like you tried to hide a component in the gridRowLayout() but not the gridLayoutHeaderCell(). Hope that helps.
  • 0
    Certified Senior Developer
    Placing the gridLayoutHeaderCell() and the corresponding element (the text field or whatever it is) of the gridRowLayout() within if() statements that evaluate using the same logic, such as using the same boolean variable, should be what you need.
  • 0
    Certified Lead Developer
    You can do it, but while hiding column you have to put headerCells and columnConfigs for that perticular column inside if condition then only it will work.
  • 0
    A Score Level 2
    Hi

    Can you provide your code here?

    Also Check this:


    load(
    local!employee:{{id:1,name:"abc",age:30},{id:2,name:"pqr", age:60},{id:3,name:"xyz",age:25}},
    local!hideColumn,
    with(



    {
    a!radioButtonField(
    label:"Hide Age?",
    choiceLabels: {"Yes","No"},
    choiceValues: {true(),false()},
    value:local!hideColumn,
    saveInto: local!hideColumn
    ),
    a!gridLayout(
    label:"Employee",
    headerCells: {
    a!gridLayoutHeaderCell(
    label:"Id"
    ),
    a!gridLayoutHeaderCell(
    label:"Name"
    ),
    a!gridLayoutHeaderCell(
    label:"Age",
    showWhen:not(local!hideColumn)
    )
    },
    rows:a!forEach(local!employee,
    a!gridRowLayout(
    contents:{
    a!textField(
    value:fv!item.id,
    saveInto:fv!item.id
    ),
    a!textField(
    value:fv!item.name,
    saveInto:fv!item.name
    ),
    a!textField(
    value:fv!item.age,
    saveInto:fv!item.age,
    showWhen: not(local!hideColumn)
    )
    }
    )
    ),
    addRowlink: a!dynamicLink(
    label: "Add Employee",

    value: {
    startDate: today() + 1
    },
    saveInto: {
    a!save(local!employee, append(local!employee, save!value))
    }
    )

    )

    }
    )

    )
  • 0 in reply to ankitab0001
    Can you try with the modified code:

    ankitab0001: i made changes to your code only.

    load(
    local!employee:{{id:1,name:"abc",age:30},{id:2,name:"pqr", age:60},{id:3,name:"xyz",age:25}},
    local!hideColumn: "false",
    with(
    {
    a!radioButtonField(
    label:"Hide Age?",
    choiceLabels: {"Yes","No"},
    choiceValues: {true(),false()},
    value:local!hideColumn,
    saveInto: local!hideColumn
    ),
    a!gridLayout(
    label:"Employee",
    headerCells: {
    a!gridLayoutHeaderCell(
    label:"Id"
    ),
    a!gridLayoutHeaderCell(
    label:"Name"
    ),
    a!gridLayoutHeaderCell(
    label:"Age",
    showWhen:local!hideColumn
    )
    },
    rows:a!forEach(local!employee,
    a!gridRowLayout(
    contents:{
    a!textField(
    value:fv!item.id,
    saveInto:fv!item.id
    ),
    a!textField(
    value:fv!item.name,
    saveInto:fv!item.name
    ),
    a!textField(
    value:fv!item.age,
    saveInto:fv!item.age,
    showWhen: local!hideColumn
    )
    }
    )
    ),
    addRowlink: a!dynamicLink(
    label: "Add Employee",

    value: {
    startDate: today() + 1
    },
    saveInto: {
    a!save(local!employee, append(local!employee, save!value))
    }
    )

    )

    }
    )

    )
  • 0
    A Score Level 2
    Hi Jose H,

    Try below code, may be it's helpful for you.....

    load(
    local!employees: {
    {
    firstName: "abcd",
    lastName: "efgh"
    },
    {
    firstName: "xxxx",
    lastName: "yyyy"
    },

    },
    {
    a!radioButtonField(
    label: "Hide LastName?",
    choiceLabels: {
    "Yes",
    "No"
    },
    choiceValues: {
    "Yes",
    "No"
    },
    value: ri!hideRuleInput,
    saveInto: ri!hideRuleInput
    ),
    a!gridLayout(
    totalCount: count(
    local!employees
    ),
    headerCells: {
    a!gridLayoutHeaderCell(
    label: "First Name"
    ),
    a!gridLayoutHeaderCell(
    label: "Last Name",
    showWhen: if(
    ri!hideRuleInput= "Yes",
    false(),
    true()
    )
    )
    },
    columnConfigs: {
    a!gridLayoutColumnConfig(
    width: "DISTRIBUTE",
    weight: 3
    ),
    a!gridLayoutColumnConfig(
    width: "DISTRIBUTE",
    weight: 3,
    showWhen: if(
    ri!hideRuleInput= "Yes",
    false(),
    true()
    )
    )
    },
    rows: a!forEach(
    items: local!employees,
    expression: a!gridRowLayout(
    contents: {
    a!textField(
    label: "first name " & fv!index,
    value: fv!item.firstName,
    saveInto: fv!item.firstName,
    required: true
    ),
    a!textField(
    label: "last name " & fv!index,
    value: fv!item.lastName,
    saveInto: fv!item.lastName,
    required: true,
    showWhen: if(
    ri!hideRuleInput= "Yes",
    false(),
    true()
    )
    )
    },
    id: fv!index
    )
    ),
    addRowlink: a!dynamicLink(
    label: "Add Employee",
    value: {
    ""
    },
    saveInto: {
    a!save(
    local!employees,
    append(
    local!employees,
    save!value
    )
    )
    }
    )
    )
    }
    )
© 2024 Appian. All rights reserved.
We want to hear from you! Submit a review on Gartner or G2.