UI5 Programming Examples

[santhu_gowdaz]

Hi All,

First of all, I would like to tell thanks for the people who are contributed these examples in SCN.

1. Table Examples:

• Get selected table row values
  •   JS Bin - Collaborative JavaScript Debugging
• Getting Table Column Values(To get all the values available in the particular row)
  •   http://jsbin.com/tipokenuki/1/edit?html,js,console,output
• Get Table row data by rowContext(),
  •   JS Bin - Collaborative JavaScript Debugging
• Delete table rows,

  • JS Bin - Collaborative JavaScript Debugging

  • JS Bin - Collaborative JavaScript Debugging

  • JS Bin - Collaborative JavaScript Debugging

  • http://jsbin.com/dohive/edit?html,js,output

• Add and Delete Table Row values,

• http://jsbin.com/wanopave/1/edit?html,output
• F4 inside table row(F4 value help in Inside sap.m.table)
  • https://jsfiddle.net/indrajithpatel/va0y7j7r/18/
• Table rows move up and down(Interchanging the table rows)
  • JS Bin - Collaborative JavaScript Debugging</title>  <link rel="alternate" type=&...
• Set firstColumnCount based on List(Pagination based on given input in sap.ui.table rows)
  • JS Bin - Collaborative JavaScript Debugging</title>  <link rel="alternate" type=&...
• Import csv as table values
  • http://help.sap.com/businessobject/product_guides/vi01/en/webide_visExp_en.pdf
• Add Values into Table(Given input is adding to table row)
  • JS Bin - Collaborative JavaScript Debugging
• Table view more, view less with out using growth property(using button number of rows displayed)
  • JS Bin - Collaborative JavaScript Debugging
• Sap.ui.Table Binding
  • JS Bin - Collaborative JavaScript Debugging</title> <link rel="alternate" type=&q...
• Table Rebinding after adding some value to the table,
  • http://jsbin.com/sojot/1/edit?html,output
• Table Merge Cells,
  • http://jsbin.com/zoreg/2/edit?html,output
• Muitiple table header fixedRowCount
  • http://jsbin.com/qixahidila/1/edit?js,output
• Mouse Over and Mouse Leave event in table,
  • http://jsbin.com/dohive/edit?html,js,output

2. Combo Box Examples:

• ComboBox in table,
  • http://jsbin.com/hakizo/5/edit?js,output
  • http://jsfiddle.net/ojukwe80/1/
• Multi Select Combo Box,
  • http://jsbin.com/qahoy/3/edit?html,output
  • http://jsbin.com/dujira/2/edit?html,js,output
• Combo box,
  • http://jsbin.com/nudacelo/1/edit?html,js,output
• Get selected Item in combobox,
  • http://jsbin.com/nehimo/edit?js,output

3. Navigation Between Views:

• Values Pass between List to Detail-
  
  • http://output.jsbin.com/URIviru/2
  • http://embed.plnkr.co/SbF5ZSV4EzxiltkPytUm/preview
  • http://jsbin.com/openui5-mobile-list-databinding/2/edit?html,output
  • http://scn.sap.com/thread/3496717
• Master/Detail example,
  • http://jsfiddle.net/brakmic/shcoqpue/

4. chart Examples,

• customize the chart and you can get code for that customized chart,
  • Chart Demo
• sap.viz.ui5.Bar example,
  • http://jsbin.com/ziwinikodo/1/edit?html,output
• sap.viz.ui5.Stacked Chart,
  • http://jsbin.com/hepuxiza/17/edit?html,js,output
• Get selected Bar Values in graph,
  • http://jsbin.com/lelano/edit?html,output

5. Drag and Drop Examples:

• Drag and Drop in Multi Combo Box,
  • http://jsbin.com/hudowu/edit?js,output

6. Tree Table Examples:

• Tree Table with Dynamic Columns,
  • http://jsbin.com/narufu/edit?html,output
• Tree Table,
  • https://jsfiddle.net/nagarjunnm/gyvy7vp0/
  • https://sapui5.netweaver.ondemand.com/sdk/test-resources/sap/ui/table/TreeTable.html?sap-ui-debug=tr...
