5

I had the following idea: why not take ui:inputTextArea and extend it to show a little counter that tells you how many characters youve entered.

So i extended ui:inputtextarea, added another attribuge 'count' and wanted to display the attribute below the textbox.

I was not successful appending anything to the text box. Since body-inheritance is a little difficult in lightning, I decided to create some test components first.

PARENT (abstract class)

<aura:component abstract="true" extensible="true">
<aura:attribute name="parent_value" type="string" required="true"/>
<div style="background-color:magenta"> 
Parent: {!v.parent_value} 
</div>
{!v.body} 
</aura:component>

CHILD

<aura:component extends="szDev:parent" extensible="true">
    <aura:attribute name="parent_value" type="String" required="true" default="parent_value"/>
    <aura:attribute name="child_value"  type="String" default="child_value" />
    <ul style="background-color:grey">
        <li>{!v.parent_value}</li>
        <li>{!v.child_value}</li>
    </ul>
</aura:component>

So far, so good. If I display I can see the parent magenta part and the grey child part. Parent_value is 'parent_value', child_value is 'child_value', both values repeated in the bullet point list

GRANDCHILD

<aura:component extends="szDev:child" extensible="true">
    <aura:attribute name="grandchild_value" type="Integer" default="10000"/>
    <aura:set attribute="child_value">
        CHILD
    </aura:set>
    <aura:set attribute="parent_value">
        PARENT
    </aura:set>
    <div style="background-color:yellow">
    {!v.grandchild_value}
    </div>
</aura:component>

Here is where I am stuck. As I would expect, it says now 'PARENT' at the appropriate places as well as Child - both values have been handed upwards to the parent component. I can see the magenta and the grey bullet point parts of my components.

But I nowhere can I see the body of the grandchild component. I cannot understand why the grandchild component behaves differently, why the grandchild_value is not display in a yellow div. A little bit of enlightenment would be very appreciated

Sz

2

Extension can be very confusing! Try adding {!v.body} to your child component so that it knows where to put the content passed in from grandchild.

<aura:component extends="szDev:parent" extensible="true">
    <aura:attribute name="parent_value" type="String" required="true" default="parent_value"/>
    <aura:attribute name="child_value"  type="String" default="child_value" />
    <ul style="background-color:grey">
        <li>{!v.parent_value}</li>
        <li>{!v.child_value}</li>
    </ul>
<!--ADDED THIS->
    {!v.body}
</aura:component>

See https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/oo_cmp_attributes.htm

| improve this answer | |
  • Yes, that was very helpful, Mark L. GrandChild Value is now displayed correctly. Alas, my initial attempt to extend the ui:inputtext still fails <aura:component extends="ui:inputTextArea" extensible="true"> <aura:attribute access="GLOBAL" name="placeholder" type="String" default="Yo" description="The text that is displayed by default."/> {!v.body} <h1>THIS DOES NOT GET RENDERED</h1> </aura:component> h1 is not being rendered, 'yo' displays correctly – Christian Szandor Knapp Feb 23 '16 at 12:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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