Out-of-the-box JSON Formatter to display formatted JSON in Interface

Certified Lead Developer

Does Appian have an out-of-the-box JSON formatter which I can use to format JSON in a User Interface for our support team? Something like https://jsonformatter.org/ offers. 

  Discussion posts and replies are publicly visible

  • Hi there,

    I don't think there is any out-of-the-box functionality. However, you can use this free plug-in - community.appian.com/.../json-formatter.

  • Hi Harm,
    Harshit is absolutly right.
    AFAIK there is no formatter or anything. 

  • 0
    Certified Lead Developer

    Thanks and  for your replies. Will have a look at the plug-in. 

  • I installed the plugin in my community edition. At first glance it seems to work nicely, but when switching from EXPRESSION MODE to DESIGN MODE in my Interface I get a strange error. Commenting out the formatjson function on line 178 solved the issue. When checking the Tomcat log files it's exploding with exceptions cause by formatjson. Some  20132 kb one hour!

    Here's the test interface code I used, just ignore the banner stuff I was experimenting with. Think the plugin desperately needs an update...

    a!localVariables(
      local!firstName: "John",
      local!lastName: "Doe",
      local!username: lower(local!firstName) & "." & lower(local!lastName),
      local!street: "Park Avenue",
      local!zip: 90210,
      local!city: " Beverly Hills",
      local!notes: {},
      local!editedTimestamp: a!refreshVariable(
        value: now(),
        refreshOnVarChange: {
          local!firstName,
          local!lastName,
          local!city,
          local!street,
          local!zip
        }
        
      ),
      local!dictionary: a!refreshVariable(
        value: {
          a!map(
            firstName: local!firstName,
            lastName: local!lastName,
            address: a!map(
              street: local!street,
              zipCode: local!zip,
              city: local!city
              
            ),
            notes: {
              a!map(noteId: 1, noteText: "My First Note"),
              a!map(noteId: 2, noteText: "My Second Note")
            },
            lastUpdate: local!editedTimestamp
          )
        },
        refreshOnReferencedVarChange: true()
      ),
      local!json: a!toJson(local!dictionary),
      local!showBanner: false(),
      {
        {
          /* Dismissable Information Banner */
          load(
            local!showInformationBanner: local!showBanner,
            a!cardLayout(
              contents: {
                a!sideBySideLayout(
                  items: {
                    a!sideBySideItem(
                      item: a!richTextDisplayField(
                        labelPosition: "COLLAPSED",
                        value: {
                          a!richTextIcon(
                            icon: "warning",
                            color: "#FF0000",
                            size: "MEDIUM"
                          )
                        }
                      ),
                      width: "MINIMIZE"
                    ),
                    a!sideBySideItem(
                      /* Replace this rich text with your information message */
                      item: a!richTextDisplayField(
                        labelPosition: "COLLAPSED",
                        value: {
                          a!richTextItem(text: { "New Case." }, style: { "STRONG" }),
                          " ",
                          "A new low priority case has been created.",
                          " ",
                          a!richTextItem(
                            text: "View details",
                            link: a!dynamicLink()
                          )
                        }
                      )
                    ),
                    a!sideBySideItem(
                      item: a!richTextDisplayField(
                        labelPosition: "COLLAPSED",
                        value: a!richTextIcon(
                          icon: "times",
                          link: a!dynamicLink(
                            value: false,
                            saveInto: local!showInformationBanner
                          ),
                          linkStyle: "STANDALONE",
                          size: "MEDIUM"
                        )
                      ),
                      width: "MINIMIZE"
                    )
                  },
                  alignVertical: "MIDDLE",
                  spacing: "STANDARD"
                )
              },
              showWhen: local!showInformationBanner,
              style: "STANDARD",
              marginBelow: "STANDARD",
              accessibilityText: "Information message"
            )
          )
        },
        a!sideBySideLayout(
          items: {
            a!sideBySideItem(
              item: a!textField(
                label: "First Name",
                value: local!firstName,
                saveInto: local!firstName,
                refreshAfter: "KEYPRESS"
              )
              
            ),
            a!sideBySideItem(
              item: a!textField(
                label: "Last Name",
                value: local!lastName,
                saveInto: local!lastName,
                refreshAfter: "KEYPRESS"
              )
            ),
            a!sideBySideItem(
              item: a!textField(
                label: "Username",
                value: local!username,
                saveInto: local!username,
                refreshAfter: "KEYPRESS",
                disabled: true
              )
              
            )
          }
        ),
        a!sideBySideLayout(
          items: {
            a!sideBySideItem(
              item: a!textField(
                label: "Street",
                value: local!street,
                saveInto: local!street,
                refreshAfter: "KEYPRESS"
              )
            ),
            a!sideBySideItem(
              item: a!textField(
                label: "Zip code",
                value: local!zip,
                saveInto: local!zip,
                refreshAfter: "KEYPRESS"
              )
            ),
            a!sideBySideItem(
              a!textField(
                label: "City",
                value: local!city,
                saveinto: local!city
              )
            )
          }
        ),
        a!textField(
          label: "Last Edited",
          value: text(
            local!editedTimestamp,
            "dddd dd mmmm yyyy - hh:mm:ss"
          ),
          saveInto: local!editedTimestamp,
          disabled: true
          
        ),
        a!paragraphField(
          label: "JSON",
          labelPosition: "ABOVE",
          value: formatjson(local!json),
          saveInto: local!json,
          refreshAfter: "UNFOCUS",
          height: "TALL",
          disabled: true(),
          validations: {}
        )
      }
    )

  • Hi Harm,

    I just used the code that you shared and tested it in my dev environment and in my community edition, in both places it worked fine without any errors or anything unusual in the tomcat logs. Could you please elaborate on the error you are getting when you click on designer and the messages you are getting in the log?

    Check the screenshot from my community:

    Check the screenshot from my Dev Environment:

    Regards,

    Acacio B.

  • 0
    Certified Lead Developer
    in reply to Acacio Barrado

    Here are some screenshots of my issue. I have no clue why I have this issue in the interface designer and you don't. Yet I'm curious to know if you also see some java exceptions related to formatJson.

  • Hey Harm,

    Based on the error it seams that the plugin is no longer deployed. Is it possible that it was deleted? Could you please check if it is still installed and deploy it again?

    Regards,

    Acacio B.

  • 0
    Certified Lead Developer
    in reply to Acacio Barrado

    It is installed and works but throws these exceptions nevertheless.