Background image for a form

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

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

Hi,

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

I would use a card layout for that

Hello ShaliniD,

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