10.10 Grid

The grid section is used to design grid structure supported by Oracle JET. Refer http://jet.us.oracle.com/jetCookbook.html?component=grid&demo=gridresponsive to learn how to use grid structure.


Description of uxextensibility203.png follows
Description of the illustration uxextensibility203.png

Usage: By default tools support Oracle JET oj-form-layout (refer http://jet.us.oracle.com/jetCookbook.html?component=ojFormLayout&demo=formverticalofl).

The default layout will be the one which user selected on Layout Selection page (refer Layout Selection Page). But there are limitations of oj-form-layout. Not every element is supported by oj-form-layout and not every structure can be created by oj-form-layout, hence grid layout can be used to resolve this problem. Use of grid is pretty simple.

Creating grid Layout: Select grid option to enable grid layout.

a. Flex:

This property provide new flex to the selected element. And the current element will be wrapped as flex-item in this Flex. But in case user does not select this option and previous element has Flex true than this element will be added as flex item in the previous element. It is okay if this all seems little complex, we will clear this in upcoming examples.

b. Flex Item Label Class:

In case of form element like input box, select box, etc. this property is used to decide the width and position of label. In case form element does not have label or user does not want to display the label, keep the switch off.

c. Flex item label Class:

This field is used to get configuration for width and position of current element.

Examples:

Case:

a) Grid: true, flex : true; Flex item label class: true,

Label Class: ‘oj-lg-3 oj-md-4 oj-sm-12’, Flex Item Class: ‘oj-lg-4 oj-md-5 oj-sm-12’


Description of uxextensibility204.png follows
Description of the illustration uxextensibility204.png

b) Grid: true, flex: false, previous element flex: true, Flex item label class: true

Label Class: ‘oj-lg-2 oj-md-4 oj-sm-12’, Flex Item Class: ‘oj-lg-3 oj-md-5 oj-sm-12’


Description of uxextensibility205.png follows
Description of the illustration uxextensibility205.png

c) Grid: true, flex: true, Flex item label class: false

Flex Item Class: ‘oj-lg-3 oj-md-5 oj-sm-12’


Description of uxextensibility206.png follows
Description of the illustration uxextensibility206.png

Open Editor of hook function: Whatever is written inside this code editor goes inside the function.

Function has three parts:
function function_name(function_parameters) {
	Function_body
}
  1. function_name: Function name will be generated by the tool
  2. function_parameters:
    1. In case of JET components, which support value attribute for example, oj-input-text, oj-select-one etc. function parameter will be newValue as shown in the image below. newValue stores a new value of the field. To know more about JET components refer http://jet.us.oracle.com/6.1.0/jetCookbook.html.
      Description of uxextensibility207.png follows
      Description of the illustration uxextensibility207.png

    2. In case of JET components, which do not support value attribute, for example, oj-button, oj-menu, oj-file-picker etc. function parameter will be event and data as shown in the image below.
      Description of uxextensibility208.png follows
      Description of the illustration uxextensibility208.png

    3. In case of Non JET components i.e. pure html components, for example, anchor tag function parameters will be data and event as shown in the image below.
      Description of uxextensibility209.png follows
      Description of the illustration uxextensibility209.png

  3. function_body: User can write own code inside this body. If user select any REST API from REST API Chain select box, it will have some auto-generated code. Otherwise, it will be an empty body.
    There are two buttons.
    1. Save Button: It will save all the code user has written.
    2. Cancel Button: It will close the code editor without saving anything user has written after opening the code editor.

Parent topic: Available Attributes