Free cookie consent management tool by TermsFeed

a!isPageWidth() Function

On This Page

Function

a!isPageWidth( pageWidths )

Returns true if the interface is being viewed on a page that falls within the specified width ranges. Returns false otherwise. This function checks the width of the content area on the page, which may not be the width of the entire window.

The a!isPageWidth() function gives you greater control over the responsiveness and adaptability of your interface. Use it to resize, reorient, and conditionally display components and layouts for interfaces that are expected to be viewed on pages of varying content widths.

See also:

Parameters

Keyword Type Description

pageWidths

List of Text String

Valid values: "PHONE", "TABLET_PORTRAIT", "TABLET_LANDSCAPE", "DESKTOP_NARROW", "DESKTOP", "DESKTOP_WIDE".

Returns

Boolean

Usage considerations

Width breakpoints for the pageWidths parameter

The pageWidths parameter values use the following pixel ranges to determine their responsive behavior. For example, if the pageWidths parameter is set to "PHONE" and the screen width is 480 pixels or less, a!isPageWidth() will return true.

Value Width Range
"PHONE" 480 pixels or less
"TABLET_PORTRAIT" 481 to 768 pixels
"TABLET_LANDSCAPE" 769 to 1024 pixels
"DESKTOP_NARROW" 1025 to 1280 pixels
"DESKTOP" 1281 to 1680 pixels
"DESKTOP_WIDE" 1681 pixels or more

Limitations in Appian Designer

The a!isPageWidth() function does not work when testing or editing expression rules, in the query editor, or in a process modeler.

Offline mobile considerations

When designing offline forms, do not use "TABLET_LANDSCAPE" for a!isPageWidth(). Offline forms on tablet devices will always evaluate to "TABLET_PORTRAIT".

Examples

To experiment with examples, copy and paste the expression into an interface object.

Resize components

The a!isPageWidth() function can make sure that your components aren't taking up too much or too little space when viewed at different device widths.

For example, it might look good to display images in a grid style on a tablet or desktop, but on a phone it looks better to display one image per row. With a!isPageWidth(), you can conditionally set different sizes for the images so that your UI looks great at all device widths.

In the interface header bar, click Expression mode expression mode icon, then copy and paste an example into the Interface Definition to test out the different image sizes.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

{
  a!imageField(
    labelPosition: "COLLAPSED",
    images: a!forEach(
      items: {
        "https://source.unsplash.com/random/800x600/?architecture",
        "https://source.unsplash.com/random/900x600/?architecture",
        "https://source.unsplash.com/random/1024x768/?architecture",
        "https://source.unsplash.com/random/1000x800/?architecture",
        "https://source.unsplash.com/random/920x650/?architecture",
        "https://source.unsplash.com/random/810x580/?architecture",
        "https://source.unsplash.com/random/820x590/?architecture",
        "https://source.unsplash.com/random/830x600/?architecture",
        "https://source.unsplash.com/random/840x610/?architecture",
        "https://source.unsplash.com/random/850x620/?architecture",
        "https://source.unsplash.com/random/860x630/?architecture",
        "https://source.unsplash.com/random/870x640/?architecture",
        "https://source.unsplash.com/random/900x500/?architecture",
        "https://source.unsplash.com/random/910x510/?architecture",
        "https://source.unsplash.com/random/920x520/?architecture",
        "https://source.unsplash.com/random/930x530/?architecture",
        "https://source.unsplash.com/random/940x600/?architecture",
        "https://source.unsplash.com/random/940x610/?architecture",
        "https://source.unsplash.com/random/940x620/?architecture",
        "https://source.unsplash.com/random/940x630/?architecture"
      },
      expression: a!webImage(
        source: fv!item
      )
    ),
    size: if(a!isPageWidth("PHONE"),"LARGE","MEDIUM"),
    isThumbnail: true
  )
}

Preview on the desktop narrow device width: screenshot of the images pattern on the desktop narrow device width, with the images in a 4 by 6 grid.

Preview on the phone device width:

screenshot of the image pattern on the phone device width preview, with one image per row

Conditionally display components

If your interface is going to be viewed at different device widths, a!isPageWidth() allows you to conditionally show components or separate displays depending on the width.

We'll look at the Stamp Steps (Icon) pattern as an example of this adaptability. In this pattern, the rich text dots in between each step don't appear on portrait tablet widths or narrower to avoid wrapping. The expression does this by using the if(), a!isPageWidth(), and a!forEach() functions to define two separate rich text display components depending on device width. The a!isPageWidth() function allows you to adaptively show a display with the dots and steps together on wider pages, and only show a display with the steps on narrow pages.

