#StackBounty: #javascript #navigation #sapui5 #sap Navigate to same Detail View with Animation in SplitApp

Bounty: 50

I’m using a Split App which has

  1. Master list
  2. 3 Detail Pages

MAster List shows a list of items ( here for example, bikes and cars list)

These are 3 detail pages:

  1. Message page: for not found/welcome page when nothing is clicked on master list.
  2. BikeProperties Page: which shows details if Bike is clicked.
  3. CarProperties Page: which shows if Car is clicked.

Now, the issue is when I click on Car Product, there is an animation shown which navigates from say welcome page to car page.

However, if I click again a car product, binding is updated with no animation.

Similarly, if I select a Bike at this point ( after selecting car), the navigation happens with animation.

So, to summarize,

  1. No animation is shown if same page is shown again in detail page.
  2. Animation is shown when different detail page is loaded.

However, what I want is , irrespective of which detail page is currently shown, the navigation should happen again with animation so consistency with animation is maintained.

Also, please note that I cannot use hash based routing as this split app needs to be displayed in a dialog box.

Below is the dummy code:

App.view.xml

<mvc:View controllerName="com.sap.SplitApp.controller.App" xmlns:mvc="sap.ui.core.mvc" xmlns:core="sap.ui.core" displayBlock="true"
xmlns="sap.m">
<Shell id="shell">
    <App>
        <SplitApp id="app">
            <masterPages>
                <Page>
                    <List items='{/items}' selectionChange="handleNavigate" mode='SingleSelectMaster'>
                        <items>
                            <StandardListItem title='{name}' info='{type}'/>
                        </items>
                    </List>
                </Page>
            </masterPages>
            <detailPages>
                <MessagePage title='Hello!' text='Select a Product'></MessagePage>
                <core:Fragment fragmentName="com.sap.SplitApp.fragments.BikeProperties" type="XML"/>
                <core:Fragment fragmentName="com.sap.SplitApp.fragments.CarProperties" type="XML"/>
            </detailPages>
        </SplitApp>
    </App>
</Shell>

App.controller.js

onInit: function () {
        var items = [
            {
                name: 'Thunderbird 500cc',
                type:'Bike'
            },
            {
                name: 'Swift',
                type:'Car'
            },
            {
                name: 'Bullet 350cc',
                type:'Bike'
            },
            {
                name: 'Polo',
                type:'Car'
            }
            ];
            var oModel = new sap.ui.model.json.JSONModel({ items: items});
            this.getView().setModel(oModel);
    },

    handleNavigate: function(oEvent) {
        var oBindingContext = oEvent.getParameter("listItem").getBindingContext();
        var oSplitApp = this.byId("app");
        var oDetailPage = null;
        if (oBindingContext.getProperty("type") === "Bike") {
            oDetailPage = this.byId('bikePage');
        } else {
            oDetailPage = this.byId('carPage');
        }
        oDetailPage.setBindingContext(oBindingContext)
         oSplitApp.toDetail(oDetailPage);
    }

BikeProperties.fragment.xml

<core:FragmentDefinition
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc"
xmlns:l="sap.ui.layout"
xmlns:f="sap.ui.layout.form"
xmlns:core="sap.ui.core"
>


<Page id='bikePage' title='Bike'>
        <Title text='{name}' />
    </Page>
</core:FragmentDefinition>

CarProperties.fragment.xml

<core:FragmentDefinition xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc" xmlns:l="sap.ui.layout" xmlns:f="sap.ui.layout.form"
xmlns:core="sap.ui.core">
<Page id='carPage' title='Car'>
    <Title text='{name}'/>
</Page>


Get this bounty!!!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.