Skip to main content

Block Component

The block component is usually used on long and complex pages to master the page layout, to get away from the complex structure.

You can separate sections on a page as subpages, and display each section on your page as a block component.You can also customize them according to the page desires.

Usage of the Block Component​

To use block component in the pages:

  • Make a new page with UI Editor
  • After completing your page, click on the Convert to Block Component button located at the top left of the editor

  • On the Explorer tab, you can see from the page icon you created that the page has been converted to the Block Component.

Add Block Component​

To add block component to the pages:

  • Search the page name that you converted to the block component in the search component section, located to the left of the UI Editor
  • Click on the BlockComponent in search results.

Block Component Properties​

On the Block page, in the Page Component, you can customize the component properties.

After clicking your Page Component,

  • Go to Props tab on the right and open Others

  • Set the externalProps property to the string array that they will be set from the parent page

  • You can set up extarnal prop from your page as follows

BlockPageComp.externalProps=['prop1', 'prop2']
  • You can use these props as such: quick.parent.props.prop1 and quick.parent.props.prop2 in anywhere of Block page.
    The texts of the buttons on the first line are setted with the values ​​determined on the parent page.
const prop1 = quick.parent.props?.prop1;
const prop2 = quick.parent.props?.prop2;

Block Component Events​

On the Block page, you can also modify the component events.

After clicking your Page Component,

  • Go to Props tab on the right and open Others
  • Set the externalEvents property of the Page Component as an array of objects

[{name='param1', params=['p1', 'p2']}]
BlockPageComp.externalEvents=[{name='eventName', params=['param1', 'param2']}]
  • Events can be called anywhere in Block page like: parent.events.eventName({param1=value}).
  • In BlockComponent's events section that used in the Parent Page, you can set eventName as page needs.

inside eventName event, you can read param1 as below

declare var param1: string;
quick.EM.trace('event inside trigger');
quick.EM.trace(param1)

Example: By clicking the first button on the 3rd line, the event on the parent page is triggered.

Call Custom Method In Block Component​

In Block Page's Page Component, add custom events on it with setting External Visibile option. Then, you can call these events from parent page or BlockComponent's onLoad event.

Example: SubPageCustomEvent1 method is called in the onLoad event running immediately after BlockComponent rendering on the sample page. SubPageCustomEvent2 event runs on the click event of the button named 'Change 2.row 2.Col Button Text' on the parent page. This event changes the value of a component in the sub page.

Sample Pages​

parentPage.qjson
subPage.qjson
fileUploadServiceCallBlockComp.qjson
serviceCallerBlockComponent.qjson
fileUploadBlockComponent.qjson