This page provides two examples that explain how to handle height depending on the design of your component. One example is a map that has no fixed height. The other example is an embedded form that has a fixed height.
You can find the complete code in our example repository.
Adjustable height: MapCopy link to clipboard
A map component can be shorter or taller without significantly changing the function of the map. That means this component can be flexible when handling different height selections by the designer.
Content containerCopy link to clipboard
For this example, we'll assume your map is rendered in a <div> like the one below:
1
2
3
4
<body style='margin: 0px;'>
<div id='content-container' style='background-color: skyblue; overflow: auto;'>
<p>This is an example of adjustable height content, like a map.</p>
</div>
Copy
Capture height parameterCopy link to clipboard
Start by capturing the height parameter. The value corresponds to the Height selected by the designer:
- Auto:
auto - Short:
280px - Medium:
490px - Tall:
840px
1
2
Appian.Component.onNewValue(function (newValues) {
let containerHeight = newValues.height;
Copy
Auto: Set a default heightCopy link to clipboard
When the designer selects Auto height, they're letting you decide how tall to make the component based on it's contents. Select a reasonable default and set that as the height of the component.
1
2
3
if (containerHeight === 'auto') {
setMapHeight('400px');
}
Copy
Tip: Don't add another parameter to set a more granular height because the size of your content may differ across various browsers and mobile clients. Just let developers pick from the existing height options.
Preset heightsCopy link to clipboard
When the designer selects one of the three preset heights you want to adjust the map to fit that size to avoid showing a scroll bar.
1
2
3
if (containerHeight !== 'auto') {
setMapHeight(containerHeight);
}
Copy
Keep in mind that the height parameter represents the size of the entire component container. If your component has any internal padding or margins you might need to set a slightly smaller height to make sure you don't end up with a scroll bar.
Fixed height: Embedded formCopy link to clipboard
A component that embeds a third-party form or web page can't easily change the height of it's contents. That means you'll want the component to show a scroll bar if the designer selects a height that's not big enough to fit it.
Content containerCopy link to clipboard
For this example, we'll assume your form is rendered in a <div> like the one below:
1
2
3
4
5
6
<body style='margin: 0px;'>
<div id='content-container' style='background-color: skyblue; overflow: auto;'>
<div id='embedded-form'>
<p>This is an example of fixed height content, like an embedded form.</p>
</div>
</div>
Copy
Capture height parameterCopy link to clipboard
As with the map component, you first have to capture the height parameter.
Auto: Maximum heightCopy link to clipboard
With the map component we treated Auto as a chance to set a default height. With an embedded form you instead want to view the entire form up to a certain height, and then let the form scroll beyond that limit. In this case we'll pick 840px as the maximum height to match the Tall preset height.
1
2
3
4
5
6
7
8
9
10
11
12
if (containerHeight === 'auto') {
let div = document.getElementById('content-container');
let elementHeight = div.offsetHeight;
let style = getComputedStyle(div);
elementHeight += parseInt(style.marginTop) + parseInt(style.marginBottom);
if (elementHeight < 840) {
document.getElementById('content-container').style.height = 'auto';
} else {
document.getElementById('content-container').style.height = 840 + 'px';
}
}
Copy
Preset heightsCopy link to clipboard
When the designer selects one of the three preset heights you just need to show your form content. If the form is shorter than the preset height there will be blank space at the bottom. If the form is taller than the preset height then a scroll bar will be shown. The designer can decide whether they prefer this or the Auto behavior for their interface.
1
2
3
if (containerHeight !== 'auto') {
document.getElementById('content-container').style.height = 'auto';
}
Copy