CSS file issues while cross application Navigation

[former_member500674]

Hi All,

We have two application deployed to launchpad and we are communicating between apps via cross application navigation via semantic object navigation.

But I can see if both application has same css class with same name in style class they are not clearing the CSS of other app.

I explicitly wrote destroy method to destroy all classes but with no effect.

Has anyone faced same issue ? Can anyone sugest how to clean up component before navigation to avoid cache issue?

Regards,

Prosun

[imsuryapandiyan]

Try creating app specific parent class and use them in css file.

.clsApp1 .customClass {
//properties
}
.clsApp2 .customClass {
//properties
}

Ex:
1st App:
In App View:
<App id="app" class="clsAppFirst"
		 busy="{appView>/busy}"
		 busyIndicatorDelay="{appView>/delay}"/>

In css file:
.clsAppFirst .clsBackBtn {
    color: black !important;
}


2nd App:
In App View:
<App id="app" class="clsAppSecond"
		 busy="{appView>/busy}"
		 busyIndicatorDelay="{appView>/delay}"/>

In css file:
.clsAppSecond .clsBackBtn {
    color: white !important;
}

[kammaje_cis]

I believe both are custom applications and seems like you are using standard CSS classes (that is why they are conflicting) and overwriting its' properties.

You cannot delete CSS classes of earlier application. Ultimately it is all single application for the browser.

First of all, it is a bad idea to change the properties of standard CSS classes. Always ensure that you have custom CSS classes for controls, and that way you ensure that you have unique classes across applications.

[former_member500674]

Hi Krishna,

Thanks for your reply.

We are not using or changing standard CSS file. We have used custom css file. But the problem is if the custom CSS file for two app have similar class with diffrent poperties then they are conflicting with each other.

App A -> classA.css- > .btnBackground{backgroundcolor:red}

App B -> classB.css- > .btnBackground{backgroundcolor:blue}

Now conflit happens when navigatig via semantic object.

Hope it clarifies.

Regards,

prosun

[kammaje_cis]

When you have a separate parent css class (for each app) , how can the conflicts occur?

[kammaje_cis]

When you have a different parent css class (for each app) , how can the conflicts occur?

[kammaje_cis]

When you have different parent css classes for each app, how can the conflict happen?

[former_member500674]

Hi Kishore,

I am using below code for navigation

var oHash = (oCrossAppNavigator && oCrossAppNavigator.hrefForExternal({ target: { semanticObject: semObj, action: action }, params: oParams })) || ""; oCrossAppNavigator.toExternal({ target: { shellHash: oHash } });

Now the problem is, as I described in earlier post, if both application use CSS , btnBackground which is presnt in both custom CSS file(classA.css, classB.css) , it is not taking the CSS from current file though they are loaded in app. It is taking the poperties from the class loaded previously(the first application).

If I execute the application separately they work fine. Only probelm we use app to app navigation.(navigation from appA to appB.