Salesforce Stack Exchange is a question and answer site for Salesforce administrators, implementation experts, developers and anybody in-between. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

What is the advantage of using a <ui:inputText> component instead of an <input type="Text">?

In fact, the ui: version seems more locked down, as currently methods like .focus() seem to fail on it.

share|improve this question
up vote 5 down vote accepted

The advantage is styling and general ease of use. According to the documentation, you can use this code:

<ui:inputText label="Expense Name" value="My Expense" required="true"/>

To generate all of this actual HTML:

<div class="uiInput uiInputTextuiInput--default uiInput--input">
  <label class="uiLabel-left form-element__label uiLabel">
    <span>Expense Name</span>
    <span class="required">*</span>
  </label>
  <input required="required" class="input" type="text">
</div>

Yes, you lose some feature parity opposed to writing pure HTML, but you gain automatic styling, including the related label, which means there's less code for you to remember and type.

If you have a relatively big component with 20-30 fields, you've just eliminated 140+ lines of code, and you get to make them all consistent with a lot less effort.

If you have a specific need to do something more than what the element allows, then yes, you'll have to resort to pure HTML, but in all other cases, you should prefer the ui and lightning elements, because it greatly reduces the amount of time you spend copying styles, and increases code legibility and maintainability.

As an added bonus, you can automatically bind to a component's attribute without having to write more complicated code, so you don't have to "find" the element, grab its value, and then assign it to the attribute or otherwise use it.

share|improve this answer
    
Also realised that the ui: version also automatically binds to a component's attribute without any extra code, which might be good to add to your answer, as this is probably the most time saving function – nicstella 15 hours ago
    
@nicstella Also a good point. I'll add that. – sfdcfox 15 hours ago

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.