Invision UI v.19.6.0-0

Getting Started

  • Running Invision UI
  • UI Component Anatomy
  • Authoring SCSS
  • Authoring Presentational Behavior

Component Foundations

  • SCSS Authoring
    • Mixins & Variables
    • Stateful Classes
  • State Guidance
    • Empty/Zero State
    • Loading State
  • Utilities
    • Align
    • Display
    • Flexbox
    • Font Size
    • Layout
    • Offset
    • Position
    • Overflow
    • Size
    • Spacing
    • Text
  • Layout
    • Arrange [Deprectated]
    • Divided Columns
    • Embed Video
    • Full and Center
    • Fill [Deprectated]
    • Grid
    • Media Blocks
    • Panels
    • Vertical Layouts
  • Media Queries
  • Angular Behaviors
    • App Theme Directive
    • Auto Focus Input
    • Filters
    • Popup (modal dialog) Manager
    • Tether (tooltip/dropdown) Manager
    • Resize Sensor
    • Watchers

UI Component Library

  • Content & Containment
    • Active Translation
    • Auto Fit Text
    • Address
    • Basic & Input Table
    • Brand Logo/Slogan
    • Call to Action - Empty State
    • Carousel
    • Cart
    • Choice
    • Collapsible Container
    • Copyright Footer
    • Coupon Redeemer
    • Content
    • Date Relative Display
    • Definition Lists
    • Delimited List
    • Details
    • Expiration Date Display
    • Feature Toggle
    • Form Section Heading
    • Header
    • Heading
    • Heading With Annotation
    • Icons
    • Interaction Details
    • Labeled Balance
    • Link
    • Main Container
    • Metadata Card
    • Metadata List Item
    • Offering QuickView
    • Payment Instrument
    • Preference Dialog
    • Pricing Plan Decoration
    • Product Availability
    • Product Details
    • Product Image
    • Quick Info Panel
    • Remark
    • Renewal Column
    • Richlist Filterbar
    • Richlist Wrapper
    • Scrollable Horizontal List
    • Search Card
    • Search Panel
    • Section
    • Selectable Option
    • Smart Truncate
    • Status Grid
    • Tooltip
  • Data Visualizations
    • Bill Runs
    • Comparison Table
    • Datatable
    • Progress Tracker
    • Schedules
    • Query Builder
  • Dialogs
    • Confirmation Dialog
    • Dialog
    • Rich List Dialog
    • Wait Dialog
  • Forms and Filters
    • Additional Properties
    • Autocomplete
    • 3 Field Date Input
    • Checkbox
    • Credit Card
    • Bulk Action Bar
    • Buttons
    • Confirmation Button
    • Date Picker
    • E-Check
    • Entity Specification
    • External Bill
    • External Gift Card
    • Focus Group
    • Forms
    • Filter Bar
    • Filter Dropdowns
    • Gift Card
    • Grouped Check Filters
    • Inputs
    • Input Select Combo
    • Monetary Input
    • Multi Dropdown Selector
    • Multiple Numeric Input
    • Monetary Range Input
    • Password Unmask Button
    • Select
    • Select Button Or Stepper
    • Select Or Text Input
    • Stepper
    • Tag Dropdown
  • Navigation & Flow
    • Back Banner
    • Back Component
    • Breadcrumbs
    • Details Pager
    • Expandable Section
    • Infinite Scroll
    • Open New Window
    • Pager
    • Fancy Richlist
    • Standard Navigator
    • Status Indicator
    • Step Progress Bar
    • Step Progress Indicator
    • Tab Card
    • Tab Panel
    • Tier Navigator
    • Wizard
  • Notifications
    • Loading Indicator
    • Toast Notifications
  • Deprecated
    • Content Area

Showcase

  • General
    • Simplelist
    • Richlist
    • Primary (side) Navigator
  • Customer Care
    • Case Activity List
    • Customer Care Navigator Component
    • Dashboard
    • Decisions
  • Reporting
    • Content Visualization

Unit Testing

  • Actions
  • Components
  • Selectors
  • Reducers

End-to-end Testing

Statistics

Query Builder

Components for visualising query builders runs and their execution.

In this section

Variants
  • Query Builder

Query Builder

Query Builder for Segment Rules.

Component Configuration
Instructions and Params
targetModel | Object
target-model="$ctrl.miRuleModel"
Indicates the element containing the base rule, usually given by the API, Catalog/RetrieveSegments
onRequestUpdate | Function
on-request-update="$ctrl.miCallbackFunction"
Callback function to retrieve an internal function from the component to request for updates
onChangeModel | Function
on-change-model="$ctrl.miCallbackFunction"
This function is called every time the model gets updates, either the position and/or content.
showRuleId | Boolean
show-rule-id="true"
If we want to display the id icon right nex to the rule.
Used Model
Component Usage
HTML
<div class="t-content" ng-controller="QueryBuilderExampleController as $ctrl">
    <!--CONFIGURATION AND HEADERS-->
    <div class="c-formSectionHeading">
        <strong>Component Configuration</strong>
    </div>

    <div class="u-flex u-flexSpaced">
        <div class="u-size5of12">
            <div>
                <h5 class="u-delta u-pb++">Instructions and Params</h5>
                <div><strong>targetModel | Object</strong></div>
                <code class="u-pb++">
                    target-model="$ctrl.miRuleModel"
                </code>
                <div class="u-pt++ u-pb++">
                    Indicates the element containing the base rule, usually given by the API,
                    Catalog/RetrieveSegments
                </div>
            </div>

            <div class="u-pb++ u-pt++">
                <div><strong>onRequestUpdate | Function</strong></div>
                <div class="u-pb++">
                    <code>
                        on-request-update="$ctrl.miCallbackFunction"
                    </code>
                </div>
                <div class="u-pb++">
                    Callback function to retrieve an internal function from the component to request for updates
                </div>
            </div>

            <div class="u-pb++ u-pt++">
                <div><strong>onChangeModel | Function</strong></div>
                <div class="u-pb++">
                    <code>
                        on-change-model="$ctrl.miCallbackFunction"
                    </code>
                </div>
                <div class="u-pb++">
                    This function is called every time the model gets updates, either the position and/or content.
                </div>
            </div>

            <div class="u-pb++ u-pt++">
                <div><strong>showRuleId | Boolean</strong></div>
                <div class="u-pb++">
                    <code>
                        show-rule-id="true"
                    </code>
                </div>
                <div class="u-pb++">
                    If we want to display the id icon right nex to the rule.
                </div>
            </div>
        </div>
        <div class="u-size5of12">
            <h5 class="u-delta u-pb++">Used Model</h5>
            <div ng-bind-html="$ctrl.result" ></div>
        </div>
    </div>

    <div class="c-formSectionHeading">
        <strong>Component Usage</strong>
    </div>

    <!--COMPONENT CALL-->
    <inv-query-builder
        target-model="$ctrl.elements"
        on-change-model='$ctrl.recordChanges'
        class="u-mt++"></inv-query-builder>
</div>