Help me for creating the interface like this

Certified Senior Developer

i want to create the interface like this but i don't know how to create the interface with this type of format can anyone help me for this,

i want clickable links in the interface for that what i want component i want to use.

  Discussion posts and replies are publicly visible

Parents
  • Hi

    Hope the below sample code is helpful

    a!localVariables(
      local!selectedTab: 1,
      local!tabNames: {
        "Summary",
        "Application Details",
        "Offer Details",
        "Company Details",
        "Applicant Details",
        "Documents",
        "Workflow Items",
        "History Record"
      },
      a!formLayout(
        label: concat(
          user(loggedInUser(), "firstName"),
          " | ",
          user(loggedInUser(), "lastName")
        ),
        contents: {
          a!buttonArrayLayout(
            buttons: {
              a!forEach(
                items: local!tabNames,
                expression: a!buttonWidget(
                  label: fv!item,
                  saveInto: if(
                    local!selectedTab = fv!index,
                    {},
                    a!save(local!selectedTab, fv!index)
                  ),
                  size: "SMALL",
                  width: "MINIMIZE",
                  style: if(
                    local!selectedTab = fv!index,
                    "PRIMARY",
                    "LINK"
                  )
                )
              )
            }
          ),
          a!richTextDisplayField(
            labelPosition: "COLLAPSED",
            value: a!richTextItem(
              text: concat(
                choose(
                  local!selectedTab,
                  "The contents of the First tab would go here",
                  "The contents of the Second tab would go here",
                  "The contents of the Third tab would go here",
                  "The contents of the Fourth tab would go here",
                  "The contents of the Fifth tab would go here",
                  "The contents of the Sixth tab would go here",
                  "The contents of the Seventh tab would go here",
                  "The contents of the Eight tab would go here"
                )
              ),
              style: "EMPHASIS"
            ),
            align: "CENTER"
          )
        }
      )
    )


    Refer This Documentation (Example): Tabs Patterns - Appian 22.4

Reply
  • Hi

    Hope the below sample code is helpful

    a!localVariables(
      local!selectedTab: 1,
      local!tabNames: {
        "Summary",
        "Application Details",
        "Offer Details",
        "Company Details",
        "Applicant Details",
        "Documents",
        "Workflow Items",
        "History Record"
      },
      a!formLayout(
        label: concat(
          user(loggedInUser(), "firstName"),
          " | ",
          user(loggedInUser(), "lastName")
        ),
        contents: {
          a!buttonArrayLayout(
            buttons: {
              a!forEach(
                items: local!tabNames,
                expression: a!buttonWidget(
                  label: fv!item,
                  saveInto: if(
                    local!selectedTab = fv!index,
                    {},
                    a!save(local!selectedTab, fv!index)
                  ),
                  size: "SMALL",
                  width: "MINIMIZE",
                  style: if(
                    local!selectedTab = fv!index,
                    "PRIMARY",
                    "LINK"
                  )
                )
              )
            }
          ),
          a!richTextDisplayField(
            labelPosition: "COLLAPSED",
            value: a!richTextItem(
              text: concat(
                choose(
                  local!selectedTab,
                  "The contents of the First tab would go here",
                  "The contents of the Second tab would go here",
                  "The contents of the Third tab would go here",
                  "The contents of the Fourth tab would go here",
                  "The contents of the Fifth tab would go here",
                  "The contents of the Sixth tab would go here",
                  "The contents of the Seventh tab would go here",
                  "The contents of the Eight tab would go here"
                )
              ),
              style: "EMPHASIS"
            ),
            align: "CENTER"
          )
        }
      )
    )


    Refer This Documentation (Example): Tabs Patterns - Appian 22.4

Children