In the interface header bar, click Expression mode expression mode icon, then copy and paste this example into the Interface Definition to test out the adaptive displays.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137

{
  a!localVariables(
    local!iconStampSteps: {
      a!map(icon: "calendar",      name: "Enter Dates"), 
      a!map(icon: "search",        name: "Search Deals"), 
      a!map(icon: "shopping-cart", name: "Check Out")
    },
    a!columnsLayout(
      columns: {
        a!columnLayout(),
        a!columnLayout(
          contents: {
            if(
              /* Display steps vertically for phone and tablet portrait device width */
              a!isPageWidth({"PHONE", "TABLET_PORTRAIT"}),
              a!forEach(
                items: local!iconStampSteps,
                expression: {
                  a!stampField(
                    icon: fv!item.icon,
                    backgroundColor: "TRANSPARENT",
                    contentColor: "ACCENT",
                    size: "MEDIUM",
                    align: "CENTER"
                  ),
                  a!richTextDisplayField(
                    labelPosition: "COLLAPSED",
                    value: a!richTextItem(
                      text: {
                        a!richTextItem(
                          text: fv!index & ". "
                        ),
                        fv!item.name
                      },
                      size: "MEDIUM"
                    ),
                    align: "CENTER"
                  ),
                  a!richTextDisplayField()
                }
              ),
              /* Display steps horizontally for other device widths */
              {
                /* Display stamp and dots in sideBySideLayout */
                a!sideBySideLayout(
                  items: {
                    a!sideBySideItem(),
                    /* Extra spacing before first stamp */
                    a!sideBySideItem(
                      item: a!richTextDisplayField(
                        value: a!richTextItem(
                          text: " "
                        )
                      ),
                      width: "MINIMIZE"
                    ),
                    a!forEach(
                      items: local!iconStampSteps.icon,
                      expression: {
                        a!sideBySideItem(
                          item: a!stampField(
                            icon: fv!item,
                            backgroundColor: "TRANSPARENT",
                            contentColor: "ACCENT",
                            align: "CENTER"
                          ),
                          width: "MINIMIZE"
                        ),
                        a!sideBySideItem(
                          item: a!richTextDisplayField(
                            value: a!richTextItem(
                              text: repeat(13, " " & char(9679)),
                              color: "SECONDARY",
                              size: "SMALL"
                            )
                          ),
                          width: "MINIMIZE",
                          showWhen: not(fv!isLast)
                        )
                      }
                    ),
                    a!sideBySideItem(
                      width: "MINIMIZE"
                    ),
                    a!sideBySideItem()
                  },
                  alignVertical: "MIDDLE"
                ),
                /* Display step names in columnsLayout */
                a!columnsLayout(
                  columns: {
                    a!columnLayout(
                      width: "EXTRA_NARROW"
                    ),
                    a!forEach(
                      items: local!iconStampSteps.name,
                      expression: {
                        a!columnLayout(
                          contents: {
                            a!richTextDisplayField(
                              labelPosition: "COLLAPSED",
                              value: a!richTextItem(
                                text: {
                                  a!richTextItem(
                                    text: fv!index & ". "
                                  ),
                                  fv!item
                                },
                                size: "MEDIUM"
                              ),
                              align: "CENTER"
                            )
                          },
                          width: "NARROW"
                        ),
                        /* Display column for extra space between step names */
                        a!columnLayout(
                          showWhen: not(fv!isLast)
                        )
                      }
                    ),
                    a!columnLayout(
                      width: "EXTRA_NARROW"
                    )
                  },
                  spacing: "NONE"
                )
              }
            )
          },
          width: "WIDE"
        ),
        a!columnLayout()
      }
    )
  )
}

Preview on the fit device width: screenshot of the stamp steps pattern with the fit device width

Preview on the phone device width: screenshot of the stamp steps pattern with the phone device width

Feature compatibility

The table below lists this function's compatibility with various features in Appian.
Feature Compatibility Note
Portals Compatible
Offline Interfaces Compatible
Sync-Time Custom Record Fields Incompatible
Real-Time Custom Record Fields Incompatible

Custom record fields that evaluate in real time must be configured using one or more Custom Field functions.
Process Reports Incompatible

Cannot be used to configure a process report.
Process Events Partially compatible

If autoscale is enabled, can be used to configure a supported process event node (such as a start event or timer event).
Process Autoscaling Compatible

Can be used in autoscaled processes.
Event Consumer Filter Conditions Incompatible

Cannot be used in filter conditions.
Event Consumer Event Handlers Incompatible

Cannot be used in event handler expressions.

Feedback