• State Suggested Answer
  • Replies 7 replies
  • Answers 2 answers
  • Subscribers 11 subscribers
  • Views 5338 views
  • Users 0 members are here
Related Discussions
Home » Discussions » User Interface

Best approach to display 4000 characters in a!GridField

Malleswari Talakola

I have a grid field containing comments, where 1 of the fields could hold upto 4000 characters.

When the length is 4000, then text display is not user friendly.

I tried using a!richtextimage to display the comments on hover over but icon display only upto 1000 length etc and rest shown as(sampletext...) trunc.

I do not want to use a different interface to display the comment alone from Grid.

Any suggestions?

a!gridField(
  data: ri!data,
  label: "Comments",
  labelPosition: "COLLAPSED",
  totalCount: ri!data.totalCount,
  columns: {
    a!gridColumn(
      label: "Comment Type",
      sortField: "commentType",
      value: fv!row.commentTypeId
    ),
    a!gridColumn(
      label: "Commented By",
      sortField: "createdBy",
      value: rule!ACO_replaceNull(
        fv!row.createdBy,
        fv!row.createdBy
      )
    ),
    a!gridColumn(
      label: "Commented On",
      sortField: "createdDt",
      value: rule!ACO_replaceNull(
        fv!row.createdDt,
        fv!row.createdBy
      )
    ),
    a!gridColumn(
      label: "Comment",
      sortField: "comment",
      value: a!richTextDisplayField(
        value: a!richTextItem(
          text: fv!row.commentValue
        )
      )
    ),
    a!gridColumn(
      label: "Comment",
      align: "CENTER",
      value: a!richTextDisplayField(
        value: a!richTextIcon(
          icon: "comments",
          caption: fv!row.commentValue
        )
      )
    ),
    a!gridColumn(
      label: "Comment",
      align: "CENTER",
      value: ""
      
    ),
    a!gridColumn(
      label: "User(s) Tagged",
      sortField: "tags",
      value: a!forEach(
        items: if(
          rule!ACO_isEmpty(
            fv!row.emailTags
          ),
          null,
          trim(
            split(
              fv!row.emailTags,
              ";"
            )
          )
        ),
        expression: concat(
          user(
            fv!item,
            "firstName"
          ),
          " ",
          user(
            fv!item,
            "lastName"
          )
        )
      )
    )
  },
  value: ri!pagingInfo,
  showWhen: ri!showWhen,
  pagingSaveInto: ri!pagingInfo
)

  Discussion posts and replies are publicly visible

Parents
  • 0
    Appian Employee

    There are a variety of techniques, depending on the size of the text and the real-estate of the User interface:

    • you can display a subset of the text e.g. first 20 characters, with an ellipsis e.g. "This is the text to be displayed but there's more to see (...)", and make the ellipsis a dynamic link that will reveal the whole text when you click on it, but still in the same column
    • you could make the dynamic link show the full text in a separate component below the table where it probably will look better but you lose the immediacy/context of it in the row in the table
  • 0
    Certified Lead Developer
     in reply to Stewart Burchell

    Ellipsis is a great option, one the project I'm on uses routinely, but I think you should really check out a Lorem Ipsum generator website, and get 4000 characters of Lorem Ipsum to put in the column to see how it looks.  If the column is too narrow, it's going to be really ugly and require scrolling.  A single row could easily take up more than the whole screen, eliminating the whole effect if it even being a grid, so you need to take that into consideration.

    If there's no other way to have the text readable, you might want to consider some other progressive disclosure options like some other component outside the grid itself.  It all depends on how readable you can get it within the grid.  If you need to throw it away (keeping it immediately in the grid), don't be afraid to throw it away.

  • 0
    Certified Lead Developer
     in reply to Dave Lewis

    One way I've seen it done (which of course depends on context as well as how often the text in question will really be up around 4,000 characters) is to have the link *completely hide* the grid (as well as the rest of the form and its buttons) and *just* show the expanded text, and from there the user's only option is to click "back" to restore the original form/grid/etc.  This option, though slightly harder to design, sidesteps the issue of creating an overstuffed grid column, or the alternative option of forcing the user to scroll down to the end of the grid to view the expanded text.

Reply
  • 0
    Certified Lead Developer
     in reply to Dave Lewis

    One way I've seen it done (which of course depends on context as well as how often the text in question will really be up around 4,000 characters) is to have the link *completely hide* the grid (as well as the rest of the form and its buttons) and *just* show the expanded text, and from there the user's only option is to click "back" to restore the original form/grid/etc.  This option, though slightly harder to design, sidesteps the issue of creating an overstuffed grid column, or the alternative option of forcing the user to scroll down to the end of the grid to view the expanded text.

Children
No Data

© 2024 Appian. All rights reserved.