Desktop and UI Extensibility

Get Involved. Join the Conversation.

Topic

    Edson Junior
    BUI Extension - Hello World for Pane
    Topic posted May 23, 2018 by Edson JuniorGold Trophy: 10,000+ Points 
    691 Views, 4 Comments
    Title:
    BUI Extension - Hello World for Pane
    Content:

    In this post, we are going to explore how ‘Pane’ works and what are the options you have to use and extend your Oracle Service Cloud through the Browser UI (BUI) Extensibility Framework.

    There are three Pane options including Left and Right Side Pane and Content Pane. Take a look at the following example to identify each of the alternatives.

    Pane Demo

    • In Blue, you have a Left Side Pane.
    • In Yellow, you have a Content Pane.
    • And in Grey, you have a Right Side Pane.

    The pane can address a variety of use cases such as having an external application embedded via a Content Pane. You can also create a mashup to ensure agents have the entire 360-degree customer view. The Left and Right Side Panes can also be used to display data in a menu-like format to increase agent productivity. This is not an exhaustive list, just a few ideas to introduce the concept.

    The attached sample code is organized by using a typical website structure which is:

    • my_content.html: This file contains your page content such as an external application or a new UI that you want to provide to your agents.
    • styles folder: This folder will contain the CSS file used to style your content (e.g., text style, background color, and another styling).
    • scripts folder: This folder will contain all JavaScript code used to construct your UI objects such as Right and Left Side Pane or Content Pane. Also, you can create other JS Functions and organize your code in a sort of way that it will be easy to maintain in the future.

    As a general recommendation, try to avoid dependence code with 3rd Party files, such as referring to Oracle Service Cloud Vanilla Theme CSS or others files. Oracle or other 3rd Parties can change their code without notifying you and your code can be broken.

    Here are the sample codes to create a ‘Pane.’ Please, download and add each one of the add-is as Agent Browser UI Extension, then select Console as extension type and the .js file as the init file.

    We have divided the code explanation into two groups which are:

    • Common File: This will describe at once the common code used across the three add-ins.
    • Side Pane Extension: This will describe each of the add-in and how the object is created in Oracle Service Cloud.

    Common Files

    The style code (CSS) is standard in all of the three add-ins, except for the color that I am using the different color code for each one. Also, the HTML code is common at its core, changing only the text for each one of the add-ins.

    css/samplecode.css

    This CSS file is defining the DIV Element Style by adding border style, text alignment, and colors.

    div.container {
        height: 10em;
        position: relative;
        border-style: dashed;
        width: 100%; height: 100%; 
        color:#cccccc!important;
        background-color: #b3b3b3 }
    div.container p {
        margin: 0;
        font-size:18px!important;
        color:#000000!important;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%) }
    

    /my_content.html

    The following HTML is a sample code with a text centered. The idea is to understand how a side panel content is created and embedded.

    <html>
            <head>
                    <title>Hello World - Content Pane Context</title>
                    <meta charset="utf-8">
                    <link rel='stylesheet' href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' integrity='sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN' crossorigin='anonymous'>   
                    <link rel='stylesheet' href='css/samplecode.css'>     
            <head>
            <body>
                    <div class="container4">          
                            <p class="fa fa-thumbs-up"> I'm a <b>Right Side Pane</b></p>
                    </div>
            </body>
    </html>
    

    Side Pane Extension

    Let’s start with the left side pane which is the blue object element located in the left-side-hand with an HTML embedded.

    Left-Side Pane Demo

    js/leftsidepane.js

    /* In this sample code, I am using a variable to set function values. It helps to be consistent, and if you use the same value in different 
    parts of your code, this is a best practice to help on the maintenance. Also, notice that I am passing the app name and version through a variable. 
    You want to be consistent and keep the same name for the entire add-in, it will help you to identify errors when debug log is used.
    As a best practice, use the same app name and version you add-in pkg (.zip)*/
    
    var iconFont = "fas fa-thumbs-up";
    var createIcon = "font awesome";
    var appName = "LeftSidePaneSampleCode";
    var appVersion = "1.0";
    var leftSidePaneURL = ".././my_content.html";
    var leftSidePaneLabel = "My Left Side Pane";
    
    function createLeftSidePane(){
        ORACLE_SERVICE_CLOUD.extension_loader.load("Hello_World" , "1.0").then(function(sdk) {
            sdk.registerUserInterfaceExtension(function(userInterfaceContext) {
    
                // Notice that the code is calling for the LeftSidePane here. this is the only difference between left and right side pane.
                userInterfaceContext.getLeftSidePaneContext().then(function(leftSidePaneContext) {
    
                    /* I'm not using an existing Side Pane, but if you have an existing Side Pane and want 
                    to reuse it to set a different a condition, you have to set the Id. Create your ide 
                    for each custom Side Pane; you aren't allowed to use the standard menu in here.*/
                    leftSidePaneContext.getSidePane("id").then(function(leftPanelMenu) {
                        
                        //Set Label and the content URL.
                        leftPanelMenu.setContentUrl(leftSidePaneURL);
                        leftPanelMenu.setLabel(leftSidePaneLabel);
                        
                        //Setting to be Visible, with that you will see a thumbs-up on the left side.
                        leftPanelMenu.setVisible(true);
                        
                        // Creating an icon
                        var icon = leftPanelMenu.createIcon(createIcon);
                        icon.setIconClass(iconFont);
                        leftPanelMenu.addIcon(icon);
    
                        //Render is the last and most important part. Without this command your side panel won't appear.
                        leftPanelMenu.render();
                    });
                });
            });
        });    
    }
    
    //JavaScript is a function program language. I like to create a function and call it in sequential order.
    createLeftSidePane();
    

    The Content Pane is the element that you can see in the middle in Yellow. The concept is similar to the left and right side pane; however, you can see a full frame in the middle of you agent browser UI.

    Content Pane Demo

    js/contentpane.js

    /* In this sample code, I am using a variable to set function values. It helps to be consistent, and if you use the same value in different 
    parts of your code, this is a best practice to help on the maintenance. Also, notice that I am passing the app name and version through a variable. 
    You want to be consistent and keep the same name for the entire add-in, it will help you to identify errors when debug log is used.
    As a best practice, use the same app name and version you add-in pkg (.zip)*/
    
    var appName = "ContentPaneSampleCode";
    var appVersion = "1.0";
    var contentPaneName = "My Content Pane";
    var contentPaneURL = '.././contentpane.html';
    
    function createContentPane() {
      ORACLE_SERVICE_CLOUD.extension_loader.load(appName , appVersion).then(function(sdk){
          sdk.registerUserInterfaceExtension(function(IUserInterfaceContext){
              
            // In order to create a Content Pane the code will call getContentPaneContext method.
              IUserInterfaceContext.getContentPaneContext().then(function(IContentPaneContext){
    
                //In this case, we are creating a content pane, and I will give an Id for this content.
                  IContentPaneContext.createContentPane('contentPaneSampleCode').then(function(IContentPane)
                      {
                          // With this function, the code is passing a name to show on the top of the content.
                          IContentPane.setName(contentPaneName);
    
                          // With this function, the code is passing the URL (embedded page) through a variable.
                          IContentPane.setContentUrl(contentPaneURL);
                      });
                  });
              });
          }
      );
    }
    
    //JavaScript is a function program language. I like to create a function and call it in sequential order.
    createContentPane();
    

    The right side pane is pretty similar to the left side pane that we have explained early in this post. The only difference is that this element is located in the right-side-hand of you Oracle Service Cloud.

    Right-Side Pane Demo

    js/rightsidepane.js

    /* In this sample code, I am using a variable to set function values. Also, notice that I am passing the app name and version through a variable. 
    You want to be consistent and keep the same name for the entire add-in, it will help you to identify errors when debug log is used.
    As a best practice, use the same app name and version you add-in pkg (.zip)*/
    
    var iconFont = "fas fa-thumbs-up";
    var createIcon = "font awesome";
    var rightSidePaneURL = ".././rightsidepane.html";
    var rightSidePaneLabel = "My Right Side Pane";
    var appName = "RightSidePaneSampleCode";
    var appVersion = "1.0";
    
    function createRightSidePane(){
        ORACLE_SERVICE_CLOUD.extension_loader.load(appName, appVersion).then(function(sdk) {
            sdk.registerUserInterfaceExtension(function(userInterfaceContext) {
                userInterfaceContext.getRightSidePaneContext().then(function(rightSidePaneContext) {                
                    
                    /* I'm not using an existing Side Pane, but if you have an existing Side Pane and want 
                    to reuse it to set a different a condition, you have to set the Id. Create your ide
                    for each custom Side Pane; you aren't allowed to use the standard menu in here.*/
                    rightSidePaneContext.getSidePane("id").then(function(rightPanelMenu) {
                        
                        //Set Label and the content URL.
                        rightPanelMenu.setContentUrl(rightSidePaneURL);
                        rightPanelMenu.setLabel(rightSidePaneLabel);
                        
                        //Setting to be Visible, which will result and Side Pane un-collapsed.
                        rightPanelMenu.setVisible(true);
                        
                        // Creating an icon                    
                        var icon = rightPanelMenu.createIcon(createIcon);
                        icon.setIconClass(iconFont);
                        rightPanelMenu.addIcon(icon);                  
    
                        //Render is the last and most important part. Without this command your side panel won't appear.
                        rightPanelMenu.render();
                    });
                });
            });
        });    
    }
    
    //JavaScript is a function program language. I like to create a function and call it in sequential order.
    createRightSidePane();
    
    

    We hope that you find this post useful. We encourage you to try the sample code from this post and let us know what modifications you have made to enhance it. What other topics would you like to see next? Let us know in the comments below.

    Comment

     

    • Pramod Vasudeva Murthy

      IRightPane seems to have problem in finding the my_content.html. PFA screen shot.

      ~VIP

    • Edson Junior
      Pramod Vasudeva Murthy said:

      IRightPane seems to have problem in finding the my_content.html. PFA screen shot.

      ~VIP

      View original

      Hi Pramod,

      Thanks for your comment on this post. I did another test with the same attached file and it worked for me, but it might be same difference between our environments. Could you tell in what build of BUI you are testing? Also, could you eliminate other add-ins and give a test only with the rightsidepane sample code?

      Thanks,
      Edson

    • Sathya Rajendran

      Hi Edson,

      Can you share me how i get IcontentPane which is already created as you did for getLeftSidePaneContext and getRightSidePaneContext.

    • AKASH SURAJ

      Hi Edson,

      I also had similar question as above. Similar to leftcontent pane, how can we open the IContentPane using the icon.

      Please help

       

      Regards

      Akash