[InAppBrowser Plugin] Change Toolbar CSS style

Forge Component
(11)
Published on 9 Jan by OutSystems R&D
11 votes
Published on 9 Jan by OutSystems R&D

Hello all.

Is there any way to change the CSS of the InAppBrowser Toolbar?

In this case, and specifically for the "iOS", I wanted to change the color of the buttons "Done" and arrows. I tried to find where to add the new CSS styles inside the component but couldn't find any place to do these changes.

Any ideas?

Thanks

Marcelo Nunes wrote:

Hello all.

Is there any way to change the CSS of the InAppBrowser Toolbar?

In this case, and specifically for the "iOS", I wanted to change the color of the buttons "Done" and arrows. I tried to find where to add the new CSS styles inside the component but couldn't find any place to do these changes.

Any ideas?

Thanks

Hello Marcelo, 

The color of the text and the background as well are configurable, you can check all the properties here.

Not all these attributes exists in the plugin right now, but you can add these attributes to the plugin Structures

Please find below how it looks like, 

Ahmad Abdullah wrote:

Marcelo Nunes wrote:

Hello all.

Is there any way to change the CSS of the InAppBrowser Toolbar?

In this case, and specifically for the "iOS", I wanted to change the color of the buttons "Done" and arrows. I tried to find where to add the new CSS styles inside the component but couldn't find any place to do these changes.

Any ideas?

Thanks

Hello Marcelo, 

The color of the text and the background as well are configurable, you can check all the properties here.

Not all these attributes exists in the plugin right now, but you can add these attributes to the plugin Structures

Please find below how it looks like, 


Hello Ahmad,

Thanks for your response.

Your advice makes complete sense. I have added those extra fields and tried to test.

Unfortunately, it didn't have any effect on the InAppBrowser page. I've added the same fields as in your example, added the JSON conversion string, and even an assign forcing some new colors. I have also generated the App again in order to have everything refreshed.

Do you know if I am still missing something?

I have also done another test, which was to change some existing values, and that had the desired effect. I'm guessing only the new ones are having problems.

Here you can see what I've done:




Hi Ahmad,


Can you help us? Just like Marcelo, I also cannot configure the header and footer.


Regards!

Ahmad Abdullah wrote:

Marcelo Nunes wrote:

Hello all.

Is there any way to change the CSS of the InAppBrowser Toolbar?

In this case, and specifically for the "iOS", I wanted to change the color of the buttons "Done" and arrows. I tried to find where to add the new CSS styles inside the component but couldn't find any place to do these changes.

Any ideas?

Thanks

Hello Marcelo, 

The color of the text and the background as well are configurable, you can check all the properties here.

Not all these attributes exists in the plugin right now, but you can add these attributes to the plugin Structures

Please find below how it looks like, 



Hi Marcelo Nunes and Diana Milheiro,

I tried to implement the same objective in a sample mobile app and it is working for me.

Note: I did the implementation for Android device (sorry, I don't have an Apple device for testing)


Steps:

1) In the InAppBrowserPlugin application module, Introduce/Add all the required structure attribute to the AndroidOptions structure definition (you may do for IOSOptions Structure)

In my case, I added toolbarcolor attribute as shown below

2) After doing the required code changes, Publish the InAppBrowserPlugin application module

3) Refresh the InAppBrowserPlugin application module dependencies in the consumer mobile application module

4) Within the consumer module add a assignment node/element before introducing the Open InAppBrowser Client Action, initializing  

Options.Location = True (this is what you missed)

Options.Android.toolbarcolor = "#00a2ed"

5) Publish the consumer application module

6) Regenerate the application installer (Generate the app)

7) Re-install the latest application in the native device


Output:  InAppBrowser Toolbar color got changed :)

Hope this helps you!


Regards,

Benjith Sam

Solution

Hello all,

I found out why my solution wasn't working.

I thought that the environment where I'm working, which is on version OS 10, was using the latest stable version of the InAppBrowser plugin, but it seems I was wrong. This version and the latest stable version have a small but important change that makes the total difference.

The version that I have installed has the following Extensibility Configuration:

{
    "plugin":
    {
        "url": "https://github.com/OutSystems/cordova-plugin-inappbrowser.git#1.7.0-os"
    }
}


And the latest version of this plugin for OS 10 has the following configuration:

{
    "plugin": {
        "url": "https://github.com/OutSystems/cordova-plugin-inappbrowser.git#3.1.0-OS3"
    }
}


This means that my version of the plugin was calling an older version of the InAppBrowser from GitHub. This was the reason why only the new fields weren't working. Updating this configuration to the correct version fixed the problem for me.


Thank you all for your help.

Solution