Ask Questions and Find Answers

Unfortunately, it is generated directly under body. I believe the classes are shared with other dropdowns (if any).

&nbsp; &nbsp; <div id="yui_patched_v3_18_1_1_1555291610955_21932" class="yui3-widget overlay yui3-widget-positioned yui3-widget-modal yui3-widget-stacked overlay-hidden" style="left: 1450.7px; top: 8px; z-index: 5000; height: 42px; width: 160px;">...</div>
​​​​​​​

Hi Jason,

I thought maybe that is what it was! I'm glad I asked for a screenshot. The good news is that you don't have to override anything, you can actually change this look and feel using configuration. The not so great news is that there are several steps you have to perform so it's not for the faint of heart. I think you mentioned being new to Liferay so I'll try to outline all the steps, but be forewarned that this is off the cuff. 

There are multiple steps, so i'll outline them one at a time.

Explanation

You're basically embedding a portlet in the theme so that you don't have to add it manually to every page. What you are doing is fine, but there is an alternative that is available for a few of Liferay's out of the box portlets where Liferay provides for you a macro that you can use to accomplish the same goal. In this case you could use the macro like this --

<@liferay.languages/>

.. be sure to include the "s" on the end. There is a version without the s can be used to translate language keys. Ok, so this macro will basically do what you are doing manually, embed the portlet whereever you put it. Not he good news is that the Language portlet is not ADT enabled. This means that the portlet was updated so that the template that is used to render the portlet is something that can be controlled at runtime through configuration, including creation of the template. This feature was introduced in 6.2 and is one of my favourites . So what you can do is define a custom ADT for this portlet with the markup you want to use to render the drop down. Then you will look create a preferences string which you can pass as part of the macro tag above and as you navigate from page to page (including new ones you add) the portlet will automatically be added and configured for you. 

Step #1 - Generating the Preferences

The first thing I do here is I go to a page and I manually add the portlet to the page. Then I configure the portlet and grab the preferences out of the database so I am sure not to make an error with my embedded string. Sooo..

1. Create a new page
2. Go to that page
3. Add the Language Selector portlet from the widgets to the page
4. Hover on the portlet to access the stop light menu and then choose Configuration from the options
5. You will see a link that says "Manage Templates" -- click it
6. Then you Add a new template

This is the internal one that Liferay provides, so you can start with it and make your changes as you need.

<#if entries?has_content>
    <#assign languageId = localeUtil.toLanguageId(locale) />

&nbsp;&nbsp; &nbsp;<style>
        .taglib-language-option {
            background: none no-repeat 5px center;
            padding-left: 25px;
        }

        <#list entries as entry>
            .taglib-language-option-${entry.getW3cLanguageId()} {
                background-image: url(${themeDisplay.getPathThemeImages()}/language/${entry.getLanguageId()}.png);
            }
        </#list>
    </style>

&nbsp;&nbsp; &nbsp;&lt;@liferay_aui["form"]
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;action=formAction
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;method="post"
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;name='${namespace + formName}'
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;useNamespace=false
&nbsp;&nbsp; &nbsp;&gt;
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;@liferay_aui["select"]
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;changesContext=true
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;id='${namespace + formName}'
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;label=""
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;name='${name}'
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;onChange='${namespace + "changeLanguage();"}'
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;title="language"
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&gt;
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;#list entries as entry&gt;
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;@liferay_aui["option"]
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;cssClass="taglib-language-option taglib-language-option-${entry.getW3cLanguageId()}"
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;disabled=entry.isDisabled()
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;label=entry.getLongDisplayName()
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;lang=entry.getW3cLanguageId()
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;selected=entry.isSelected()
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;value=entry.getLanguageId()
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;/&gt;
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<!--#list-->
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<!--@-->
&nbsp;&nbsp; &nbsp;<!--@-->

&nbsp;&nbsp; &nbsp;&lt;@liferay_aui["script"]&gt;
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;function ${namespace}changeLanguage() {
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;var languageId = AUI.$(document.${namespace + formName}.${name}).val();

&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;submitForm(document.${namespace + formName});
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;}
&nbsp;&nbsp; &nbsp;<!--@-->
<!--#if-->

7. Ok, now save, save, save ... basically close it all out. 
8. Go back into the configuration and choose your custom template and save

Step #2 - Retrieveing the Preferences

This is a trick I like to use. There may be other ways, but I have found this to work well enough. 

1. Open up some tool that you can use to query your database
2. select * from Group_ where groupKey like '%Guest%';    -- this is assuming of course you are using the default site /web/guest or /group/guest
3. Make note of the groupId
4. select * from layout where groupId = <groupId> and friendlyURL like '%/my-page%'  -- use the friendly url you set for your page
5. Make note of the plid
6. select * from PortletPreferences where plid = <plid>;


in the results you want to find the row for the language portlet and then copy the value in the preferences column. You can see in the XML string the key/value pairs that are used -- we're going to use those with the macro.


Step #3 - Embedding your Portlet

1. Go back to your theme
2. Update your code so it looks like this 

<@liferay.languages default_preferences=freeMarkerPortletPreferences.getPreferences({"key": "value", "key": "value"}) />
${freeMarkerPortletPreferences.reset()}

3.  .. making sure to change the "key" and "value" items there to match the ones you grabbed from the DB in the last step. 
4. save and deploy your code. 



And that should be it! Now there is a gotcha here. A couple actually. But let's start with this and work our way through any issues you have and then we can talk about the gotchas.

