Hi, I'm trying applyComponents function on rich text items (such as a!richTe

Hi, I'm trying applyComponents function on rich text items (such as a!richTextItem, a!richTextNumberedList, etc) by applying it on the 'value' of a!richTextField but it doesn't return anything at all. Does applyComponents doesn't work on rich text items?

Below is the snippet of my codes.

OriginalPostID-218581

OriginalPostID-218581

  Discussion posts and replies are publicly visible

  • We have faced this issue in the past. When the applyComponents return a list of variant instead of a single component we have a problem. In our case we were trying to return an array of check box and fileUpload field combination and render it in a sectionLayout. Due to this limitation we moved the sectionLayout inside the applyComponents and started returning list of sectionLayout (which inturn contains the two components). This way applyComponents will return only one component in a single loop.

    In your case you can try the same like given below,

    a!applyComponents(
    function: rule!loopingRichTextItems(
    _,
    {
    1,
    2,
    3
    }
    ),
    array: {
    1,
    2,
    3,
    4
    }
    )

    rule!loopingRichTextItems

    a!richTextDisplayField(
    value: {
    a!richTextItem(
    text: "Header " & ri!header
    ),
    a!richTextNumberedList(
    items: ri!detail
    )
    }
    )


  • If you change the expression rule "loopingRichTextItem" in to an interface may be you will get more clarity from the error it throws which is as follows:

    "Interface Definition: Expression evaluation error: An array of components may only contain components. Received FormattedText at index 1."

    So, to my understanding appian not not treating a!richTextItem as an independent component. It also states the same in the forum help i.e. "Displays styled text within a rich text(i.e a!richTextDisplayField) component."
    So you have to use a!richTextItem within a!richTextDisplayField if you want to use them in loops as a component.

    So the solution to this scenario is use a!richTextDisplayField inside the "loopingRichTextItem" rule and iterate it from the main interface. Please refer the below code snippet.

    loopingRichTextItem():
    a!richTextDisplayField(
    label: "Test",
    value:
    {
    a!richTextItem(
    text: "Test " & ri!header,
    style: "NORMAL"
    ),
    a!richTextNumberedList(
    items:{
    ri!detail
    }
    )
    }
    )

    Let me know if the information is helpful.



  • To the best of my knowledge, @kumaraveln is spot on here and that's how we understood the issue earlier in our project some time ago. I believe the previous comment holds valid only only when the iteration is done in association with a!applyComponents() as mentioned by @kumaraveln earlier.

    From my perspective, it makes more sense if the name of the rule is changed from loopingRichTextItems to a name such as loopingRichTextDisplayField.
  • @sikhivahans: Yes, name of the rule should be like you mentioned.

    @sidhantb : Your point "appian not not treating a!richTextItem as an independent component" can may not be true. In the same example what erick258 has given, if you return only one a!richTextItem instead of 2 different components (or even 2 same component) it will work. Here the problem is the final output of applyComponents should be array of components and not array of array of components.

    I hope it clarifies.
  • @kumaraveln That's true as per my knowledge. There wouldn't be a issue at all, if one component is returned by loopingRichTextItems. Problem is, a!richTextDisplayField() isn't able to understand the format of resultant value when the 'value' attribute is driven by a rule (in association with a!applycomponents()) that returns more than one component in a single iteration, and to be specific, the a!richTextDisplayField() expects FormattedText whereas the a!applycomponents() is returning List of Variant in case of array of arrays.
  • @kumaraveln - I did some test cases and found your point to be true.
    When we return only a single a!richTextItem it is rendered by the applycomponents correctly.
    But if you see the interface we are returning the a!richTextItem if throws a error stating.

    "Interface Definition: Not a valid component. Received: [values=Test ]"

    Please refer the attached screenshot.

    As per my knowledge, a!richTextItem might not be a valid component and should be used in association with the a!richTextDisplayField.
    So, when we use only a!richTextItem it throws the above mentioned error and when we use it with association of a!richTextDisplayField( here using applycomponents) it renders correctly.
    So my point here is the a!richTextItem is a valid/complete component only if it is used in association of a a!richTextDisplayField component.

    Correct me if I am wrong.