Adding richtextfield (custom component) inside a grid

RE: Adding richtextfield (custom component) inside a grid

Mike Schmitt — Tue, 15 Oct 2019 14:01:43 GMT

Glad you figured it out - what did the solution end up being?

RE: Adding richtextfield (custom component) inside a grid

satishk0001 — Tue, 15 Oct 2019 14:00:44 GMT

Tq for ur response Mike

But I got the answer...

RE: Adding richtextfield (custom component) inside a grid

Mike Schmitt — Tue, 15 Oct 2019 13:56:06 GMT

Could you do me a favor and edit this reply to use the Code feature (Insert -> Insert Code) and re-paste your code there so that it retains formatting/indentation? It's very hard to read code that's been pasted with no indentation as above, though i'm trying.

RE: Adding richtextfield (custom component) inside a grid

satishk0001 — Tue, 15 Oct 2019 12:28:08 GMT

Hi Mike Schmit,

I got an error similar to the above error and error message is

Could not display interface. Please check definition and inputs. Interface Definition: Expression evaluation error in rule 'bgh_uigridlayoutpaging' at function a!gridLayout [line 48]: 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 IconWidget

with(
/*use the batch size unless you're on a not full last page*/
numItemsOnThisPage: rule!BGH_getNumItemsOnPage(
pagingInfo: ri!pagingInfo,
totalCount: ri!totalCount
),
{
if(
/*invalid total count*/
or(
(
ri!pagingInfo.startIndex - 1 + local!numItemsOnThisPage
) > ri!totalCount,
and(
not(
ri!totalCount = 0
),
ri!totalCount < ri!pagingInfo.startIndex
)
),
a!textField(
readOnly: true,
value: "A grid component [label=“" & ri!label & "”] has an invalid value for “totalCount”. “totalCount” must not be null, less than “startIndex” or less than “startIndex” - 1 + the number of items on the page, but “totalCount” was " & if(
isnull(
ri!totalCount
),
"null",
ri!totalCount
) & ", “startIndex” was " & ri!pagingInfo.startIndex & ", and there are " & local!numItemsOnThisPage & " items on the page."
),
/*invalid batch size*/
or(
ri!pagingInfo.batchSize <- 1,
ri!pagingInfo.batchSize = 0
),
a!textField(
readOnly: true,
value: "A grid component [label=“" & ri!label & "”] has an invalid value for “pagingInfo”. “batchSize” must not be null, 0, or less than -1, but was " & if(
isnull(
ri!pagingInfo.batchSize
),
"null",
ri!pagingInfo.batchSize
) & "."
),
/*no errors*/
{
a!gridLayout(
label: ri!label,
instructions: ri!instructions,
headerCells: ri!headerCells,
columnConfigs: ri!columnConfigs,
/*apply the given row rule, pass in the current indices of the page*/
rows: if(
ri!totalCount = 0,
{},
a!applyComponents(
function: ri!rowPartialRule_rule,
array: ri!pagingInfo.startIndex + enumerate(
local!numItemsOnThisPage
)
)
),
validations: ri!validations,
validationGroup: ri!validationGroup,
selectable: ri!selectable,
selectionDisabled: ri!selectionDisabled,
selectionRequired: ri!selectionRequired,
selectionValue: ri!selectionValue,
selectionSaveInto: ri!selectionSaveInto,
addRowLink: ri!addRowLink,
totalCount: "",
emptyGridMessage: ri!emptyGridMessage,
helpTooltip: ri!helpTooltip
),
if(
ri!totalCount > 0,
a!richTextDisplayField(
labelPosition: "COLLAPSED",
align: "CENTER",
value: if(
isnull(
ri!pagingInfo
),
"",
a!richTextItem_18r1(
text: {
a!richTextItem_18r1(
text: "<< First",
link: if(
ri!pagingInfo.startIndex = 1,
null,
a!dynamicLink(
saveInto: a!save(
ri!pagingInfo.startIndex,
1
)
)
)
),
a!richTextItem_18r1(
text: " < Previous",
link: if(
ri!pagingInfo.startIndex = 1,
null,
a!dynamicLink(
saveInto: a!save(
ri!pagingInfo.startIndex,
ri!pagingInfo.startIndex - ri!pagingInfo.batchSize
)
)
)
),
a!richTextItem_18r1(
text: " " & ri!pagingInfo.startIndex & "-" & ri!pagingInfo.startIndex + local!numItemsOnThisPage - 1 & " of " & ri!totalCount & " "
),
a!richTextItem_18r1(
text: "Next >",
link: if(
or(
ri!pagingInfo.batchSize =- 1,
(
ri!pagingInfo.startIndex + ri!pagingInfo.batchSize
) > ri!totalCount
),
null,
a!dynamicLink(
saveInto: a!save(
ri!pagingInfo.startIndex,
ri!pagingInfo.startIndex + ri!pagingInfo.batchSize
)
)
)
),
a!richTextItem_18r1(
text: " Last >>",
link: if(
or(
ri!pagingInfo.batchSize =- 1,
(
ri!pagingInfo.startIndex + ri!pagingInfo.batchSize
) > ri!totalCount
),
null,
a!dynamicLink(
saveInto: a!save(
ri!pagingInfo.startIndex,
1 + rounddown(
/*subtract one for the case where the last page is full*/
(
ri!totalCount - 1
) / ri!pagingInfo.batchSize,
0
) * ri!pagingInfo.batchSize
)
)
)
)
}
)
)
),
{}
)
}
)
}
)

RE: Adding richtextfield (custom component) inside a grid

Mike Schmitt — Wed, 31 Jul 2019 15:30:43 GMT

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
)

RE: Adding richtextfield (custom component) inside a grid

aristotlem0001 — Wed, 31 Jul 2019 10:22:09 GMT

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!

RE: Adding richtextfield (custom component) inside a grid

Mike Schmitt — Mon, 29 Jul 2019 13:57:44 GMT

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.

RE: Adding richtextfield (custom component) inside a grid

davel001150 — Mon, 29 Jul 2019 13:26:39 GMT

I don't think a!gridLayout has any support for custom components or is likely to ever have such support. You might want to investigate 19.2 release notes to see if that out of the box richText on gridLayout meets your requirements.

If it doesn't, you'll likely have to construct a custom grid component to support your custom rich text, which seems like it would be a monstrous amount of effort, especially for the given reward.

RE: Adding richtextfield (custom component) inside a grid

aristotlem0001 — Mon, 29 Jul 2019 05:45:50 GMT

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

RE: Adding richtextfield (custom component) inside a grid

aristotlem0001 — Mon, 29 Jul 2019 05:41:47 GMT

Thanks for the reply, yep, it is a custom component

RE: Adding richtextfield (custom component) inside a grid

Carlos Santander — Fri, 26 Jul 2019 14:09:53 GMT

It seems like you built your own rich text component (thus the "Received CertifiedSAILExtension" text) instead of using the one that's available out of the box. I guess that's not supported.

RE: Adding richtextfield (custom component) inside a grid

Mike Schmitt — Fri, 26 Jul 2019 14:09:45 GMT

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).

RE: Adding richtextfield (custom component) inside a grid

Mike Schmitt — Fri, 26 Jul 2019 14:08:23 GMT

You're thinking of gridField (paging grid), which only just introduced rich text support in 19.2. However, gridLayout (editable grid) has supported rich text for quite a while now.

RE: Adding richtextfield (custom component) inside a grid

davel001150 — Fri, 26 Jul 2019 13:04:18 GMT

What version are you running? I believe richText is only supported on the most recent gridLayout, introduced in 19.2.