Background image for a form

Hi, I am trying to add a customized background image for a form with text boxes, dropdowns, check boxes, and radio buttons. a!billboardLayout is there but it does not support text boxes, dropdowns, or checkboxes. Is there any other way to achieve this?

  Discussion posts and replies are publicly visible

  • 0
    Certified Senior Developer

    Hi , what do you means by background image with textbox? its just an image right , can't you use billboard layout for that ? what type of image is that ?

  • I want a customized image in the background that would support text boxes, dropdowns, check boxes, and radio buttons. But billboard layout does not support any one of them

  • 0
    Certified Associate Developer
    in reply to ShaliniD

    Hi,

    Instead of Background image you can have the background color in the card layout

  • 0
    Certified Senior Developer
    in reply to ShaliniD

    I would use a card layout for that

  • 0
    Certified Senior Developer
    in reply to ShaliniD

    Hello ,

    Appian does not have such features as of now. But instead you can try different approaches using color styles and etc. But using Image as a background cannot be done. Billboard Layout does not support input fields so you cannot use it for text fields, radio buttons or any kind of input values. It is only for display purpose.

    Instead you can use cardLayout, headerContentLayout where you can use input fields.

    below is an example

    a!headerContentLayout(
      header: a!cardLayout(
        contents: a!richTextDisplayField(
          value: a!richTextHeader(
            text: "Your Header Here"
          )
        ),
        style: "#4B0082",
        showBorder: false
      ),
      contents: {
        a!columnsLayout(
          columns: {
            a!columnLayout(
              contents: {
                a!textField(
                  label: "Text",
                  labelPosition: "ABOVE",
                  saveInto: {},
                  refreshAfter: "UNFOCUS",
                  validations: {}
                )
              }
            ),
            a!columnLayout(
              contents: {
                a!dropdownField(
                  label: "Dropdown",
                  labelPosition: "ABOVE",
                  placeholder: "--- Select a Value ---",
                  choiceLabels: {"Option 1", "Option 2", "Option 3", "Option 4",
                                  "Option 5", "Option 6", "Option 7", "Option 8",
                                  "Option 9", "Option 10", "Option 11", "Option 12"},
                  choiceValues: {1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12},
                  saveInto: {},
                  searchDisplay: "AUTO",
                  validations: {}
                )
              }
            ),
            a!columnLayout(
              contents: {
                a!radioButtonField(
                  label: "Radio Buttons",
                  labelPosition: "ABOVE",
                  choiceLabels: {"Option 1", "Option 2"},
                  choiceValues: {1, 2},
                  saveInto: {},
                  choiceLayout: "STACKED",
                  validations: {}
                )
              }
            )
          }
        ),
        a!columnsLayout(
          columns: {
            a!columnLayout(
              contents: {
                a!pieChartField(
                  label: "Pie Chart",
                  labelPosition: "ABOVE",
                  series: {
                    a!chartSeries(label: "Chart Series 1", data: 1),
                    a!chartSeries(label: "Chart Series 2", data: 2),
                    a!chartSeries(label: "Chart Series 3", data: 3)
                  },
                  colorScheme: "RAINFOREST",
                  style: "DONUT",
                  seriesLabelStyle: "ON_CHART",
                  height: "MEDIUM"
                )
              }
            ),
            a!columnLayout(
              contents: {
                a!areaChartField(
                  label: "Area Chart",
                  labelPosition: "ABOVE",
                  categories: {"Category 1", "Category 2", "Category 3"},
                  series: {
                    a!chartSeries(label: "Chart Series", data: {1, 2, 3})
                  },
                  stacking: "NORMAL",
                  showLegend: true,
                  showTooltips: true,
                  colorScheme: "RAINFOREST",
                  height: "MEDIUM",
                  xAxisStyle: "STANDARD",
                  yAxisStyle: "STANDARD"
                )
              }
            )
          }
        ),
        a!sectionLayout(
          
        ),
        a!eventHistoryListField(
          label: "Event History",
          labelPosition: "COLLAPSED",
          eventData: {
            a!eventData()
          },
          eventStyle: "PREVIEW_LIST"
        )
      },
      backgroundColor: "#000000"
    )

    View these recipes by Appian

    docs.appian.com/.../inspiration.html