Localization of plugin

i have introduced message folder and added Demoplugin_en.prpoerties into the folder.
I tried to retrieve the message value in my XHTML page as
#{msgs.ViewGroupPlugin_headerMessage} when i uploaded this plugin i am not getting value of message defined in the file.
have introduced sailpoint.i18n in my JS module as well.

My question is do we have to pass any kind of reference in any other file?

Hi @kumark41 ,

It is important that the technical name of the plugin and the name of the messages files match, and please make sure that the messages folder is included in the root of the zip file, when it is built.

To test the localization, I have created a simple plugin using the IIQDA. The IIQDA generates an Ant script to build the plugin, but it did not include the messages folder.

I had to add a messages folder under the web folder and update the build.xml to include that. After that, I was able to display a message in English or Dutch on the plugin pages (<<IIQ_BASE_URL>>/plugins/pluginPage.jsf?pn=localizationtestplugin, e.g. http://localhost:8080/identityiq/plugins/pluginPage.jsf?pn=localizationtestplugin).

  <target name="package" depends="compile,generateDTD" description="Output zip file overlay to build/dist dir">
    <mkdir dir="${overlay}/jars" />
    <buildnumber file="build.num"/>
    <jar destfile="${overlay}/jars/${pluginname}.jar">
      <fileset dir="build/classes">
        <include name="**/**" />
      </fileset>
      <!-- this will add resources that were in the src area for getResourceAsStream calls -->
      <fileset dir="src">
        <exclude name="**/*.java" />
      </fileset>
    </jar>
    <copy todir="${overlay}">
      <fileset dir="web">
        <include name="manifest.xml"/>
        <include name="ui/**"/>
<!-- START ADDITION: Include messages from the web folder -->
        <include name="messages/**"/>
<!-- END ADDITION -->
      </fileset>
      <fileset dir=".">
        <include name="import/**"/>
        <include name="db/**"/>
      </fileset>
    </copy>

    <xmltask source="${overlay}/manifest.xml" dest="${overlay}/manifest.xml" outputter="default" preservetype="true">
      <xmlcatalog>
        <dtd publicId="sailpoint.dtd" location="${dtd}" />
      </xmlcatalog>
      <replace path="//Plugin/@version" withText="${version}.${build.number}" />
    </xmltask>
    <zip basedir="${overlay}" destfile="build/dist/${pluginname}.${version}.${build.number}.zip" />
  </target>

This example plugin is here: LocalizationTestPlugin

Hey pieters, I am directly adding a folder named “messages” in root folder by just unzipping the folder and upload that again by zipping them.
I am sharing the screenshot for error when i am trying to do the same in eclipse.


if you can help me in resolving this.

1 Like

Adding my ZIP folder structure screenshot here

1 Like

This just tells you that the file sailpoint.dtd is not available for validation of the XML format. Not an error, but the file is very useful to ensure you don’t make any errors in the XML.

For making this a repeatable process, make sure to build the plugin with the message and ensure that the build.xml contains instructions to include the messages folder.

Also ensure that the names of the properties files start with the exact (case sensitive!!!) technical name of the plugin (<Plugin ... name="ViewGroupPlugin" ...>)

With that, you should be able to use the #{msgs.MESSAGE_KEY} format to display localized messages in XHTML pages.

2 Likes

@menno_pieters The link you provided for sample localization plugin has expired or the item has been moved. Could you please re upload it or provide the sampe localization plugin please?

Best Regards,
Chirag Gupta

@chirag-gupta
Here is a new link, which will expire in 365 days:
https://transfer.sailpoint.com/receive/?thread=320T-FZAM&packageCode=A1qxLoWSu9EshOxSV37r0Toqa1uaVgv1dOn8kvkjytU#keyCode=euvu5k5QV41NeL1UumgcQdP4NYekFjWrBtyizNUo9iE

Hi @menno_pieters , thank you for sample plugin. For Espanish and French we can place unicode characters in the properties file, but how do we localize the Chinese and Japenese language labels? I placed the properties file with Chinese translations but the translations are appearing in wrong format. Could you please help us on this? Please find attached UI screenshot:

Hi @chirag-gupta,
Please see java - Chinese characters in properties files are not properly decoded - Stack Overflow. This article explains the use of encoding of these files. You need to find the correct encoding/representation for each character. There are tools and websites that may help in creating such properties files. I believe the properties editor in Eclipse can handle this, or may require some add-on.

  • Menno

@menno_pieters Thank you so much Menno, this has really helped. We are facing one last hurdle. We have multiple HTML files inside the ‘html’ folder as shown in screesnhot. Now pages.xhtml is able to translate the keys from properties file messages folder . But the html files inside the ‘html’ folder are not able to translate the keys and the keys appear as is instead of the actual values. Could you please suggest what did i miss or how can we rectify this?

Here’s the overall folder structure of plugin

The other HTM files in the html folder @menno_pieters , do we need to update build or include something

Hi @chirag-gupta ,

It’s a bit hard to tell how to fix it, without knowing more. What language is the code in HTML written? Are you using Angular, jQuery, plain JavaScript to display the messages? Just inserting the keys in HTML will definitely not work.
It also depends on how and where the HTML snippets are used.

  • Menno

Hi @menno_pieters , Its a plain HTML code with hard coded display messages and not displaying from any JS or angular files.

.thumbnail{ float:left; width: 140px; height: 80px; overflow:hidden; border:0px; outline:0px; }
<button id="closeModalDialogBtn" type="button" class="close ng-scope ng-isolate-scope" ng-if="!forceAction" aria-label="Close dialog" ng-click="$dismiss()" sp-focus-snatcher="focusOnCloseBtn"><i role="presentation" class="fa fa-times"></i></button>
<h4 class="modal-title ng-binding" id="modalTitle">
	<i class="fa fa-info-circle ng-scope" role="presentation"></i>
	<!-- {{ 'ui_access_item_detail_entitlement_title' | spTranslate }} -->
	#{msgs.View_Groups_label_thirtyone}
</h4>
		<div class="table-heading" ng-show="progress">
	   <h3 class="text-muted text-center">
                             Your request to delete group {{role.groupName}} is being processed....  
                        </h3>
						</div>

  <div ng-show="popup">
			<div class="square-corner" >
				<div class="row">
					<div class="col-md-12">
					   <div class="">
					   #{msgs.View_Groups_label_thirtytwo}
							<ul class="list-group">
								<li class="list-group-item">
									<strong> #{msgs.View_Groups_label_thirtythree} </strong> {{role.groupName}}
								</li>
								<li class="list-group-item">
									<strong> #{msgs.View_Groups_label_thirtyfour}  </strong> {{role.groupDescription}}
								</li>
								<li class="list-group-item">
									<strong> #{msgs.View_Groups_label_thirtyfive} </strong> {{role.grouptype}}
								</li>
								
								<li class="list-group-item">
									<strong> #{msgs.View_Groups_label_thirtysix} </strong> {{role.groupRequestable}}
								</li>
								<!-- 
								  <li ng-repeat="item in groupProperties" ng-href="#" class="list-group-item">
									<div>
										<strong> {{ item.Name | spTranslate }} </strong> {{item.Value}}
									</div>
								  </li>
								  -->
								 
							</ul>
						</div>
					</div>
				</div>
			</div>  
			
			 
  </div>
						<h3 class="text-muted text-center" ng-show="success"> 
							 #{msgs.View_Groups_label_thirtyseven}
                        </h3> 
						
						<h3 class="text-muted text-center" ng-show="failure"> 
							 We encountered some technical error, Please contact system administrator.
                        </h3> 
</div>
#{msgs.View_Groups_label_thirtyeight}

Note: I used the same #{msgs.View_Groups_label_key} in the page.xhtml file and it worked fine

Hi @menno_pieters ,Firstly Thanks a lot for looking into this, extremely grateful !
I’m Leela , to add to Chirag’s query, even though we added SailPointBundleLibrary.js , it is not working.
Here is our project structure
image

for import->ui->page.xhtml is working by taking the properties file from import->messages folder with below code :

#{msgs.View_Groups_label_two}

for **import->ui->html->groupDeletion.html** it is not working though messages folder/direct en.properties files in same folder for below code : ```
  • #{View_Groups_label_thirtyfive} {{role.grouptype}}
  • ```

    Kindly, go through the structure if we are doing any mistake. Thanks in advance!

    Screenshot 2

    Hi @menno_pieters , my post has been hidden by this portal, Firstly thank you so much for looking into this, extremely grateful.

    html != xhtml. The xhtml pages are pre-parsed by a Java Server Faces engine before anything is sent to the browser. That is not the case for the html pages. The plugin, however, only supports a single xhtml page. The ‘msgs’ is actually a Java object that is mapped in the web.xml file. The View_group_label_two is a variable in that class. Those things are not accessible from the browser.

    Something that you can do, is to add a for each language a JSON file to the plugin with your localized messages. These can be loaded from JavaScript and stored in an object from which you can extract the localized messages.