Rich text editor in interface

Hi,

My client has a requirement to display a rich text editor in interface.how can we implement that on 17.2 version?

  Discussion posts and replies are publicly visible

  • 0
    Certified Senior Developer
    Hi dippomanm607,

    If i am correct, you can directly use a!richTextDisplayField(), or any other thing required?

    Regards,
    Krishna.
  • No that is not the requirement.Client wants a full fledged editor which will allow to add rich context to textbox.
  • Hi dippomanm607,

    We can provide them a alternative method, we can provide them with document (word) template in which they can add the any type of text they want and in displaying we can convert the uploaded word to PDF.

    If you want the rich field editor in Appian, the you should integrate with the some custom plugin which is time consuming and costly method.

    As Appian is a BPM tool, mostly users are only business users then why they have such requirements?

    Thanks
    Aditya
  • Hi -
    A rich text editor is not currently available.
    This may become available in a future release.

    In any case, consider upgrading more frequently to enjoy all the benefits more recent versions.
  • 0
    Certified Lead Developer

    Hi dippomanm607

    As of now, we don't have such component named as 'Rich text editor' instead we do have Rich Text Component.

    Rich Text component can only be used to display the information's in Read-Only and the only action which can be taken is, by using their link attribute in this component, but you cannot edit a that.

    Let's keep our finger cross, hoping to get this feature in upcoming release of Appian.

    However we can achieve this requirement up-to some extent by mixing richText and editable field (such as Text, Integer etc..) together as shown in below code snippet:

    /* For Appian 17.x version including 17.2 */
    load(
      local!dueAmount_decimal,
      local!latePaymentFee_decimal,
      a!formLayout(
        label: "Component Demo",
        contents: {
          a!columnsLayout(
            columns: {
              a!columnLayout(
                contents: {
                  a!richTextDisplayField(
                    value: a!richTextItem(
                      text: a!richTextItem(
                        text: a!richTextItem(
                          text: "Due Amount *",
                          style: "POSITIVE"
                        )
                      ),
                      style: "STRONG"
                    )
                  ),
                  a!floatingPointField(
                    labelPosition: "COLLAPSED",
                    value: local!dueAmount_decimal,
                    saveInto: local!dueAmount_decimal,
                    required: true()
                  )
                }
              ),
              a!columnLayout(
                contents: {
                  a!richTextDisplayField(
                    value: a!richTextItem(
                      text: a!richTextItem(
                        text: "Late Payment Fee *",
                        style: "NEGATIVE"
                      ),
                      style: "STRONG"
                    )
                  ),
                  a!floatingPointField(
                    labelPosition: "COLLAPSED",
                    value: local!latePaymentFee_decimal,
                    saveInto: local!latePaymentFee_decimal,
                    required: true()
                  )
                }
              )
            }
          )
        },
        buttons: a!buttonLayout(
          primaryButtons: a!buttonWidgetSubmit(
            label: "SUBMIT",
            style: "PRIMARY"
          )
        )
      )
    )

    /* For Appian 18.x like 18.2 etc.. */
    load(
      local!dueAmount_decimal,
      local!latePaymentFee_decimal,
      a!formLayout(
        label: "Component Demo",
        contents: {
          a!columnsLayout(
            columns: {
              a!columnLayout(
                contents: {
                  a!richTextDisplayField(
                    value: a!richTextItem(
                      text: "Due Amount *",
                      style: "STRONG",
                      color: "POSITIVE"
                    )
                  ),
                  a!floatingPointField(
                    labelPosition: "COLLAPSED",
                    value: local!dueAmount_decimal,
                    saveInto: local!dueAmount_decimal,
                    required: true()
                  )
                }
              ),
              a!columnLayout(
                contents: {
                  a!richTextDisplayField(
                    value: a!richTextItem(
                      text: "Late Payment Fee *",
                      style: "STRONG",
                      color: "NEGATIVE"
                    )
                  ),
                  a!floatingPointField(
                    labelPosition: "COLLAPSED",
                    value: local!latePaymentFee_decimal,
                    saveInto: local!latePaymentFee_decimal,
                    required: true()
                  )
                }
              )
            }
          )
        },
        buttons: a!buttonLayout(
          primaryButtons: a!buttonWidgetSubmit(
            label: "SUBMIT",
            style: "PRIMARY"
          )
        )
      )
    )

    NOTE: This is not a recommended design approach, and this not the full fledged Rich text Editor where you can make a text bold, italic etc... however you can play around the labels where input will go as a plain text, as per current availability of Appian components.

    Hope this will help you.

  • 0
    Certified Senior Developer
    We had the same requirement and Im very happy that Appian has now released a rich text editor as a plugin compatible starting Appian v19.1
    refer link below:
    community.appian.com/.../rich-text-editor