Visual Builder

Get Involved. Join the Conversation.

Topic

    Himanshu Sethi
    How can we translate content coming from Custom component in...Answered
    Topic posted June 18, 2019 by Himanshu SethiBlue Ribbon: 750+ Points 
    34 Views, 5 Comments
    Title:
    How can we translate content coming from Custom component in VBCS?
    Content:

    I have created custom component called 'file-picker' and there I have given Upload and Cancel button. But while switching locale I need the content coming from custom component also to be changed.

    Please provide me the necessary details on how we can change the language content of custom component as there is no option coming for that in VBCS.

    Thanks,

    Himanshu Sethi

    Best Comment

    Duncan Mills

    The resources/nls folder would be inside of your component folder.  It's a bit tricky to do this from within VBCS, so it's best to create and package the component in a desktop JET project and then import it into your visual builder application. 

    When you create a new component using the ojet create component command in a JET project then it creates the basic folders structure for you and does the correct imports etc. 

    Comment

     

    • Duncan Mills

      Your custom component can load it's own resource bundles using the ojL10n plugin. By convention we store the bundles in the /resources/nls/ folder of the component and then you have a sub-folder for each language code + one for the root language.  Thus you typically would have a structure a little like this:

      / (component root)
        loader.js
        view.html
        viewModel.js
        styles.css
        /resources
          /nls
           strings.js
           /root
             strings.js
          /fr
             strings.js
          /de
             strings.js
      

      In the viewModel define block you would then import that thus:

      define(['knockout',
                   'ojl10n!./resources/nls/strings'
                 ],
                 function(ko, stringBundle) {....
      

       

      The strings.js in the /resources/nls folder just lists your supported languages e.g. 

      define({
        "root": true,
        "fr":true,
        "de",true
      });
      

       

      And then the string.js in the /root and each other language directory contains the keys for the translation and the value in that language e.g.

      define({
        "translationKey1":"Value to be translated",
        "translationKey2":" Another Value to be translated",
      });
      
      

      At runtime, the ojl10 plugin will automatically load the correct language based on the locale from the browser. If the language is not supported by your component then it will fall back to the values defined in the /root/strings.js

      • Himanshu Sethi

        Hi Duncan

        Thanks for the information.

        Please tell me where I need to add this folder directory for my custom component 'mfe-file-picker'.

        Already resource bundling is there for my application as attached in the screenshot.

        Then I need to add the folder structure seperately for custom component or not and in which /js I need to add folder structure.

        Thanks,

        Himanshu Sethi

    • Duncan Mills

      The resources/nls folder would be inside of your component folder.  It's a bit tricky to do this from within VBCS, so it's best to create and package the component in a desktop JET project and then import it into your visual builder application. 

      When you create a new component using the ojet create component command in a JET project then it creates the basic folders structure for you and does the correct imports etc. 

    • Himanshu Sethi

      Hi Duncan

      I have imported the below attached demo-card.zip folder in my component , but on click of any file I am not able to view the content of any of the files in demo-card custom component.

      PFA the architecture of my VBCS project and let me know what changes needs to be done in order to complete language translation.

      Thanks,

      Himanshu Sethi

      • Duncan Mills

        There is an outstanding issue with components that have files in subdirectories not being fully "viewable" in Visual Builder - you can't click on one of the subdirectory files to view / edit it. 

        Your layout looks OK though from the screen shot - you'll just have to edit / test externally.