4

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.

3 Answers 3

9

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.

2
  • 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
    Dec 15, 2016 at 2:33
  • @nicstella Also a good point. I'll add that.
    – sfdcfox
    Dec 15, 2016 at 2:43
0

You can also write your own component library if you want to be more free in your developments, especially if you tend to not always follow SLDS style , like for community webApps for example.

0

Yes you can . Even there are libraries that did this. The disadvantage is of the Binding an Methods from API you can directly use with ui:input cant be used with input

https://lightningdart.com/#/desktop

http://aljs.appiphony.com/

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .