Skip to Content

Unable to load custom css in Fiori Extension

Hi ,

I have a fiori extension running on HCP WebIDE. I have to include a custom css file in my extension.

I have created a css folder inside webapp and have given the following path in my metada of extended component. But in console I see it tries to find the file in my parent app (standard app) instead of extended app.

css-1.png

this.i2d.pp.materialshortge.details.Component.extend("i2d.pp.materialshortge.details.ZPP_MATSHORT_DT_Ext.Component",    
 {
metadata: {
version: "1.0",                   
includes: ["css/StyleExt.css"],                          
config: {},
css-1.png (6.2 kB)
Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

1 Answer

  • avatar image
    Former Member
    May 16, 2017 at 12:22 PM

    Hi Amber,

    To apply the custom CSS style sheet to the app, add the below code in the index.html file.

    <link rel="stylesheet" type="text/css" href="css/style.css">

    css is the folder name.

    style.css is the file name which has been created under the css folder.

    Best Regards,

    Deepak.

    Add comment
    10|10000 characters needed characters exceeded

    • Hi Deepak,

      Actually there is no index.html in this case as its an Extension project in Webide. We are running through WebIDE sandbox where-in it generates fiorisandbox.html at runtime. So I was thinking if there is anyway we can do it the metadata settings of my Component.

      Also when I will finally deploy this extensed proj to ABAP server later and it will run from launchpad , that time it will not refer our index.html or fiorisandbox.html and in that case the css path will not be loaded

      Regards