• Tree Table with Select Option,
  • http://jsbin.com/woqive/edit?html,js,output

7. Generate Pdf Examples:

Export to Pdf from UI5 side,

http://jsfiddle.net/54muk2ps/

8. Tab Examples:

• Tab in ui5(Pressing Tab will focus on input fields)
  • Navigate across sapui5 table using arrow key
  • jQuery autotab examples
  • jQuery Plugin For Auto Tab Form Fields - autotab | Free jQuery Plugins

9. Search Examples:

• Search the vales in list,
  • http://jsbin.com/vigeg/1/edit?js,output
• Search field will filter the data by given inputs
  • SAPUI5: How to filter data with 2 or more values - Stack Overflow
• Input With Suggestion,
  • http://jsbin.com/qobuma/edit?html,js,output

10. Layout Examples:

• JS Bin - Collaborative JavaScript Debugging
• JS Bin - Collaborative JavaScript Debugging
• Form Editable True or False from Model,
  • http://jsbin.com/datumu/edit?js,output
• overlay container,
  • http://jsbin.com/afif/1/edit?html,js,output
• Simple Form in a panel
  • JS Bin - Collaborative JavaScript Debugging

11. Formatter Examples:

• Date Time input Display only year, Time etc,.
  • http://jsbin.com/qovahoxoge/edit?html,js,output
• Amount Format using Formatter,
  • http://jsbin.com/eXeBOcE/3/edit?html,output
• Table Format date to dd.MM.YYYY,
  • http://jsbin.com/aNebeKi/1/edit?html,output
• oData Table Filter,
  • sapui5bin/ODataDateTableFilter.html at master · qmacro/sapui5bin · GitHub

12. Css Examples:

• Table row color using Formatter,
  • JS Bin - Collaborative JavaScript Debugging
• Text color using formatter,
  • JS Bin - Collaborative JavaScript Debugging

13. Busy Dialog Examples:

• http://jsbin.com/dogigehaja/8/edit?html,js,output
• JS Bin - Collaborative JavaScript Debugging
• https://jsfiddle.net/indrajithpatel/xxsd9jkd/1/
• JS Bin - Collaborative JavaScript Debugging
• JS Bin - Collaborative JavaScript Debugging
• http://jsbin.com/bopakulaqe/1/edit?html,output

14. Others:

• Get selected radio button,
  • http://jsbin.com/yanoka/edit?html,js,output
• List Box,
  • http://jsbin.com/qanagaqe/1/edit?html,js,output
• Virtual KeyBoard,
  • http://jsbin.com/dacuzu/edit?html,js,output
• sap.m.VBox footer example,
  • http://jsbin.com/raniya/edit?html,css,js,output
• Move Item from one Json Model to another Json Model,
  • http://jsbin.com/dupoxi/edit?css,js,output
• List Data Binding
  • JS Bin - Collaborative JavaScript Debugging</title> <link rel="alternate" type=&q...
• Custom Control
  • JS Bin - Collaborative JavaScript Debugging</title> <link rel="alternate" type=&q...
• Signature Pad,
  • http://jsbin.com/suquki/18/edit?html,js,output
• Toggle button in pop up,
  • http://jsbin.com/rodudup/edit?html,js,output
• Nested Pop over,
  • http://jsbin.com/tujube/2/edit?html,js,output
• DropDown in panel header,
  • http://jsbin.com/gejafa/edit?html,js,output
• Input editable and read only,
  • http://jsbin.com/qaraga/edit?html,js,output
• sap.m.select with default text “—select—“
  • http://jsbin.com/wikavu/edit?js,output
• ListItem by default 1^st item is selected,
  • http://jsbin.com/juluqu/edit?html,js,output
• Dialog button’s
  • http://jsbin.com/miqigu/edit?html,js,output
• Add Clear icon to sap.m.input,
  • http://jsbin.com/purixu/edit?html,output
• Float Label example,
  • http://jsbin.com/nulosa/edit?css,js,output

SDK Provided examples.

For .js View Programming examples - SAPUI5 SDK - Demo Kit

For .xml View Programming examples - SAPUI5 Explored

Regards,

Santhosh Gowda