You are on page 1of 5

Screen Elements are of Two Types

1. Simple Screen Elements


2. Complex Screen Elements

__________________________________________________________
Simple Screen Elements Property
__________________________________________________________

Label text
Text text
Input value
CheckBox selected
Switch state
Image src
Link text , href
RatingIndicator value, maxValue
ProgressIndicator percentValue
Slider value, max
DatePicker value
TimePicker value
TextArea value, rows, cols
___________________________________________________________

___________________________________________________________________________________
______
Complex Screen Elements AggregationProperty InternalScreenElement Property

___________________________________________________________________________________
______

Select(DropdownBox) items Item key, text

ComboBox items Item key, text

MultiComboBox items Item key, text

MultiInput suggestionItems Item key, text

RadioButtonGroup buttons RadioButton text

Tokenizer tokens Token text

Breadcrumbs links Link text , href

List items StandardListItem title, description,


info, counter
/ObjectListItem

Table items Any Screen Element property depends


on ScreenElement
(Text,Input,Image,Slider etc) (text, value, src,
value)

MicroChart data MicroChartData text ( X-Axis )


value ( Y-Axis )
Charts data DimensionDefinition(X-Axis) value( X-
Axis )
MeasureDefinition (Y-Axis) value( Y-Axis )
___________________________________________________________________________________
______________

Note : All the Above Complex Screen Elements can be used in Two Ways:
1. by Populating Static Values ( Hard-Coded Values )
2. by Populating Dynamic Values ( Backend Values Via OData Service )
_________________________________________________________________________

Creating SimpleForm with below Screen Elements


-----------------------------------------------------------------------------

Label Select ( DropdownBox ) with static values


Label CombobBox with static values
Label MultiComboBox with static values
Label MultiInput with static values
Label RadioButtonGroup with static values
Label Tokenizer with static values
Label Breadcrumbs with static values
___________________________________________________________

Select ( DropdownBox ) with Static Values


--------------------------------------------------------------------

open object.view.XML File -> go inside SimpleForm

Implement below code:


_______________________

<Label text="Select Country" textDirection="RTL" design="Bold" />


<Select width="250px">
<items>
<core:Item key="IN" text="INDIA" />
<core:Item key="US" text="USA" />
<core:Item key="UK" text="UK" />
<core:Item key="CA" text="CANADA" />
<core:Item key="IT" text="ITALY" />
<core:Item key="IR" text="IRAN" />
<core:Item key="CH" text="CHINA" />
</items>
</Select>
___________________________________________________________________________________
__

ComboBox with Static Values


--------------------------------------------

Select (DropdownBox ) Allows enduser to select value from Existing List only

ComboBox Allows enduser to select value from Existing List


or
Allows enduser to enter new value at runtime

ComboBox = Combination ( DropdownBox / Input )

_____________________________________________________________
implement below code

<Label text="Select Country" textDirection="RTL" design="Bold" />


<ComboBox width="250px">
<items>
<core:Item key="IN" text="INDIA" />
<core:Item key="US" text="USA" />
<core:Item key="UK" text="UK" />
<core:Item key="CA" text="CANADA" />
<core:Item key="IT" text="ITALY" />
<core:Item key="IR" text="IRAN" />
<core:Item key="CH" text="CHINA" />
</items>
</ComboBox>
__________________________________________________________________________________

MultiComboBox with static values:


--------------------------------------------------------

MultiComboBox allows Enduser to Select Multiple Values

implement below code:


______________________________

<Label text="Select Country" textDirection="RTL" design="Bold" />


<MultiComboBox width="250px">
<items>
<core:Item key="IN" text="INDIA" />
<core:Item key="US" text="USA" />
<core:Item key="UK" text="UK" />
<core:Item key="CA" text="CANADA" />
<core:Item key="IT" text="ITALY" />
<core:Item key="IR" text="IRAN" />
<core:Item key="CH" text="CHINA" />
</items>
</MultiComboBox>
_______________________________________________________________________________

MultiInput with Static values:


----------------------------------------------------------

MultiInput allows enduser to select Multiple Values


MultiInput requires some Input ( atleast starting lettter ) to show list of values

Implement below code:


_____________________________

<Label text="Select Country" textDirection="RTL" design="Bold" />


<MultiInput width="250px">
<suggestionItems>
<core:Item key="IN" text="INDIA" />
<core:Item key="US" text="USA" />
<core:Item key="UK" text="UK" />
<core:Item key="CA" text="CANADA" />
<core:Item key="IT" text="ITALY" />
<core:Item key="IR" text="IRAN" />
<core:Item key="CH" text="CHINA" />
</suggestionItems>
</MultiInput>

___________________________________________________________________________________
__

RadioButtonGroup with Static Values:


----------------------------------------------------------

implement below code:


______________________

<Label text="Select Country" textDirection="RTL" design="Bold" />


<RadioButtonGroup columns="1">
<buttons>
<RadioButton text="INDIA" />
<RadioButton text="USA" />
<RadioButton text="UK" />
<RadioButton text="CHINA" />
<RadioButton text="CANADA" />
<RadioButton text="ITALY" />
</buttons>
</RadioButtonGroup>
_______________________________________________________________________________

Tokenizer with static Values:


-------------------------------------------

Tokenizer is mainly used to display list of values

implement below code:


_____________________________________

<Label text="Select Country" textDirection="RTL" design="Bold" />


<Tokenizer>
<tokens>
<Token text="INDIA" />
<Token text="USA" />
<Token text="UK" />
<Token text="CANADA" />
<Token text="CHINA" />
<Token text="JAPAN" />
</tokens>
</Tokenizer>
_______________________________________________________________________________

Breadcrumbs with Static values:


--------------------------------------------------

implement below code:


__________________________

<Label text="Select Person" textDirection="RTL" design="Bold" />


<Breadcrumbs>
<links>
<Link text="MS Dhoni" href="http://www.google.com/search?q=MS Dhoni"
target="_blank" />
<Link text="Sachin" href="http://www.google.com/search?
q=Sachin" target="_blank" />
<Link text="KL Rahul" href="http://www.google.com/search?q=KL
Rahul" target="_blank" />
<Link text="Sanju Samson" href="http://www.google.com/search?
q=Sanju Samson" target="_blank" />
<Link text="Kane Williamson" href="http://www.google.com/search?
q=Kane Williamson" target="_blank" />
</links>
</Breadcrumbs>
_______________________________________________________________________________

................Next Session -> Same screen elements but with Dynamic backend
values via OData Service

You might also like