CODEWITHSUNDEEP
javascriptjqueryxmlviewsapui5
codesyntax
codesyntax

Reputation: 33

Using jquery in xml file in sapui5 fragment

I have a simple problem with my app, i have Image property with empty background, if i click on it should add class to my property My controller doesn't see classes/id of properties in view.xml document. Is there a way to communicate with them?

In my view fragment: 

<Page showHeader="false">
            <content>
                <tnt:ToolHeader>
                    <Button icon="sap-icon://nav-back" press="onNavBack" />
                </tnt:ToolHeader>
                <Image id="imageOffice" class="officeImage" width="19.8%" height="26.3%" press="onReservePress"/>
            </content>
        </Page>

My controller:

onReservePress: function() {
        console.log("Working"); //its ok

        $("#imageOffice").addClass("greenImage"); //its not
    }

css file: 

.greenImage {
background-color: rgb(174, 243, 231);
}

Upvotes: 0

Views: 410

Answers (1)

Ji aSH
Ji aSH

Reputation: 3457

You can use native function to access your element

onReservePress: function() {
    console.log("Working"); //its ok

    this.getView().byId('imageOffice').addStyleClass("greenImage");
}

This will still use jquery though :) I think you can optimize this by using the event source (and prevent ID usage):

onReservePress: function(oEvent) {
    console.log("Working"); //its ok

    oEvent.getSource().addStyleClass("greenImage");
}

Upvotes: 1

Related Questions