Skip to main content

Interaction Between Components

Component Access​

Components are created with a unique ID when they are created. These ID's are called QIDs and a created component can be accessed via this given ID.

When you desire to access the fields on the components, access is provided through these ID's. For this reason, the ID of each component must be unique. Otherwise, you will get an error in the Editor and the components will be overlapped.

In order to access the created components, component instance can be accessed with components.{{compQID}} keyword while inside prop.

In Typescript events, the types of components and the accessible areas on them can be seen via intellisense.

components.{{compQID}}.{{fieldName}} //fieldName can be a property event or an normal field on the component instance

The value of the component is indicated by qValue. You can access it by using the code below. 

components.{{compQID}}.qValue

Interaction Between Components​

How to use the Create Component Methods?​

Creates a new component from given template component.

  • Create a new component in the Editor. It can be rendered or not by the Render prop. Template component can be any type like container, button etc.

  • To access your component easily, naming your component with something easy to remember in naming(QID) will be useful.

In the template component, you can access the new data with data prefix. You can also accessthe prop value of a component as data.newData in order to assign newly created values.

You can place the new component in 3 types of location in the page:

  • Inserts the new component before the location of the template component(place = 'Before')
  • Append then new component after the location of the template component(place = 'After')
  • If place parameter is not given or equals to 'Default', the new component will be appended to end of the page. (place = 'Default' | undefined)
  • Call Quick.createComponent when it is needed with the parameter types above.
  • New component(s) will be created as templateQID + '_' + newCompQID parameter.

placeQID is the parameter indicating which component the newly created draft components will be placed in.

Note: All components should be created with unique QIDs. If newCompQID field is not unique, then existing component will be replaced by the new one and can not be reachable any more.

quick.Quick.createComponent({templateCompQID: string, newCompQID: string, dataSource?: any, place?: 'Before' | 'After' | 'Default', placeQID?: string, childName?: string}) : IComponent | undefined | null

let createdComp = quick.Quick.createComponent({templateCompQID='EdtrComp_1', newCompQID='uniqueValue', dataSource= {name='Test Comp Name', id=[{test='object'}], place='Before', placeQID='EdtrComp_2'});
let items = [{ "name": "Main 1", "sub": [{ "name": "main 1 sub 1" }, { "name": "main 1 sub 2" }] }, { "name": "Main 2", "sub": [{ "name": "main 2 sub 1" }, { "name": "main 2 sub 2" }] }, { "name": "Main 3", "sub": [{ "name": "main 3 sub 1" }, { "name": "main 3 sub 2" }] }];

let index = 0;
items.forEach(mainMenu => {

    let createdCompListGroup = quick.Quick.createComponent({
        templateCompQID: "tempVListItem",
        newCompQID: "tempVListItem" + index,
        place: ElementLocation.Before,
        placeQID: "tempVListItemGroup_tempVListItemGroup0",
        dataSource: mainMenu
    });

    index++;
});

Creating Component Example files:

CreateComponent_WithTransmitDataSource_Sample
deleteComponent
placeQidDynamic

How to use the Delete Component Methods?​

You can use deleteComponent method to delete a created component.

This method, shown as below, also deletes all the child components and breaks the connection with the parent component if there is one.

quick.Quick.deleteComponent(comp: ComponentInstance)

quick.Quick.deleteComponent(EdtrComp_1)

Deleting Component Example file: deleteComponent

How to use the Find Component Relative Methods?​

This method, shown as below, returns the desired dynamic component created with the template, by giving child component inside that dynamic created component. You should pass the child component instance and desired component template id as parameter.

quick.Quick.findCreateComponentRelative (sourceComp: ComponentInstance, targetCompID: string)

const component = quick.Quick.findCreateComponentRelative(quick.this,"tmpCrsItemLatePayment")

Finding Component Relative Example file:

findAndDeleteRelatedDynamicComp### How to use the Get Component Methods?

If the ID of a component is unknown (it may be a newly created component):

  • getComponent can be used if the component is created and can not be found on "components" keyword but the id of it known.
  • getComponentIdByInstance can be used to access the ID of this component.

quick.getComponent(compID: String)

quick.getComponent("EdtrComp_1")

quick.Quick.getComponentIdByInstance(componentInstance: ComponentInstance)

quick.Quick.getComponentIdByInstance(sourceComp: ComponentInstance)

Geting Component Example file: getComponent_example

How to use the Update Component Methods?​

You can use Quick.updateComponent to update a component. The instance of the component must be given as a parameter.

quick.Quick.updateComponent(componentInstance: any)

quick.Quick.updateComponent(components.EdtrComp_1)

How to Set Component Property with Its Children?​

You can set the property of a component as stated above (interaction between components) or via the Quick.setComponentsProperty.

This method changes the property of the component, and if it has sub-components, they also set their properties with the same value given.

quick.Quick.setComponentsProperty(compId: string, propertyName: string, propertyValue: string)

  quick.Quick.setComponentsProperty("myCard", "disabled", "true");

  quick.Quick.setComponentsProperty("myTextField", "readonly", "false");

How to use the Set Component Class Methods?​

Since the class properties of the components are located differently from the other properties, there is a need to use a special method which is called Quick.setComponentClass.

quick.Quick.setComponentClass(componentInstance: IComponent, classes: Array)

quick.Quick.setComponentClass(components.EdtrComp_1, ["testClass1", "testClass2"])