Rich text editor in interface

Question

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

aloks0189 · Answer

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.