Adding richtextfield (custom component) inside a grid

We have a richtextfield as an input and saving the generated (html) text in the db,

basically we want to show the styled text inside a grid but when we tried it, 
this error was encountered

Interface Definition: Expression evaluation error at function a!gridLayout [line 13]: A grid layout component [label=“”] has an invalid value for “rows”. The row layout at index 1 contains a component that is not supported in the grid layout. Received CertifiedSAILExtension

is there any workaround for this?

Help would be much appreciated
Thanks!

  Discussion posts and replies are publicly visible

Parents
  • 0
    Certified Lead Developer

    Please post sample code for what you're trying to show in your grid row, because I don't understand what might be causing that particular error message and I don't believe anyone here will be able to guess.

    Edit: i'm guessing Carlos's subsequent reply below is probably close - in that you're attempting to show a custom component as one of the items in your editable grid row.  However, the editable grid row only accepts standard Appian components (and only a specific subset of them).  If you want to display your stored HTML as RichText (at least, inside an editable grid), you'll either need to build a parser to display your HTML as formatted rich text inside the OOB a!richTextDisplayField component, or perhaps, come up with an additional plugin to add the ability for your custom rich text field to be added to an editable grid (though this seems like it would be far more difficult, to me).

Reply
  • 0
    Certified Lead Developer

    Please post sample code for what you're trying to show in your grid row, because I don't understand what might be causing that particular error message and I don't believe anyone here will be able to guess.

    Edit: i'm guessing Carlos's subsequent reply below is probably close - in that you're attempting to show a custom component as one of the items in your editable grid row.  However, the editable grid row only accepts standard Appian components (and only a specific subset of them).  If you want to display your stored HTML as RichText (at least, inside an editable grid), you'll either need to build a parser to display your HTML as formatted rich text inside the OOB a!richTextDisplayField component, or perhaps, come up with an additional plugin to add the ability for your custom rich text field to be added to an editable grid (though this seems like it would be far more difficult, to me).

Children
  • Thanks for the reply, yes i am trying to display a custom component. We'll try to build a parser for it. Thank you. 

  • 0
    Certified Lead Developer
    in reply to aristotlem0001

    What level of complexity is stored in your HTML?  I've recently successfully built a parser that displays limited HTML as an Appian RichTextDisplayField component, in such a way that it could just be added to editable or (new) paging grids without much additional work.  It might not support as much formatting as you're using, but I'd be willing to share what I have.

  • The complexity is based on the user, but mostly basic formatted design like this one,
    could you share your code so that we can incorporate it and check if it is applicable to our use case.  Thanks!

  • 0
    Certified Lead Developer
    in reply to aristotlem0001

    This 3-rule suite can be used to do a good portion of your formatting - it doesn't (yet) handle lists, sizes, colors, or headers, but can do bold, italic, underline, and hyperlinks, even nested together.  It can probably be extended to handle the stuff you need to do, just by adding more to the processing rule in the same vein as what I've already done for the other formats (though lists might be a particular challenge).  Note also that this requires the Regex utilities plug-in.

    /* rule!GLBL_CMPT_RichTextHTMLPreview */
    a!localVariables(
      local!formatBreakdown: rule!GLBL_UTIL_GetParsedRichTextBreakdown(htmlText: ri!htmlText),
      
      a!richTextDisplayField(
        label: ri!label,
        labelPosition: rule!GLBL_replaceNull(ri!labelPosition, "COLLAPSED"),
        instructions: ri!instructions,
        showWhen: ri!showWhen,
        value: {
          a!forEach(
            local!formatBreakdown,
            a!richTextItem(
              text:  rule!GLBL_UTIL_FormatHTMLLinebreaksForTextDisplay(
                htmlText: fv!item.row
              ),
              style: {
                fv!item.formats
              },
              link: a!safeLink(
                uri: fv!item.link,
                showWhen: not(rule!GLBL_isBlank(fv!item.link))
              )
            )
          )
        }
      )
    )
    
    /* rule!GLBL_UTIL_GetParsedRichTextBreakdown */
    a!localVariables(
      local!formatChangeMarker: "[[[formatChange]]]",
    
      local!test: regexreplaceall(
        pattern: "(<[biu]>|<a href="".+?""|</[biua]>)",
        searchstring: ri!htmltext,
        replacementString: local!formatChangeMarker & "$1"
      ),
      local!array: split(local!test, local!formatChangeMarker),
    
      local!formatMarks: a!forEach(
        local!array,
    
        tostring(
          if(
            left(fv!item, 8) = "<a href=",
            "a{{" & extract(fv!item, "<a href=""", """>") & "}}",
            extract(
              left(fv!item, 4),
              "<",
              ">"
            )
          )
        )
      ),
    
      a!forEach(
        local!formatMarks,
        with(
          local!list: joinarray(index(local!formatMarks, enumerate(fv!index)+1), ";"),
          local!list1: regexreplaceall( "b(.+?)/b", local!list, "$1"),
          local!list2: regexreplaceall( "i(.+?)/i", local!list1, "$1"),
          local!list3: regexreplaceall( "u(.+?)/u", local!list2, "$1"),
          local!list4: regexreplaceall( "a\{\{.+?\}\}(.+?)/a", local!list3, "$1"),
          {
            row: regexreplaceall("<[bui]>|<a href="".+?"">|</[buia]>", local!array[fv!index], ""),
            formats: touniformstring(
              a!forEach(
                rule!GLBL_UTIL_removeBlankValuesFromArray( trim(split(local!list4, ";")) ),
                if(
                  fv!item = "i",
                  "EMPHASIS",
                  fv!item = "b",
                  "STRONG",
                  fv!item = "u",
                  "UNDERLINE",
                  left(fv!item,1) = "a",
                  {},
                  ""
                )
              )
            ),
            link: tostring(
              rule!GLBL_UTIL_removeBlankValuesFromArray(
                touniformstring(
                  a!forEach(
                    trim(split(local!list4, ";")),
                    extract(fv!item, "a{{", "}}")
                  )
                )
              )
            )
          }
        )
      )
    )
    
    
    /* rule!GLBL_UTIL_FormatHTMLLinebreaksForTextDisplay */
    a!localVariables(
      local!lineBrokenText: regexreplaceall(
        "<br */*>",
        substitute(
          substitute(ri!htmlText, char(13), ""),
          char(10), 
          ""
        ),
        char(10)
      ),
      
      local!lineBrokenText
    )