Search code examples
javascriptodatasapui5

How to display a single entity as Popup


I am currently learning how to develop UI5 manually and without Templates. I am currently getting a model via an oData Request to a system and display the returning entity set as a table with ColumnListItems.

XML for Table view:

    <Table noDataText="Es stehen keine Aufträge in der Queue" id="table0" 
        items="{ImpMan>/QueryEntrySet}" 
        growingDirection="Downwards" 
        modeAnimationOn="false" 
        mode="SingleSelectMaster" 
        selectionChange="onSelectionChange">

       <!-- Here is column logic and ColumnListItem tags etc. -->
    </Table>

I have set the selectionChange-Listener to the method onSelectionChange.

Table view controller:

onSelectionChange: function (oEvent) {
    var oSelectedItem = oEvent.getSource().getSelectedItem();
    var context = oSelectedItem.getBindingContext("ImpMan");
    var entity = context.oModel.getProperty(context.sPath);
    alert(entity.id);
}

I am able to get the whole clicked entity and the context.sPath which shows me /EntitySet('ID'). So I know exactly which Entity was clicked on. Now i want to show all details to this entity and therefore have to pass it to the popup. I already created a fragment with an objectlistitem:

<core:FragmentDefinition xmlns:core="sap.ui.core">
<Dialog xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:cd="http://schemas.sap.com/sapui5/extension/sap.ui.core.CustomData/1" xmlns:action="http://schemas.sap.com/sapui5/extension/sap.ui.core.CustomData/1" xmlns="sap.m" id="transportDialog" title="Auftrag">
    <ObjectListItem type="Active" number="{path:'ImpMan>PIMPDATE',formatter:'.formatter.getDate'}" numberUnit="Geplanter Import" intro="Gruppe: {ImpMan>GROUP_ID}" id="item0" title="{ImpMan>TRKORR}" icon="sap-icon://product" highlight="{path:'ImpMan>CRIT',formatter:'.formatter.critState'}">
        <attributes>
            <ObjectAttribute text="{ImpMan>ID}" id="id_att"/>
            <ObjectAttribute text="{ImpMan>ID_TEXT}" id="description" title="Beschreibung"/>
            <ObjectAttribute text="{ImpMan>LAST_EDIT}" id="last_change" title="Letzte Änderung"/>
            <ObjectAttribute text="{ImpMan>CHANGEDBY}" id="editor" title="Verantwortlicher"/>
        </attributes>
    </ObjectListItem>
</Dialog>

I also know how to define the fragment as Dialog and open it. But I am unable to bind the entity I extracted from the clicked table to the new Dialog and display its values..

Can anyone help me with this? How is this supposed to work?


Solution

  • First of all it's not recomended access internal variable direct, so you have to change.

     var entity = context.oModel.getProperty(context.sPath);
    

    to

     var entity = context.getModel().getProperty(context.getPath());
    

    Now about your question, when you open a Dialog you will have a variable with you dialog, you can BindElement on that like:

    ... 
    var oDialog = sap.ui.xmlfragment(
                            "<fragment_path>", this);
    ...
    oDialog.bindElement(context.oModel.getProperty(context.getPath()));
    oDialog.open();
    ...