5

I have this idea for a generic component that would allow adding, deleting and copying entries in the form - abstract component handles adding, cloning, etc, while your main component holds actual form - input fields, checkboxes, etc.

Unfortunately I cannot think of how to bind the state. Demo below of what I've got so far:

AbstractSelector.cmp:

<aura:component abstract="true">
  <aura:attribute name="items" type="object[]" default="[{'name':'foo'},{'name':'baz'}]"/>
  <div class="slds-page-header">
    <aura:iteration items="{!v.items}" var="i">
      <lightning:input type="checkbox" label="delete" name="del" variant="label-hidden"/>
        {!v.body}
    </aura:iteration>
    <div class="slds-button-group" role="group">
      <lightning:button onclick="{!c.add}" label="Add" variant="brand"/>
      <lightning:button onclick="{!c.delete}" label="Delete" variant="destructive"/>
      <lightning:button onclick="{!c.fill}" label="Fill Down" variant="neutral"/>
    </div>
  </div>
</aura:component>

n.b. items default values and iteration is for demo purposes, but I imagine that's how it should work approximately.

QuestionnaireA.cmp:

<aura:component extends="c:AbstractSelector">
  <aura:attribute name="state" type="object"/>
  <lightning:input
    label="Company name"
    name="CompanyName"
    value="{!v.state.companyName}"/>
  <lightning:input label="Your name" name="name" value="{!v.state.name}"/>
</aura:component>

QuestionnaireB.cmp:

<aura:component extends="c:AbstractSelector">
  <aura:attribute name="state" type="object"/>
  <lightning:input label="Some question" name="name" value="{!v.state.q1}"/>
</aura:component>

The intended use:

<c:QuestionnaireA state="{!v.state.questionnaireA}" />
<c:QuestionnaireB state="{!v.state.questionnaireB}" />

The main motivation is not to create a wrapper for each questionnaire piece, but have one generic one that can be reused. I hope this question is not too abstract for here :)

  • So... state is binding in the sub-components, but not in the super? Have you tried adding the state attribute to the abstract? Or using an interface that all these components implement? (Interfaces are a bit weird) – Caspar Harmer Jul 3 '17 at 23:55
  • have you tried a handler on the state value of the sub-components, that calls the super state and sets it in the helper class? – Caspar Harmer Jul 3 '17 at 23:56
  • I am realising that iteration should be happening in subcomponent, while buttons to add/delete/copy can be in abstract one. Checkbox was throwing me off. – dzh Jul 4 '17 at 0:59

Your Answer

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

Browse other questions tagged or ask your own question.