File
Login or Register via GitHub
<html><head> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>sap.f.DynamicPage test page</title> <script src="shared-config.js"></script> <script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" data-sap-ui-theme="sap_fiori_3" data-sap-ui-xx-bindingSyntax="complex" id="sap-ui-bootstrap" data-sap-ui-libs="sap.m, sap.f"> </script> <style>html, body, .container {height: 100%}</style> <script id="view1" type="sapui5/xmlview"><mvc:View controllerName="dynamicPageController" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:f="sap.f" xmlns:layout="sap.ui.layout" height="100%"> <f:DynamicPage id="dynamicPageId" headerExpanded="true" preserveHeaderStateOnScroll="true" stickySubheaderProvider="iconTabBar" class="sapUiNoContentPadding" go="true" toggleHeaderOnTitleClick="{/titleClickable}"> <!-- DynamicPage Title --> <f:title> <f:DynamicPageTitle> <f:heading> <Title text="Header Title"/> </f:heading> <f:breadcrumbs> <Breadcrumbs> <Link text="Home" /> <Link text="Page 1" /> <Link text="Page 2" /> <Link text="Page 3" /> <Link text="Page 4" /> <Link text="Page 5" /> </Breadcrumbs> </f:breadcrumbs> <f:expandedContent> <Label text="This is a subheading"/> </f:expandedContent> <f:snappedContent> <Label text="This is a subheading"/> </f:snappedContent> <f:snappedTitleOnMobile> <Title text="This is a subheading"/> </f:snappedTitleOnMobile> <f:content> <OverflowToolbar> <GenericTag text="SR" status="Error" press="onGenericTagPress" design="StatusIconHidden"> <ObjectNumber number="2" unit="M" emphasized="false" state="Error"/> </GenericTag> </OverflowToolbar> </f:content> <f:actions> <Button text="Edit" type="Emphasized"/> <Button text="Delete" type="Transparent"/> <Button text="Copy" type="Transparent"/> <Button text="Toggle Footer" type="Transparent" press="onToggleFooter"/> <Button icon="sap-icon://action" type="Transparent"/> </f:actions> <f:navigationActions> <Button icon="sap-icon://full-screen" type="Transparent" /> <Button icon="sap-icon://decline" type="Transparent" /> </f:navigationActions> </f:DynamicPageTitle> </f:title> <!-- DynamicPage Header --> <f:header> <f:DynamicPageHeader pinnable="true"> <layout:HorizontalLayout allowWrapping="true"> <layout:VerticalLayout class="sapUiMediumMarginEnd"> <ObjectAttribute title="Location" text="Warehouse A"/> <ObjectAttribute title="Halway" text="23L"/> <ObjectAttribute title="Rack" text="34"/> </layout:VerticalLayout> <layout:VerticalLayout> <ObjectAttribute title="Availability"/> <ObjectStatus text="In Stock" state="Success" /> </layout:VerticalLayout> </layout:HorizontalLayout> </f:DynamicPageHeader> </f:header> <f:content> <IconTabBar id="iconTabBar" class="sapUiResponsiveContentPadding"> <items> <IconTabFilter text="Products"> <Table id="idProductsTable" inset="false" sticky="HeaderToolbar,ColumnHeaders" items="{ path: '/ProductCollection', sorter: { path: 'Name' } }" class="sapUiSmallNegativeMarginBeginEnd" width="auto"> <headerToolbar> <Toolbar> <Label text="Cars"></Label> </Toolbar> </headerToolbar> <columns> <Column width="12em"> <Text text="Product" /> </Column> <Column minScreenWidth="Tablet" demandPopin="true"> <Text text="Supplier" /> </Column> <Column minScreenWidth="Tablet" demandPopin="true" hAlign="End"> <Text text="Dimensions" /> </Column> <Column hAlign="End"> <Text text="Price" /> </Column> </columns> <items> <ColumnListItem> <cells> <ObjectIdentifier title="{Name}" text="{ProductId}"/> <Text text="{SupplierName}" /> <Text text="{Width} x {Depth} x {Height} {DimUnit}" /> <ObjectNumber number="{ parts:[{path:'Price'},{path:'CurrencyCode'}], type: 'sap.ui.model.type.Currency', formatOptions: {showMeasure: false} }" unit="{CurrencyCode}" /> </cells> </ColumnListItem> </items> </Table> </IconTabFilter> <IconTabFilter text="Attachments"> <Text text="Attachments go here ..." /> </IconTabFilter> <IconTabFilter text="Notes"> <Text text="Notes go here ..." /> </IconTabFilter> <IconTabFilter text="People"> <Text text="People content goes here ..." /> </IconTabFilter> </items> </IconTabBar> </f:content> <!-- DynamicPage Footer --> <f:footer> <OverflowToolbar> <Button icon="sap-icon://message-popup" text="{/messagesLength}" type="Emphasized" press="onMessageButtonPress" visible="{= !!${/messagesLength}}"/> <ToolbarSpacer/> <Button type="Accept" text="Accept"/> <Button type="Reject" text="Reject"/> </OverflowToolbar> </f:footer> </f:DynamicPage></mvc:View> </script></head><body id="body" class="sapUiBody"> <script> (function (jQuery) { sap.ui.controller("dynamicPageController", { onInit: function() { var oData = { "ProductCollection": [ { "ProductId": "HT-1000", "Category": "Laptops", "MainCategory": "Computer Systems", "TaxTarifCode": "1", "SupplierName": "Very Best Screens", "WeightMeasure": 4.2, "WeightUnit": "KG", "Description": "Notebook Basic 15 with 2,80 GHz quad core, 15\" LCD, 4 GB DDR3 RAM, 500 GB Hard Disc, Windows 8 Pro", "Name": "Notebook Basic 15", "DateOfSale": "2017-03-26", "ProductPicUrl": "test-resources/sap/ui/documentation/sdk/images/HT-1000.jpg", "Status": "Available", "Quantity": 10, "UoM": "PC", "CurrencyCode": "EUR", "Price": 956, "Width": 30, "Depth": 18, "Height": 3, "DimUnit": "cm" }, { "ProductId": "HT-1001", "Category": "Laptops", "MainCategory": "Computer Systems", "TaxTarifCode": "1", "SupplierName": "Very Best Screens", "WeightMeasure": 4.5, "WeightUnit": "KG", "Description": "Notebook Basic 17 with 2,80 GHz quad core, 17\" LCD, 4 GB DDR3 RAM, 500 GB Hard Disc, Windows 8 Pro", "Name": "Notebook Basic 17", "DateOfSale": "2017-04-17", "ProductPicUrl": "test-resources/sap/ui/documentation/sdk/images/HT-1001.jpg", "Status": "Available", "Quantity": 20, "UoM": "PC", "CurrencyCode": "EUR", "Price": 1249, "Width": 29, "Depth": 17, "Height": 3.1, "DimUnit": "cm" }, { "ProductId": "HT-1002", "Category": "Laptops", "MainCategory": "Computer Systems", "TaxTarifCode": "1", "SupplierName": "Very Best Screens", "WeightMeasure": 4.2, "WeightUnit": "KG", "Description": "Notebook Basic 18 with 2,80 GHz quad core, 18\" LCD, 8 GB DDR3 RAM, 1000 GB Hard Disc, Windows 8 Pro", "Name": "Notebook Basic 18", "DateOfSale": "2017-01-07", "ProductPicUrl": "test-resources/sap/ui/documentation/sdk/images/HT-1002.jpg", "Status": "Available", "Quantity": 10, "UoM": "PC", "CurrencyCode": "EUR", "Price": 1570, "Width": 28, "Depth": 19, "Height": 2.5, "DimUnit": "cm" }, { "ProductId": "HT-1003", "Category": "Laptops", "MainCategory": "Computer Systems", "TaxTarifCode": "1", "SupplierName": "Smartcards", "WeightMeasure": 4.2, "WeightUnit": "KG", "Description": "Notebook Basic 19 with 2,80 GHz quad core, 19\" LCD, 8 GB DDR3 RAM, 1000 GB Hard Disc, Windows 8 Pro", "Name": "Notebook Basic 19", "DateOfSale": "2017-04-09", "ProductPicUrl": "test-resources/sap/ui/documentation/sdk/images/HT-1003.jpg", "Status": "Available", "Quantity": 15, "UoM": "PC", "CurrencyCode": "EUR", "Price": 1650, "Width": 32, "Depth": 21, "Height": 4, "DimUnit": "cm" }, { "ProductId": "HT-1007", "Category": "Accessories", "MainCategory": "Computer Components", "TaxTarifCode": "1", "SupplierName": "Technocom", "WeightMeasure": 0.2, "WeightUnit": "KG", "Description": "Digital Organizer with State-of-the-Art Storage Encryption", "Name": "ITelO Vault", "DateOfSale": "2017-05-17", "ProductPicUrl": "test-resources/sap/ui/documentation/sdk/images/HT-1007.jpg", "Status": "Available", "Quantity": 15, "UoM": "PC", "CurrencyCode": "EUR", "Price": 299, "Width": 32, "Depth": 22, "Height": 3, "DimUnit": "cm" }, { "ProductId": "HT-1010", "Category": "Accessories", "MainCategory": "Computer Systems", "TaxTarifCode": "1", "SupplierName": "Very Best Screens", "WeightMeasure": 4.3, "WeightUnit": "KG", "Description": "Notebook Professional 15 with 2,80 GHz quad core, 15\" Multitouch LCD, 8 GB DDR3 RAM, 500 GB SSD - DVD-Writer (DVD-R/+R/-RW/-RAM),Windows 8 Pro", "Name": "Notebook Professional 15", "DateOfSale": "2017-02-22", "ProductPicUrl": "test-resources/sap/ui/documentation/sdk/images/HT-1010.jpg", "Status": "Available", "Quantity": 16, "UoM": "PC", "CurrencyCode": "EUR", "Price": 1999, "Width": 33, "Depth": 20, "Height": 3, "DimUnit": "cm" }, { "ProductId": "HT-1011", "Category": "Laptops", "MainCategory": "Computer Systems", "TaxTarifCode": "1", "SupplierName": "Very Best Screens", "WeightMeasure": 4.1, "WeightUnit": "KG", "Description": "Notebook Professional 17 with 2,80 GHz quad core, 17\" Multitouch LCD, 8 GB DDR3 RAM, 500 GB SSD - DVD-Writer (DVD-R/+R/-RW/-RAM),Windows 8 Pro", "Name": "Notebook Professional 17", "DateOfSale": "2017-01-02", "ProductPicUrl": "test-resources/sap/ui/documentation/sdk/images/HT-1011.jpg", "Status": "Available", "Quantity": 17, "UoM": "PC", "CurrencyCode": "EUR", "Price": 2299, "Width": 33, "Depth": 23, "Height": 2, "DimUnit": "cm" }, { "ProductId": "HT-1020", "Category": "Accessories", "MainCategory": "Computer Components", "TaxTarifCode": "1", "SupplierName": "Technocom", "WeightMeasure": 0.16, "WeightUnit": "KG", "Description": "Digital Organizer with State-of-the-Art Encryption for Storage and Network Communications", "Name": "ITelO Vault Net", "DateOfSale": "2017-05-08", "ProductPicUrl": "test-resources/sap/ui/documentation/sdk/images/HT-1020.jpg", "Status": "Available", "Quantity": 14, "UoM": "PC", "CurrencyCode": "EUR", "Price": 459, "Width": 10, "Depth": 1.8, "Height": 17, "DimUnit": "cm" }, { "ProductId": "HT-1021", "Category": "Accessories", "MainCategory": "Computer Components", "TaxTarifCode": "1", "SupplierName": "Technocom", "WeightMeasure": 0.18, "WeightUnit": "KG", "Description": "Digital Organizer with State-of-the-Art Encryption for Storage and Secure Stellite Link", "Name": "ITelO Vault SAT", "DateOfSale": "2017-06-30", "ProductPicUrl": "test-resources/sap/ui/documentation/sdk/images/HT-1021.jpg", "Status": "Available", "Quantity": 50, "UoM": "PC", "CurrencyCode": "EUR", "Price": 149, "Width": 11, "Depth": 1.7, "Height": 18, "DimUnit": "cm" }, { "ProductId": "HT-1022", "Category": "Accessories", "MainCategory": "Computer Components", "TaxTarifCode": "1", "SupplierName": "Technocom", "WeightMeasure": 0.2, "WeightUnit": "KG", "Description": "32 GB Digital Assistant with high-resolution color screen", "Name": "Comfort Easy", "DateOfSale": "2017-03-02", "ProductPicUrl": "test-resources/sap/ui/documentation/sdk/images/HT-1022.jpg", "Status": "Available", "Quantity": 30, "UoM": "PC", "CurrencyCode": "EUR", "Price": 1679, "Width": 84, "Depth": 1.5, "Height": 14, "DimUnit": "cm" }, { "ProductId": "HT-1023", "Category": "Accessories", "MainCategory": "Computer Components", "TaxTarifCode": "1", "SupplierName": "Technocom", "WeightMeasure": 0.8, "WeightUnit": "KG", "Description": "64 GB Digital Assistant with high-resolution color screen and synthesized voice output", "Name": "Comfort Senior", "DateOfSale": "2017-02-25", "ProductPicUrl": "test-resources/sap/ui/documentation/sdk/images/HT-1023.jpg", "Status": "Available", "Quantity": 24, "UoM": "PC", "CurrencyCode": "EUR", "Price": 512, "Width": 80, "Depth": 1.6, "Height": 13, "DimUnit": "cm" }, { "ProductId": "HT-1030", "Category": "Flat Screen Monitors", "MainCategory": "Computer Components", "TaxTarifCode": "1", "SupplierName": "Very Best Screens", "WeightMeasure": 21, "WeightUnit": "KG", "Description": "Optimum Hi-Resolution max. 1920 x 1080 @ 85Hz, Dot Pitch: 0.27mm", "Name": "Ergo Screen E-I", "ProductPicUrl": "test-resources/sap/ui/documentation/sdk/images/HT-1030.jpg", "Status": "Available", "Quantity": 14, "UoM": "PC", "CurrencyCode": "EUR", "Price": 230, "Width": 37, "Depth": 12, "Height": 36, "DimUnit": "cm" }, { "ProductId": "HT-1031", "Category": "Flat Screen Monitors", "MainCategory": "Computer Components", "TaxTarifCode": "1", "SupplierName": "Very Best Screens", "WeightMeasure": 21, "WeightUnit": "KG", "Description": "Optimum Hi-Resolution max. 1920 x 1200 @ 85Hz, Dot Pitch: 0.26mm", "Name": "Ergo Screen E-II", "ProductPicUrl": "test-resources/sap/ui/documentation/sdk/images/HT-1031.jpg", "Status": "Available", "Quantity": 24, "UoM": "PC", "CurrencyCode": "EUR", "Price": 285, "Width": 40.8, "Depth": 19, "Height": 43, "DimUnit": "cm" }, { "ProductId": "HT-1032", "Category": "Flat Screen Monitors", "MainCategory": "Computer Components", "TaxTarifCode": "1", "SupplierName": "Very Best Screens", "WeightMeasure": 21, "WeightUnit": "KG", "Description": "Optimum Hi-Resolution max. 2560 x 1440 @ 85Hz, Dot Pitch: 0.25mm", "Name": "Ergo Screen E-III", "ProductPicUrl": "test-resources/sap/ui/documentation/sdk/images/HT-1032.jpg", "Status": "Available", "Quantity": 50, "UoM": "PC", "CurrencyCode": "EUR", "Price": 345, "Width": 40.8, "Depth": 19, "Height": 43, "DimUnit": "cm" }, { "ProductId": "HT-1035", "Category": "Flat Screen Monitors", "MainCategory": "Computer Components", "TaxTarifCode": "1", "SupplierName": "Very Best Screens", "WeightMeasure": 14, "WeightUnit": "KG", "Description": "Optimum Hi-Resolution max. 1600 x 1200 @ 85Hz, Dot Pitch: 0.24mm", "Name": "Flat Basic", "ProductPicUrl": "test-resources/sap/ui/documentation/sdk/images/HT-1035.jpg", "Status": "Available", "Quantity": 23, "UoM": "PC", "CurrencyCode": "EUR", "Price": 399, "Width": 39, "Depth": 20, "Height": 41, "DimUnit": "cm" }, { "ProductId": "HT-1036", "Category": "Flat Screen Monitors", "MainCategory": "Computer Components", "TaxTarifCode": "1", "SupplierName": "Very Best Screens", "WeightMeasure": 15, "WeightUnit": "KG", "Description": "Optimum Hi-Resolution max. 2048 x 1080 @ 85Hz, Dot Pitch: 0.26mm", "Name": "Flat Future", "ProductPicUrl": "test-resources/sap/ui/documentation/sdk/images/HT-1036.jpg", "Status": "Available", "Quantity": 22, "UoM": "PC", "CurrencyCode": "EUR", "Price": 430, "Width": 45, "Depth": 26, "Height": 46, "DimUnit": "cm" }, { "ProductId": "HT-1037", "Category": "Flat Screen Monitors", "MainCategory": "Computer Components", "TaxTarifCode": "1", "SupplierName": "Very Best Screens", "WeightMeasure": 17, "WeightUnit": "KG", "Description": "Optimum Hi-Resolution max. 2016 x 1512 @ 85Hz, Dot Pitch: 0.24mm", "Name": "Flat XL", "ProductPicUrl": "test-resources/sap/ui/documentation/sdk/images/HT-1037.jpg", "Status": "Available", "Quantity": 23, "UoM": "PC", "CurrencyCode": "EUR", "Price": 1230, "Width": 54.5, "Depth": 22.1, "Height": 39.1, "DimUnit": "cm" }, { "ProductId": "HT-1040", "Category": "Printers", "MainCategory": "Printers & Scanners", "TaxTarifCode": "1", "SupplierName": "Alpha Printers", "WeightMeasure": 32, "WeightUnit": "KG", "Description": "Print 2400 dpi image quality color documents at speeds of up to 32 ppm (color) or 36 ppm (monochrome), letter/A4. Powerful 500 MHz processor, 512MB of memory", "Name": "Laser Professional Eco", "ProductPicUrl": "test-resources/sap/ui/documentation/sdk/images/HT-1040.jpg", "Status": "Available", "Quantity": 21, "UoM": "PC", "CurrencyCode": "EUR", "Price": 830, "Width": 51, "Depth": 46, "Height": 30, "DimUnit": "cm" }, { "ProductId": "HT-1041", "Category": "Printers", "MainCategory": "Printers & Scanners", "TaxTarifCode": "1", "SupplierName": "Alpha Printers", "WeightMeasure": 23, "WeightUnit": "KG", "Description": "Up to 22 ppm color or 24 ppm monochrome A4/letter, powerful 500 MHz processor and 128MB of memory", "Name": "Laser Basic", "ProductPicUrl": "test-resources/sap/ui/documentation/sdk/images/HT-1041.jpg", "Status": "Available", "Quantity": 8, "UoM": "PC", "CurrencyCode": "EUR", "Price": 490, "Width": 48, "Depth": 42, "Height": 26, "DimUnit": "cm" }, { "ProductId": "HT-1042", "Category": "Printers", "MainCategory": "Printers & Scanners", "TaxTarifCode": "1", "SupplierName": "Alpha Printers", "WeightMeasure": 17, "WeightUnit": "KG", "Description": "Print up to 25 ppm letter and 24 ppm A4 color or monochrome, with Available first-page-out-time of less than 13 seconds for monochrome and less than 15 seconds for color", "Name": "Laser Allround", "ProductPicUrl": "test-resources/sap/ui/documentation/sdk/images/HT-1042.jpg", "Status": "Available", "Quantity": 9, "UoM": "PC", "CurrencyCode": "EUR", "Price": 349, "Width": 53, "Depth": 50, "Height": 65, "DimUnit": "cm" }, { "ProductId": "HT-1050", "Category": "Printers", "MainCategory": "Printers & Scanners", "TaxTarifCode": "1", "SupplierName": "Alpha Printers", "WeightMeasure": 3, "WeightUnit": "KG", "Description": "4800 dpi x 1200 dpi - up to 35 ppm (mono) / up to 34 ppm (color) - capacity: 250 sheets - Hi-Speed USB, Ethernet", "Name": "Ultra Jet Super Color", "ProductPicUrl": "test-resources/sap/ui/documentation/sdk/images/HT-1050.jpg", "Status": "Available", "Quantity": 17, "UoM": "PC", "CurrencyCode": "EUR", "Price": 139, "Width": 41, "Depth": 41, "Height": 28, "DimUnit": "cm" }]}; var oModel = new sap.ui.model.json.JSONModel(oData); this.getView().setModel(oModel); }, scrollToCell: function() { var table = this.getView().byId("idProductsTable"); table.scrollToIndex(1); }, scrollToBlock: function() { var block = this.getView().byId("targetBlock").getDomRef(), scrollE = this.getView().byId("dynamicPageId").getScrollDelegate(); scrollE.scrollToElement(block); } }); sap.ui.xmlview({viewContent:jQuery('#view1').html()}).placeAt("content"); }(jQuery)) </script> <div class="container" id="content"></div></body></html>
Output
300px
300px
You can jump to the latest bin by adding /latest to your URL
Keyboard Shortcuts
| Shortcut | Action |
|---|---|
| ctrl + [num] | Toggle nth panel |
| ctrl + 0 | Close focused panel |
| ctrl + enter | Re-render output. If console visible: run JS in console |
| Ctrl + l | Clear the console |
| ctrl + / | Toggle comment on selected lines |
| ctrl + ] | Indents selected lines |
| ctrl + [ | Unindents selected lines |
| tab | Code complete & Emmet expand |
| ctrl + shift + L | Beautify code in active panel |
| ctrl + s | Save & lock current Bin from further changes |
| ctrl + shift + s | Open the share options |
| ctrl + y | Archive Bin |
Complete list of JS Bin shortcuts | |
JS Bin URLs
| URL | Action |
|---|---|
| / | Show the full rendered output. This content will update in real time as it's updated from the /edit url. |
| /edit | Edit the current bin |
| /watch | Follow a Code Casting session |
| /embed | Create an embeddable version of the bin |
| /latest | Load the very latest bin (/latest goes in place of the revision) |
| /[username]/last | View the last edited bin for this user |
| /[username]/last/edit | Edit the last edited bin for this user |
| /[username]/last/watch | Follow the Code Casting session for the latest bin for this user |
| /quiet | Remove analytics and edit button from rendered output |
| .js | Load only the JavaScript for a bin |
| .css | Load only the CSS for a bin |
Except for username prefixed urls, the url may start with http://jsbin.com/abc and the url fragments can be added to the url to view it differently. | |
public
0viewers