API Reference
Namespaces
Classes
Events
Global
Externals

Namespace: cq-study-dialog

WebComponents. cq-study-dialog

Study dialogs web component <cq-study-dialog>.

Creates and manages study dialogs based on the corresponding study library entry (title, inputs, outputs, parameters, etc.).

Requires CIQ.UI.StudyEdit.

Optional Attributes:

  • cq-study-axis — Displays UI for selecting the y-axisposition (left, right, etc.), color and for inverting the y-axis if not shared with the primary-axis.
  • cq-study-panel — Displays UI for selecting the panel for the study (own, shared, etc.) and whether it is rendered as an underlay (under the primary chart) or an overlay (over the primary chart). Set this attribute to "alias" to have the panel names listed as "<Panel 1>", "<Panel 2>", etc.
Since:
  • 5.2.0 Optional Attributes cq-study-axis and cq-study-panel are now available.
  • 6.3.0 cq-study-axis now also provides a check box allowing users to invert study y-axis if not shared with the primary-axis.

Example

Here is an example of how to create a study dialog. We add the cq-study-axis and cq-study-panel attributes to enable form fields used to control axis position, color, study panel, and underlay/overlay.

<cq-dialog>
     <cq-study-dialog cq-study-axis cq-study-panel>
          <h4 class="title">Study</h4>
          <cq-scroll cq-no-maximize>
               <cq-study-inputs>
                    <template cq-study-input>
                         <cq-study-input>
                              <div class="ciq-heading"></div>
                              <div class="stx-data">
                                   <template cq-menu>
                                        <cq-menu class="ciq-select">
                                             <cq-selected></cq-selected>
                                             <cq-menu-dropdown cq-lift></cq-menu-dropdown>
                                        </cq-menu>
                                   </template>
                              </div>
                         </cq-study-input>
                    </template>
               </cq-study-inputs>
               <hr>
               <cq-study-outputs>
                    <template cq-study-output>
                         <cq-study-output>
                              <div class="ciq-heading"></div>
                              <cq-swatch cq-overrides="auto"></cq-swatch>
                         </cq-study-output>
                    </template>
               </cq-study-outputs>
               <hr>
               <cq-study-parameters>
                    <template cq-study-parameters>
                         <cq-study-parameter>
                              <div class="ciq-heading"></div>
                              <div class="stx-data"><cq-swatch cq-overrides="auto"></cq-swatch>
                                   <template cq-menu>
                                        <cq-menu class="ciq-select">
                                             <cq-selected></cq-selected>
                                             <cq-menu-dropdown cq-lift></cq-menu-dropdown>
                                        </cq-menu>
                                   </template>
                              </div>
                         </cq-study-parameter>
                    </template>
               </cq-study-parameters>
          </cq-scroll>
          <div class="ciq-dialog-cntrls">
               <div class="ciq-btn" stxtap="close()">Done</div>
          </div>
     </cq-study-dialog>
</cq-dialog>

Methods


StudyDialog#selectTemplates()

Selects template elements and attaches them as class properties only once


StudyDialog#setSelectOption(activator, section)

Accepts new menu (select box) selections

Parameters:
Name Type Description
activator object
section string

within the dialog ("inputs", "outputs", "parameters")

Since:
  • 5.2.0 Added section parameter.