How to add extra spaces in a text field for better display?

I want more than one space to be inserted between two words in a text field. 

I have used below code, but it is not working.

a!textField(
label: "Approved: 5"& "                 Closed: 7",
readOnly: true()
)

I want to display the content in this way. Is there any way to do it.  

  Discussion posts and replies are publicly visible

  • AFAIK we cannot add spaces for text field label , We can able to add only for value attribute.
    Please find above thread .

     suggestion we can also go with sideBySideLayout:

     

    a!sectionLayout(
    label:"Previous Results",
    contents:{
    a!sideBySideLayout(
    items:{
    a!sideBySideItem(
    item: a!textField(label:"Approved:",labelPosition:"ADJACENT",value:5,readOnly: true()),
    width:"MINIMIZE"
    ),
    a!sideBySideItem(
    item: a!textField(label:"Closed:",labelPosition:"ADJACENT",value:7,readOnly: true()),
    width:"MINIMIZE"
    ),
    a!sideBySideItem(
    item: a!textField(label:"Viloations:",labelPosition:"ADJACENT",value:10,readOnly: true()),
    width:"MINIMIZE"
    )
    }
    )
    }
    )

  • Hi diptis,
    In text field label we can't add spaces between texts, but we have add spaces in text field value. Below code might be needful for you.

    a!textField(
    label: "Priovious Result",
    value: "Approved: 5" & " Closed: 7"& " violations:10",
    readOnly: true()
    )
  • We can able to add spaces only for value attribute. not for label attribute of a!textField.
    agree with side by side layout is good option to achieve this functionality.
  • 0
    Certified Lead Developer
    Hi as per my understanding, you want to display some extra spaces between label and value of a text field, where value is being shown in readOnly format.

    If so, then you can try contacting some whitespaces (fixed length of whitespace to maintain accuracy) using local!

    Example:

    a!textField(
    label: "Your label",
    value: concat(
    local! whitespace,
    ri!myValue
    )
    )

    Also, just a quick suggestion, this requirement doesn't follow the best practices criteria because Appian maintains some whitespaces between the label and value of a field OOTB hence maintaining custom whitespaces are not required. However depending on our requirement we can customise the SAIL code.


    Hope this may help.
  • Hi diptis,

    You can do it by using char(9) function. Here 9 is for space. You can print as your requirement.

    For example:

     a!richTextDisplayField(

         label: "",

         value: {

           a!richTextItem(

             text: "Approved: 5" & char(

               9

             ) & char(

               9

             ) & char(

               9

             ) & " Closed: 7",

             style: "STRONG",

             color: "ACCENT"

           )

         }

       )

    Or else you can do it by using Side By Side Layout (18.1 version onward)

    For Example: Refer this code...

     

    a!formLayout(
    label: "",
    contents: {
    a!richTextDisplayField(
    value: a!richTextItem(
    text: "Previous Results",
    style: "STRONG",
    color: "ACCENT"
    )
    ),
    a!sideBySideLayout(
    items: {
    a!sideBySideItem(
    item: a!richTextDisplayField(
    value: a!richTextItem(
    text: "Approved:",
    style: "STRONG",
    color: "ACCENT"
    )
    ),
    width: "MINIMIZE"
    ),
    a!sideBySideItem(
    item: item: a!richTextDisplayField(
    value: a!richTextItem(
    text: "5",
    style: "STRONG",
    color: "ACCENT"
    )
    ),
    width: "1X"
    ),
    a!sideBySideItem(
    item: item: a!richTextDisplayField(
    value: a!richTextItem(
    text: "Closed:",
    style: "STRONG",
    color: "ACCENT"
    )
    ),
    width: "MINIMIZE"
    ),
    a!sideBySideItem(
    item: item: a!richTextDisplayField(
    value: a!richTextItem(
    text: "7",
    style: "STRONG",
    color: "ACCENT"
    )
    ),
    width: "1X"
    ),
    a!sideBySideItem(
    item: item: a!richTextDisplayField(
    value: a!richTextItem(
    text: "Violations:",
    style: "STRONG",
    color: "ACCENT"
    )
    ),
    width: "MINIMIZE"
    ),
    a!sideBySideItem(
    item: item: a!richTextDisplayField(
    value: a!richTextItem(
    text: "10",
    style: "STRONG",
    color: "ACCENT"
    )
    ),
    width: "1X"
    )
    }
    )
    }
    )

     You can use different colors also....

    Hope it is helpful

     

    Regards

    Aswini

  • Hi Dipti,

    You can use rich text display field in place of text field as it is in read only view

    a!richTextDisplayField(
    value:a!richTextItem(
    text:"Approved: 5"& " Closed: 7"
    )

    )
  • 0
    Certified Lead Developer

    You can add extra spaces in labels by using NO-BREAK SPACE character (U+00A0) generated by the key combination Alt+0160 on Windows. It is different from normal space and has a different UNICODE. You can also copy it from here: " ".

  • 0
    Certified Lead Developer
    in reply to vinayakp

    joinarray(repeat(times: _, input: char(160)))

    This code snippet generates as many U+00A0 (which is char 160) as you need.  Just replace the underscore with whatever number of spaces you require, then concat this between the values you want to put spaces between.  Repeat generates a list, and joinArray gets rid of the ugly semicolons.

    value: "This text followed by spaces" & joinarray(repeat(times: 12, input: char(160))) & "before this text",

    OR

    value: concat( 

    "This text followed by spaces",

    joinarray(repeat(times: 12, input: char(160))),

    "before this text"

    ),

    One especially great thing about this is that it allows you to set up the spacing as a constant, so you can easily keep spacing consistent across the entire application, if you want to.