Hey Jason, 

Hmm.. I have a couple thoughts. First is that perhaps you are not actually using the guest site as I had originally assumed . I can see from your first screenshot that you have a record for a group called NVIS -- is it possible that the site you are working with is that one and not the default (Guest) one? ... maybe share with me the full URL you are using for your page?

.. If you are SURE that it is Guest though and it is still not working then the next thing I would try is adding another portlet or two to the page. Just make sure that the page you are using is one that you didn't have in place already and had accessed BEFORE you removed the embedded portelt from your theme. It should be pretty obvious mind you since the Language Selector can only be added to any given page one time.

My money is on the site reference. 

Hey Jason,

Yep, that looks right to me. So you have --

<!--?xml version="1.0" encoding="UTF-8"?--> <portlet-preferences> <preference> <name>displayStyle</name> <value>ddmTemplate_37521</value> </preference> <preference> <name>languageIds</name> <value>en_US,ca_ES,zh_CN,nl_NL,fi_FI,fr_FR,de_DE,iw_IL,hu_HU,ja_JP,pt_BR,es_ES</value> </preference> <preference> <name>displayCurrentLocale</name> <value>true</value> </preference> <preference> <name>displayStyleGroupId</name> <value>20126</value> </preference> </portlet-preferences>

.. and the "name" nodes become your "keys" and the "value" nodes become your values of course. So try the last step with that and let me know how it goes. Once you see the embeeded portlet using your template we'll look at the next step -- the gotchas that you need to work through.

Hi Jason, 

Good stuff. 

OK -- Gotcha #1. When you want to change the preferences. 

Let's say for example you make a new template and you want to change the preferences map to reference the new guy. The problem is that because the portlet is already embedded, you can change the string, but it won't get picked up. What you need to do is remove the preferences so that they get re-generated. To do this you need to go back to the portlet preferences table and this time you want to select all the rows where the portlet id matches your portlet reference. I always do a select first and just eyball the details and when I am happy that I am seeing what I no longer need, I run a delete. Now, because you ran a direct query the cache has not been updated so yo uprobably still have the old stuff in it. Once you run this query, go to the Control Panel > Configuration > Server Administration and clear the caches (most importantly the database cache)

NOTE!!! You should pretty much always avoid direct queries in the database. Liferay does not use foreign keys so you can really mess things up if you don't know what you are doing.


Gotcha #2 -- Removing the portlet

Let's say you decide that you don't want to provide your site in multiple languages anymore. So you go into your theme and you remove the embedded code. That's works, BUT the problem is that it doesn't actually trigger a "delete portlet from page". All it does is stop triggering the render. All the records are still there (database wise) .. but since you can't see the portlet it is orphaned. Ok, so now, let's say you do this on your "test" page (try this out). Go to the Pages section for your site in the control panel. Click on the Test page from the miller columns. Click on the stop light menu on the end and choose Orphaned something or other. It will open a window and you can see all the portlets that are associated with the page that are embedded or static. You would delete it from here. Now, go back to the test page (on the site). Because that portlet (which is not instanceable -- meaning only one per page) is no longer associated with the page, you can manually add the portlet from the widgets. So in this very round about example, you could decide not to make your whole site language switchable, but you might have a page that is. 

Gotcha #3 -- ADT id

This is the tricky one. As you move from one environment to the next, how can you be sure that your ADT Template (DDMTemplate) id will be the same? Ugh. I am going from memory here, but I am pretty sure that the ID values is in fact the template key. By default thought, Liferay is configured to auto-generate these keys -- but youcan change that so that you can control the key and in each environment give it the same name. Go to

1. Control Panel > Configuration > System Settings > Dynamic Data Mapping 
2. Uncheck the Autogenerate etc template.

Now for your exercise

1. Go back to your portlet and add a NEW template for it
2. Notice that this time you have an editable field where you can enter the template key -- give it a name -- and use a template that you can identify as different from the one you are using now
3. Go back to your theme and change your preference to use your NEW key
4. Then do gotcha #1 (delete the preferences, clear the cache)
5. Deploy your theme and make sure it works


​​​​​​​Let me know how it goes. 



  the portlet, AND ALSO the preferences. Now, the portlet is embedded, so how the heck are you supposed to r

Are you sure you got that checkbox? .. that or maybe the Details section is closed and it hiding it on you. Here are some screenshots from my side. 

Hey Jason,

So the way it works is every portle/page (layout) combination will have it's own preferences. That is why i was asking you to filter the portlet preferencs on the plid (plid = Page Layout ID) so that you could see the page where the portlet was embedded. 

Now, if you created a bunch of other page and then started navigating to them, then your Language portlet woul dbe embedded in those as well, and as a result you woul dhave a whole whack of rows in the PortletPreferences table with you embedded preferences. When you want to CHANGE the embedded preferences though, you need to nuke these records.

Now going and querying page by page would be painful. So instead you can run the select to get all the records where the portletId (column) matches the id for your language portlet. Running this query will give you all the records across all the pages where it has been embedded. In this case, because the language portlet is not intanceable (it can only be added to any given page one time) there is virtually no risk that you will delete the wrong records (because you are only working with one site). I still like to run the select first though and look at the row count (usually I know roughly how many pages I have) and then just scan the records.

Once you are satified, change your select * to a delete from .. and then clear your cache, and re-hit your page and the new settings should be stored in the DB. You can verify with the same queries of course.