Hiding fields in My Paystubs Fiori app

[Francis417]

Dear experts,

I would like to hide the 'Gross Pay' and 'Deductions't in the MyPaystubs Firoi app and had search thru the threads and seems unable to find a clear hints on how to achieve the tasks.

I've tried to modify the code directly in SE80, adding the customizing section to the component.js file but the two fields still cannot be hide. I've also tried to comment out the 2 fields in both S3.view.xml and S3_Phone.view.xml and still no effect.

Appreciate if there are any advises or suggestions.

Thanks,

Francis

[seVladimirs · Accepted solution]

Hi,

Please try to use following code inside your Component.js extension.

this.hcm.mypaystubs.Component.extend("hcm.mypaystubs.hcmmypaystubsExtension.Component", {
    metadata: {
        version: "1.0",
        config: {},
        customizing: {
            "sap.ui.viewModifications": {
                "hcm.mypaystubs.view.S3": {
                    "MPS_DEDUCTIONS": {
                        "visible": false
                    },
                    "MPS_GROSSPAY": {
                        "visible": false
                    }
                }
            }
        }
    }
});

[Francis417 · Accepted solution]

Dear Vladimirs,

Actually I'm new to Fiori and this kind of codes, appreciate if some more you can give me some more hints on the correct position that I should insert the suggested codes.

Attached is the Component.js that I've modified before posting this thread. Should I simply remove line 21 - 33 and just add the suggested codes after line 39.

Many Thanks in advance,

Francis

[seVladimirs · Accepted solution]

can you please share your code not screenshot. thanks.

[seVladimirs · Accepted solution]

You need to create a new project which will be an extension of your SAP Fiori My Paystubs application (

When you create your extension project, inside this project you will have Component.js file. Code below would hide both fields (Gross pay and Deduction);

jQuery.sap.declare("hcm.mypaystubs.hcmmypaystubsExtension.Component");
// use the load function for getting the optimized preload file if present
sap.ui.component.load({
    name: "hcm.mypaystubs",
    // Use the below URL to run the extended application when SAP-delivered application is deployed on cloud
    url: jQuery.sap.getModulePath("hcm.mypaystubs.hcmmypaystubsExtension") + "/parent" // we use a URL relative to our own component
        // extension application is deployed with customer namespace
});
this.hcm.mypaystubs.Component.extend("hcm.mypaystubs.hcmmypaystubsExtension.Component", {
    metadata: {
        version: "1.0",
        config: {},
        customizing: {
            "sap.ui.viewModifications": {
                "hcm.mypaystubs.view.S3": {
                    "MPS_DEDUCTIONS": {
                        "visible": false
                    },
                    "MPS_GROSSPAY": {
                        "visible": false
                    }
                }
            }
        }
    }
});

[Francis417 · Accepted solution]

So is it a must that I've to create a custom project in order to hide the 2 fields? Can I simply just make the modifucations to the original component.js file?

Or if I don't have Eclipse, how can I get the job done using standard SAP transactions and tools?

Thanks,

Francis

[seVladimirs · Accepted solution]

Yes, it is highly recommended to use extension project and not doing modification. You can easily download Eclipse Mars and UI5 addons in order to extend your app.

[Francis417 · Accepted solution]

Thanks for your suggestions and I'll try playing with Eclipse Mars and the addon. However, do appreciate if some hints and steps can be given if I finally opt to do modifications to the standard.

Many Thanks,

Francis

[seVladimirs · Accepted solution]

OK, if you want to do a modification. You would need to modify the S3 view, please find those two fields and add visibile=false

[naseemvp007 · Accepted solution]

Hello Vladimir, could you please suggest the eclipse add-on which I need to install?

I tried to search one but got the info that the SAP fiori toolkit plugin was deprecated since eclipse Juno.

[seVladimirs · Accepted solution]

Here we go - SAP Development Tools

[Francis417 · Accepted solution]

Appreciate if you can let me know how I can insert the code sample in the message for your further advise. I tried to added visible=false to the code but the 2 fields are still there.

Am I adding it in the wrong place?

Many Thanks,

Francis

[seVladimirs · Accepted solution]

It should work, can you please clear your browser cache and try again. Also please double check if Component-preload.js is not loaded.

I never did a modification to standard Fiori App, since it is not the way how to do it. If doesn't work please try to do a proper Application Extension via Eclipse or WebIDE.

[naseemvp007 · Accepted solution]

Hello Vladimir,

Yes, i have installed the following plugins using the same approach in Eclipse Mars.

I could not find the Create New Extension project as it was available in Eclipse Juno.

Could you please provide the screenshots for creating an Extension project.

Regards,

Naseem

[Francis417 · Accepted solution]

Appreciate if you can further advise where and how I can check if Component-preload.js is loaded or not.

Besides, I've tried Eclipse Juno but was unable to find option to create new extension project which I believe is the missing of SAP Fiori Toolkit. How can I install or add the Fiori Toolkit to Juno. As for Mars, maybe my JRE is not up-to-date, I can startup Mars.

Many thanks,

Francis