CTATGroupingComponent

Sandy Demi edited this page Jan 4, 2017 · 26 revisions
Clone this wiki locally

CTATGroupingComponent

Sometimes you might want to control several components at once. For example you might want to hide or show a row of text input boxes through the graph. You can accomplish this through the grouping component. Through it you can call TPAs on a number of components at the same time.

Code

<div id="group" class="CTATGroupingComponent"
     style="width: 0px; height: 0px; display: none;"
     data-ctat-componentlist="component1,component2,component3,component4">		
</div>

Alternately:

<div id="group2" class="CTATGroupingComponent">
  <div id="group2memberA" class="CTATTextInput"></div>
  <div id="group2memberB" class="CTATTextInput"></div>
</div>

Running Examples

Attributes and Settings

  • id: Required. The name of the component, must be a valid html id name.
  • class: Required. The class list, must include CTATGroupingComponent and no other CTAT<component> classes.
  • data-ctat-componentlist: a , separated list of CTAT component ids to include in the group.
  • data-ctat-use-componentlist: deprecated in 4.1.0 a boolean value. If true use data-ctat-componentlist, otherwise this controls child entities.

TPA Accessible Methods

Action Input Notes
SetVisible value (Boolean) Use this to hide or show all the sub components
lock ignored (String) Use this to completely lock all components inside the group
unlock ignored (String) Use this to completely unlock all components inside the group
setSize value (String) Depending on the setting of data-ctat-use-componentlist either the containing div will be resized or every component inside the container will be resized. So if you specify 100,50 as the width and height, then either all listed components or the grouping div will be resized to that width and height
move value (String) Depending on the setting of data-ctat-use-componentlist either the containing div will be moved or every component inside the container will be moved. Note that the move is not an absolute, instead it will move by the amount of pixels specified in the Input field in the Matcher dialog in the Behavior Recorder. So if you specify 20,20 then either all listed components or the grouping div will move by that amount in the x and y direction
highlight ignored (String) Depending on the setting of data-ctat-use-componentlist either the containing div will be highlighted or every component inside the container will be highlighted
unhighlight ignored (String) Depending on the setting of data-ctat-use-componentlist either the containing div will be unhighlighted or every component inside the container will be unhighlighted

Style

Typically you will want to use regular styling as you would apply to any div. So for example you would set the overflow CSS attribute if your grouping div manages containing components. If however you are driving sub components through a list then you will most likely want to visually remove the grouping component from your page by doing something like:

{ width: 0px; height: 0px; display: none; }