Topic
20 replies Latest Post - ‏2015-01-22T08:51:02Z by AtanuRoy
SystemAdmin
SystemAdmin
7615 Posts
ACCEPTED ANSWER

Pinned topic Tabs Width and control transfer between each Tab in BPM V8.0.1

‏2013-04-04T06:52:03Z |
Hi All,

I have some requirement of using Tabs in IBM BPM 8.0.1.I need your inputs for the below issues asap.

1) Need to increase the size of a Tabs Pane in BPM 8.0.1
2) I will have buttons (Next and Previous) in each Tabs, for example (Tab1,Tab2,Tab3).When i click Next button in Tab1 the controls should go to Tab2 and on click of Next button in Tab2 the controls should go to Tab3, so on and when Previous button is pressed then the controls should go backwards.

Please help me in this regard.Please provide some code snippets if possible.

Thanks,
Rajesh N
Updated on 2013-04-05T06:34:17Z at 2013-04-05T06:34:17Z by makvell
  • SystemAdmin
    SystemAdmin
    7615 Posts
    ACCEPTED ANSWER

    Re: Tabs Width and control transfer between each Tab in BPM V8.0.1

    ‏2013-04-04T10:51:43Z  in response to SystemAdmin
    Hi All,

    I am able to increase the Width and Height of the table using the predefined CSS class .BPMTabControl.Can any give me some idea about how to proceed in case of the Second Question above.

    Thanks,
    Rajesh N
    • makvell
      makvell
      269 Posts
      ACCEPTED ANSWER

      Re: Tabs Width and control transfer between each Tab in BPM V8.0.1

      ‏2013-04-04T11:31:22Z  in response to SystemAdmin
      Hi!

      You can use this functions, after some tests :)

      
      
      //get tab container widget by coach view id function getTabContainer(tid) 
      { var result = 
      
      null; require([
      "dijit/registry"], function(REGISTRY) 
      {
      //can add to AMD dependencies result = REGISTRY.findWidgets(dojo.byId(tid)); 
      }); 
      
      return result != 
      
      null ? result[0] : 
      
      null; 
      } 
      //go to next tab function toNext(tcvId) 
      { var tc = getTabContainer(tcvId); 
      
      if (tc != 
      
      null) tc.forward(); 
      } 
      //go to prev tab function toPrev(tcvId) 
      { var tc = getTabContainer(tcvId); 
      
      if (tc != 
      
      null) tc.back(); 
      }
      
      • SystemAdmin
        SystemAdmin
        7615 Posts
        ACCEPTED ANSWER

        Re: Tabs Width and control transfer between each Tab in BPM V8.0.1

        ‏2013-04-04T19:44:31Z  in response to makvell
        Hi,

        Where do i have to add this snippet, in Inline javascript.I have a button in each tab and when clicked should go to next tab.Can you be a little more clear and help me in this regard.

        Thanks.
        • makvell
          makvell
          269 Posts
          ACCEPTED ANSWER

          Re: Tabs Width and control transfer between each Tab in BPM V8.0.1

          ‏2013-04-05T06:34:17Z  in response to SystemAdmin
          Hi.

          Example for coach: coach contain tab view, after tabs, exists 2 buttons (next, prev) with multiple clicks enabled. And one (or more) button/s with submit action.

          Add custom HTML to your coach and place that code:

          
          <script> 
          //get widget by coach view id function getWidgetByContainer(tid) 
          { var result = 
          
          null; require([
          "dijit/registry"], function(REGISTRY) 
          {
          //can add to AMD dependencies result = REGISTRY.findWidgets(dojo.byId(tid)); 
          }); 
          
          return result != 
          
          null ? result[0] : 
          
          null; 
          } 
          //go to the next tab function toNext(tcvId) 
          { var tc = getWidgetByContainer(tcvId); 
          
          if (tc != 
          
          null) tc.forward(); 
          } 
          //go to the prev tab function toPrev(tcvId) 
          { var tc = getWidgetByContainer(tcvId); 
          
          if (tc != 
          
          null) tc.back(); 
          } 
          //bind click to our buttons require([
          "dojo/ready", 
          "dojo/on"], function(READY, ON)
          { READY(function()
          { ON(dojo.byId(
          "YOUR_NEXT_BUTTON_ID"), 
          "click", function() 
          { toNext(
          "YOUR_TABS_ID"); 
          }); ON(dojo.byId(
          "YOUR_PREV_BUTTON_ID"), 
          "click", function() 
          { toPrev(
          "YOUR_TABS_ID"); 
          }); 
          }); 
          }); </script>
          


          You can override code for use buttons IN tab, but, i don't understand why need use many buttons, when enough two :)
          • This reply was deleted by Raj4All 2013-04-16T09:14:55Z.
          • This reply was deleted by Raj4All 2013-04-18T12:34:52Z.
          • This reply was deleted by Raj4All 2013-04-18T13:40:55Z.
          • Raj4All
            Raj4All
            77 Posts
            ACCEPTED ANSWER

            Re: Tabs Width and control transfer between each Tab in BPM V8.0.1

            ‏2013-04-18T12:38:10Z  in response to makvell

            Hi,

            I tried the above logic and it is not working.Can you please provide some more clear snippet which will resolve this, any working example will also work.Please reply to this at the earliest.

            Thanks,

            Rajesh N

             

            • makvell
              makvell
              269 Posts
              ACCEPTED ANSWER

              Re: Tabs Width and control transfer between each Tab in BPM V8.0.1

              ‏2013-04-19T06:19:40Z  in response to Raj4All

              Hi.

              Unfortunately, the people supporting the forum did not think about how will look code, formatted in a previous version of forum engine. Therefore, if you simply copy it as it is, the code will not work, the code will be with syntax errors.

              However, from a message I do not understand exactly how you want to use the code, which means not working. I need more information.

              • Raj4All
                Raj4All
                77 Posts
                ACCEPTED ANSWER

                Re: Tabs Width and control transfer between each Tab in BPM V8.0.1

                ‏2013-04-19T06:44:49Z  in response to makvell

                Hi,

                I copied the snippet to a Custom HTML and replaced the respective ids and created Next and Previous Buttons below the Tab control.Later i drop in Coach 1 to the First Tab and Coach 2 to the Second Tab and the tab is not having any specific ID to it instead it is taking the ID of the coach view i dropped in.

                *** The requirement which i need is, i will have a Next button in First Tab and when i click Next button the control should go to Second Tab and I will have Previous Button in Second Tab and when i click it the control should go to First Tab.

                *** If not this the Next and Previous Buttons below the Tab Control will also works for me.

                Note:

                The Tab Control and the Custom HTML is present in a Coach View and that CV is mapped to a Coach in a Human Service.

                The changed code looks like below:

                 

                
                <script> 
                //get widget by coach view id function getWidgetByContainer(tid) 
                { var result = 
                
                null; require([
                "dijit/registry"], function(REGISTRY) 
                {
                //can add to AMD dependencies result = REGISTRY.findWidgets(dojo.byId(tid)); 
                }); 
                
                return result != 
                
                null ? result[0] : 
                
                null; 
                } 
                //go to the next tab function toNext(tcvId) 
                { var tc = getWidgetByContainer(tcvId); 
                
                if (tc != 
                
                null) tc.forward(); 
                } 
                //go to the prev tab function toPrev(tcvId) 
                { var tc = getWidgetByContainer(tcvId); 
                
                if (tc != 
                
                null) tc.back(); 
                } 
                //bind click to our buttons require([
                "dojo/ready", 
                "dojo/on"], function(READY, ON)
                { READY(function()
                { ON(dojo.byId(
                "next"), 
                "click", function() 
                { toNext(
                "secondtab"); 
                }); ON(dojo.byId(
                "prev"), 
                "click", function() 
                { toPrev(
                "firsttab"); 
                }); 
                }); 
                }); </script>
                
                • makvell
                  makvell
                  269 Posts
                  ACCEPTED ANSWER

                  Re: Tabs Width and control transfer between each Tab in BPM V8.0.1

                  ‏2013-04-19T07:02:15Z  in response to Raj4All

                  Mmmm... do not use different ID for tab, in my example, YOUR_TABS_ID - ID of Tabs coach view. Look at attached screenshot.

                  Attachments

                  • Raj4All
                    Raj4All
                    77 Posts
                    ACCEPTED ANSWER

                    Re: Tabs Width and control transfer between each Tab in BPM V8.0.1

                    ‏2013-04-19T08:16:47Z  in response to makvell

                    Hi,

                    I am not sure where i am going wrong as I have used the same logic suggested by you and i have attached the sample Human service and Tabs CV dropped in Tab Coach and Please find the modified code below and please correct me if i am wrong anywhere.

                    PFA.

                    <script>
                    //get widget by coach view id function getWidgetByContainer(tid)
                    { var result =

                    null; require([
                    "dijit/registry"], function(REGISTRY)
                    {
                    //can add to AMD dependencies result = REGISTRY.findWidgets(dojo.byId(tid));
                    });

                    return result !=

                    null ? result[0] :

                    null;
                    }
                    //go to the next tab function toNext(tcvId)
                    { var tc = getWidgetByContainer(tcvId);

                    if (tc !=

                    null) tc.forward();
                    }
                    //go to the prev tab function toPrev(tcvId)
                    { var tc = getWidgetByContainer(tcvId);

                    if (tc !=

                    null) tc.back();
                    }
                    //bind click to our buttons require([
                    "dojo/ready",
                    "dojo/on"
                    ], function(READY, ON)
                    { READY(function()
                    { ON(dojo.byId(
                    "next"),
                    "click", function()
                    { toNext(
                    "Tabs1");
                    }); ON(dojo.byId(
                    "prev"),
                    "click", function()
                    { toPrev(
                    "Tabs1");
                    });
                    });
                    }); </script>

                    • makvell
                      makvell
                      269 Posts
                      ACCEPTED ANSWER

                      Re: Tabs Width and control transfer between each Tab in BPM V8.0.1

                      ‏2013-04-19T08:49:43Z  in response to Raj4All

                      Now it is clear. The problem is that when the buttons (next, prev) are located within the tab of their initialization occurs after the work out of the script is bound action to the buttons.

                      The last thing I can help is to offer two solutions:
                      1. Move buttons out of tabs. (it's fast)
                      2. Make your own tab container (your own coach view, it's easy) in which to add such a buttons. Make them visibility optional and configurable. (it's correct)

                      • Raj4All
                        Raj4All
                        77 Posts
                        ACCEPTED ANSWER

                        Re: Tabs Width and control transfer between each Tab in BPM V8.0.1

                        ‏2013-04-19T09:25:09Z  in response to makvell

                        Hi Makvell,

                        I really appreciate your time for this issue.

                        I have tried keeping buttons outside of Tab Container in CV and also tried to keep the Buttons in the Human service Coach with multiple clicks enabled.

                        But nothing is working , is it really possible to move the Tab controls on click of button in BPM 8.x.I have attached the second scenarios images please check it and give me some idea if possible.

                        Note:

                        I have tried keeping the Custom HTML in CV and HS Coach.

                        Thanks.

                         

                        Attachments

                        Updated on 2013-04-19T09:26:16Z at 2013-04-19T09:26:16Z by Raj4All
                        • makvell
                          makvell
                          269 Posts
                          ACCEPTED ANSWER

                          Re: Tabs Width and control transfer between each Tab in BPM V8.0.1

                          ‏2013-04-19T09:31:02Z  in response to Raj4All

                          Just try move your custom HTML to TabbedPQRCPO coach view (after all).

                          • Raj4All
                            Raj4All
                            77 Posts
                            ACCEPTED ANSWER

                            Re: Tabs Width and control transfer between each Tab in BPM V8.0.1

                            ‏2013-04-19T10:07:27Z  in response to makvell

                            Hi Makvell,

                            I have tried the same and can you just check the main source which i got from browser please comment on this.

                            Do you think i have to import any DOJO packages in to the Custom HTML code or any where in BPM 8.0.1.

                            <div class="body" id="mainBody" role="complementary" aria-label="tab">
                            <div id="TabbedPQRCPO1" class="TabbedPQRCPO topLevel  CoachView" data-type="com.ibm.bpm.coach.Snapshot_60fb40ea_7579_42f2_a3c2_2cd107fdf799.TabbedPQRCPO" data-binding="" data-bindingType="" data-config="config5" data-viewid="TabbedPQRCPO1" data-eventId="" >
                            <div id="div_1_1" class="Tabs  CoachView" data-type="com.ibm.bpm.coach.Snapshot_6311c645_6b7b_4990_a349_ff7489e1f9ac.Tabs" data-binding="" data-bindingType="" data-config="config4" data-viewid="Tabs1" data-eventId="" >
                            <div id="div_1_1_1" class="ContentBox" data-view-managed=false>
                            <div id="div_1_1_1_1" class="Checkbox  CoachView" data-type="com.ibm.bpm.coach.Snapshot_6311c645_6b7b_4990_a349_ff7489e1f9ac.Checkbox" data-binding="" data-bindingType="" data-config="config6" data-viewid="Checkbox1" data-eventId="" >
                            <div class="checkbox control">
                            <label class="text controlLabel"></label>
                            <div class="content">
                            <input></input>
                            <input></input>

                            </div>
                            </div>
                            </div>
                            <div id="div_1_1_1_2" class="Decimal  CoachView" data-type="com.ibm.bpm.coach.Snapshot_6311c645_6b7b_4990_a349_ff7489e1f9ac.Decimal" data-binding="" data-bindingType="" data-config="config3" data-viewid="Decimal1" data-eventId="" >
                            <div class="textLabel">
                            <label class="text controlLabel"></label>
                            </div>
                            <div class="content">
                            <div class="textReadonlyDiv">
                            <span class="text readonly"></span>
                            </div>
                            <input></input>
                            <div class="coachValidationDiv">
                            <img class="coachValidationImg CoachView_hidden" role="alert"/>
                            <span class="coachValidationText" style="visibility: hidden;">!</span>
                            </div>
                            </div>
                            </div>
                            </div>
                            </div>
                            <script>
                            //get widget by coach view id
                            function getWidgetByContainer(tid)
                            {
                            var result = null;
                            require(["dijit/registry"], function(REGISTRY)
                            {
                            //can add to AMD dependencies
                            result = REGISTRY.findWidgets(dojo.byId(tid));
                            });
                            return result != null ? result[0] : null;
                            }
                            //go to the next tab
                            function toNext(tcvId)
                            {
                            var tc = getWidgetByContainer(tcvId);
                            if (tc != null)
                            tc.forward();
                            }
                            //go to the prev tab
                            function toPrev(tcvId)
                            {
                            var tc = getWidgetByContainer(tcvId);
                            if (tc != null)
                            tc.back();
                            }
                            //bind click to our buttons
                            require(["dojo/ready","dojo/on"], function(READY, ON){
                            READY(function()
                            {
                            ON(dojo.byId("next"), "click", function()
                            {
                            toNext("Tabs1");
                            }
                            );
                            ON(dojo.byId("prev"), "click", function()
                            {
                            toPrev("Tabs1");
                            }
                            );
                            });
                            });
                            </script>
                             

                            Updated on 2013-04-19T10:09:32Z at 2013-04-19T10:09:32Z by Raj4All
                            • This reply was deleted by makvell 2013-04-19T11:04:27Z. Reason for deletion: without attach
                            • This reply was deleted by makvell 2013-04-19T11:04:38Z. Reason for deletion: without attach
                            • This reply was deleted by makvell 2013-04-19T11:05:36Z. Reason for deletion: New forum engine... :(
                            • This reply was deleted by makvell 2013-04-19T11:08:30Z.
                            • This reply was deleted by makvell 2013-04-22T05:24:40Z.
                              • Raj4All
                                Raj4All
                                77 Posts
                                ACCEPTED ANSWER

                                Re: Tabs Width and control transfer between each Tab in BPM V8.0.1

                                ‏2013-04-21T07:56:59Z  in response to makvell

                                Hi Makvell,

                                Can you please attach a working example which satisfies the requirement mentioned above.I would really appreciate if you can do this.

                                Thanks.

                                • makvell
                                  makvell
                                  269 Posts
                                  ACCEPTED ANSWER

                                  Re: Tabs Width and control transfer between each Tab in BPM V8.0.1

                                  ‏2013-04-22T05:25:25Z  in response to Raj4All

                                  I'm sorry, but I do so more quickly than trying to explain something - put examples of working with tabs. A simple example, that as I described, and an example is slightly more complicated when the navigation buttons are automatically generated by the container itself.

                                  Other participants who will drop in this topic: to migrate this example in the wiki with description and examples?

                                  Attachments

                                  • Raj4All
                                    Raj4All
                                    77 Posts
                                    ACCEPTED ANSWER

                                    Re: Tabs Width and control transfer between each Tab in BPM V8.0.1

                                    ‏2013-04-22T06:16:15Z  in response to makvell

                                    Thank You so much makvell.

                                    But when i drop the same code in to Coach View it is not working...but it is working when i use it in Human Service Coach.

                                    I do have Two more issues which i am trying to resolve.

                                    1) Is accessing content / data of the Textbox is possible. I am trying to use dojo.byId and document.getElementById but nothing is working.When i use same in Heritage Coach i am able to acces the Fields data.Do i have to add anything to Import DOJO to work in Coach Views.

                                    2) I am trying to access the process variable in a Custom HTML Script using eg:<#= tw.local.rate #> and also using "tw#local#rate".Can you please give me some inputs to solve this issue.

                                    Thanks.

                                    Updated on 2013-04-22T07:15:17Z at 2013-04-22T07:15:17Z by Raj4All
                                    • This reply was deleted by Raj4All 2013-04-22T08:36:17Z.
                                    • This reply was deleted by Raj4All 2013-04-23T08:38:32Z.
                                      • makvell
                                        makvell
                                        269 Posts
                                        ACCEPTED ANSWER

                                        Re: Tabs Width and control transfer between each Tab in BPM V8.0.1

                                        ‏2013-04-22T10:41:39Z  in response to Raj4All

                                        Look in attached TWX. It's all there. It is better to use a second, more complex example. Errors that occur you are not related to dojo.js file, they appear because script in the custom HTML component executed before buttons have  been initialized.

                                        Please try to solve this problem by yourself. All that is needed - in the attached file.

                                        Otherwise, you need to hire a programmer, sorry.

                                        • Raj4All
                                          Raj4All
                                          77 Posts
                                          ACCEPTED ANSWER

                                          Re: Tabs Width and control transfer between each Tab in BPM V8.0.1

                                          ‏2013-04-23T07:26:54Z  in response to makvell

                                          Hi Makvell,

                                          Thank you so much for your time and patience.I have just gone through the CV example in the attachment just now and it is quite helpfull.

                                          Thanks.

                                          Updated on 2013-04-23T07:28:34Z at 2013-04-23T07:28:34Z by Raj4All
                                  • JyotiYadav@24
                                    JyotiYadav@24
                                    4 Posts
                                    ACCEPTED ANSWER

                                    Re: Tabs Width and control transfer between each Tab in BPM V8.0.1

                                    ‏2015-01-21T12:25:10Z  in response to makvell

                                    hi makvell,

                                    Thanks for the nice example on switching between tabs on click of button.

                                    While doing the same with Brazos controls , above logic is not working. I guess  dojo.byId("any Id") is not fetching any result. Any help on this ?

                                     

                                    Thanks . 

  • AtanuRoy
    AtanuRoy
    69 Posts
    ACCEPTED ANSWER

    Re: Tabs Width and control transfer between each Tab in BPM V8.0.1

    ‏2015-01-22T08:51:02Z  in response to SystemAdmin

    Hi,

    Please try to use Custom UI Toolkit. It will meet all your requirement.

    Regards,

    Atanu