The fact that Power Apps Portals uses Bootstrap as its CSS framework means we have a lot of tools as our disposal (yes, I know we’d all love it if we could use a newer version of Bootstrap, or even pick whatever framework we wanted, but that is a topic for another day). Unfortunately, some of the Bootstrap components require specific markup that we can’t achieve with configuration alone. In this post I’ll cover how we can use JavaScript to change the markup on either Basic Forms or Advanced Forms so that we can leverage the Input Group functionality (in case you missed the memo, Basic Forms is the new name for Entity Forms, and Advanced Forms is the new name for Web Forms).

Bootstrap Input Group

In Bootstrap v3 there are a number of CSS and JavaScript component that we can leverage simply by having the HTML markup and CSS classes. Recently I was asked how to add Input Group functionality to Basic or Advanced Forms. Input Groups allow you to add text or buttons immediately before or after inputs. Here are some examples from the Bootstrap documentation:

In this particular case, the customer is asking for an email address on a form, but they only want the prefix (the part before the @), since the domain is the same for everyone. To make this clear to the user, they want to include the domain as text that follows the text input.

This can be achieved simply by wrapping the text input element with an additional <div>, and including a <span> that has the domain, like so:

<div class="input-group">
  <input type="text" class="form-control" id="emailprefixl" aria-describedby="emaildomain">
  <span class="input-group-addon" id="emaildomain">@example.com</span>
</div>

Unfortunately, there is not configuration option that allows you to do this. So we’ll have to resort to JavaScript to modify the markup generated on the server for the forms.

The Required JavaScript

To start, this is what the field looks like out of the box:

To create the required markup, we need to use the input group, we’ll need to:

1. Wrap the input with a <div> that has a class of input-group
2. Add another child <span> to that <div> that contains the domain we want to show.

Here is the JavaScript that accomplishes that:

$(document).ready(function() {
	var field = $('#your_field_here');
	$('<div class="input-group">').css('width', '100%').appendTo(field.parent()).append(field).append('<span class="input-group-addon">@example.com</span>');
});

You’ll also notice that I set the width of the input-group <div> to be 100% – this is to match the styling of the rest of the portal. If you don’t like setting that in JavaScript, you could create a CSS rule instead. I prefer to keep all of the code necessary in a single place as I find it easier to manage.

With that code in place in the Custom JavaScript field on a Basic Form or Advanced Form, we get:

You can change the code if you want the text to appear before – simply swap the order of the append of the field and the append of the <span>.