Created
April 27, 2012 12:20
-
-
Save elsewhat/2508753 to your computer and use it in GitHub Desktop.
SAPUI5 beta - Simple Thing Inspector component
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE HTML> | |
| <html> | |
| <head> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | |
| <title>SalesOrder sap.ui.ux3.ThingInspector</title> | |
| <script src="/sapui5/resources/sap-ui-core.js" | |
| type="text/javascript" | |
| id="sap-ui-bootstrap" | |
| data-sap-ui-libs="sap.ui.ux3,sap.ui.commons" | |
| data-sap-ui-theme="sap_goldreflection" > | |
| </script> | |
| <script> | |
| //DATA - representing the sales order | |
| //Normally, this would be fetched from an SAP backend system in OData format | |
| //Here we hardcode it in JSON format (and with only string objects) | |
| var salesOrder1 = { | |
| title:"Bouvet to ACME", | |
| subtitle:"IT consulting services", | |
| status: "Active", | |
| lastUpdated:"2012/04/27", | |
| actual_current_month : "124 000 NOK", | |
| actual_last_12_months : "12 124 000 NOK", | |
| forecast_12_months: "17 000 000 NOK", | |
| supplier: "0042 - Bouvet ASA", | |
| supplier_contract_responsible: "Dagfinn Parnas", | |
| customer: "1000 - ACME", | |
| customer_contract_responsible: "John Doe", | |
| } | |
| //let's create a second sales order that we will swap to after an action | |
| var salesOrder2 = { | |
| title:"Bouvet to ASA", | |
| subtitle:"Consulting services", | |
| status: "Inactive", | |
| lastUpdated:"2012/04/27", | |
| actual_current_month : "124 000 NOK", | |
| actual_last_12_months : "12 124 000 NOK", | |
| forecast_12_months: "17 000 000 NOK", | |
| supplier: "0042 - Bouvet ASA", | |
| supplier_contract_responsible: "Dagfinn Parnas", | |
| customer: "3000 - ASA", | |
| customer_contract_responsible: "Jane Doe", | |
| } | |
| //MODEL | |
| //create a model based on the data and bind it to sapui5 | |
| var oCurrentSalesOrderModel = new sap.ui.model.json.JSONModel(); | |
| oCurrentSalesOrderModel.setData(salesOrder1); | |
| sap.ui.getCore().setModel(oCurrentSalesOrderModel); | |
| // helper function to create a row with label and text. The text is bound to a property in the model | |
| function createRowBoundToModelProperty(sLabel, modelProperty ) { | |
| var oLabel = new sap.ui.commons.Label({text : sLabel + ":"}); | |
| var oTextView = new sap.ui.commons.TextView(); | |
| oTextView.bindProperty("text", modelProperty); | |
| var oMLCell1 = new sap.ui.commons.layout.MatrixLayoutCell({hAlign : sap.ui.commons.layout.HAlign.End, vAlign : sap.ui.commons.layout.VAlign.Top, content:[oLabel]}); | |
| var oMLCell2 = new sap.ui.commons.layout.MatrixLayoutCell({hAlign : sap.ui.commons.layout.HAlign.Begin, vAlign : sap.ui.commons.layout.VAlign.Top, content:[oTextView]}); | |
| return new sap.ui.commons.layout.MatrixLayoutRow({cells:[oMLCell1, oMLCell2]}); | |
| } | |
| //ACTIONS - Actions that can be performed on this object | |
| var oActionEdit = new sap.ui.ux3.ThingAction({id:"create", text:"Edit"}); | |
| var oActionApprove = new sap.ui.ux3.ThingAction({id:"delete", text:"Approve"}); | |
| //FACETS - Facets of this business object | |
| //These are navigation items representing different views of the business object | |
| oNIOverview = new sap.ui.ux3.NavigationItem({key:"overview", text:"Overview"}); | |
| oNIFeed = new sap.ui.ux3.NavigationItem({key:"feed", text:"Feed"}); | |
| oNIReporting = new sap.ui.ux3.NavigationItem({key:"reporting", text:"Reporting"}); | |
| oNIContacts = new sap.ui.ux3.NavigationItem({key:"contacts", text:"Contacts"}); | |
| //THING INSPECTOR - Create the actual control | |
| //titles are fetched from the model representing the business object | |
| var oThingInspector = new sap.ui.ux3.ThingInspector( | |
| { id: "Thing0001", | |
| firstTitle:"{title}", | |
| secondTitle: "{subtitle}", | |
| type: "SalesOrder", | |
| icon:"/demokit/test-resources/sap/ui/ux3/img/Account_48.png", | |
| actions: [oActionEdit, oActionApprove], | |
| facets : [ oNIOverview, oNIFeed, oNIReporting, oNIContacts] , | |
| selectedFacet:oNIOverview | |
| }); | |
| //we could have bound the model with data directly to the ThingInspector, but then TextViews do not have access to it | |
| //TODO: Probably better way to solve this | |
| //oThingInspector.setModel(oCurrentSalesOrderModel); | |
| //THING PROPERTIES - Displayed on left hand side | |
| var oTCAbout = new sap.ui.ux3.ThingGroup({title:"About"}); | |
| var oTCSupplier = new sap.ui.ux3.ThingGroup({title:"Supplier"}); | |
| var oTCCustomer = new sap.ui.ux3.ThingGroup({title:"Customer"}); | |
| //Define content for thing properties. The value of these are bound to the model | |
| var oLayout = new sap.ui.commons.layout.MatrixLayout(); | |
| oLayout.addRow(createRowBoundToModelProperty("Status", "status")); | |
| oLayout.addRow(createRowBoundToModelProperty("Last updated", "lastUpdated")); | |
| oTCAbout.addContent(oLayout); | |
| oThingInspector.addHeaderContent(oTCAbout); | |
| var oLayout2 = new sap.ui.commons.layout.MatrixLayout(); | |
| oLayout2.addRow(createRowBoundToModelProperty("Supplier", "supplier")); | |
| oLayout2.addRow(createRowBoundToModelProperty("Contact person", "supplier_contract_responsible")); | |
| oTCSupplier.addContent(oLayout2); | |
| oThingInspector.addHeaderContent(oTCSupplier); | |
| var oLayout3 = new sap.ui.commons.layout.MatrixLayout(); | |
| oLayout3.addRow(createRowBoundToModelProperty("Customer", "customer")); | |
| oLayout3.addRow(createRowBoundToModelProperty("Contact person", "customer_contract_responsible")); | |
| oTCCustomer.addContent(oLayout3); | |
| oThingInspector.addHeaderContent(oTCCustomer); | |
| //EVENTLISTENERS | |
| //if an action is selected | |
| oThingInspector.attachActionSelected(function(oControlEvent) { | |
| var id = oControlEvent.getParameters().id; | |
| alert("Action \"" + id + "\" of Thing \"" | |
| + oControlEvent.getSource().getId() + "\" selected - oAction:" + oControlEvent.getParameters().action ); | |
| //if an action was performed, we change the model used by the thing inspector | |
| //This will automatically update all properties bound to the model | |
| oCurrentSalesOrderModel.setData(salesOrder2); | |
| }); | |
| //if a navigation item(facet) is selected | |
| oThingInspector.attachFacetSelected(function(oControlEvent) { | |
| var id = oControlEvent.getParameters().id; | |
| //TODO: Bug here in that id doesn't make facet it defined earlier | |
| //alert("Facet \"" + id + "\" of Thing \"" | |
| // + oControlEvent.getSource().getId() + "\" selected"); | |
| //Update content based on the selection | |
| setContent(id); | |
| }); | |
| //if the thing inspector is closed | |
| oThingInspector.attachClose(function(oControlEvent) { | |
| var id = oControlEvent.getParameters().id; | |
| alert("Thing \""+ id+ "\"closed"); | |
| oThingInspector.destroy(); | |
| }); | |
| //set the default content | |
| setContent(oNIOverview.getKey()); | |
| //bind the control to the HTML DIV element with id TIArea | |
| oThingInspector.placeAt("TIArea"); | |
| //CONTENT - This defines the content for each of the navigation items(facets) | |
| function setContent(facetId) { | |
| oThingInspector.removeAllFacetContent(); | |
| if(facetId=="overview"){ | |
| var oTG1 = new sap.ui.ux3.ThingGroup({title:"Financial"}); | |
| var oLayout = new sap.ui.commons.layout.MatrixLayout(); | |
| oLayout.addRow(createRowBoundToModelProperty("Actuals last month", "actual_current_month")); | |
| oLayout.addRow(createRowBoundToModelProperty("Actuals 12 months", "actual_last_12_months")); | |
| oLayout.addRow(createRowBoundToModelProperty("Forecast 12 months", "forecast_12_months")); | |
| oTG1.addContent(oLayout); | |
| oThingInspector.addFacetContent(oTG1); | |
| } else { | |
| alert("Content not defined for facet id" + facetId); | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body class="sapUiBody" role="application"> | |
| <div id="TIArea">Loading...</div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hello,
I'm also trying to use the TI. In your example I see you use sap.ui.getCore().setModel to store your model. This does not work with me. The only way I get it working is by setting the model directly on the TI.
With other SAPUI5 elements the sap.ui.getCore().setModel works fine.
What version did you use to build this example? I'm guessing this does not work anymore in the latest version.
Regards,
Christophe