Edit Source Code of 'Page Parameters - Block: Parameters' Widget

Description
SteffPoint
Posts: 31
Joined: Wed Mar 07, 2018 1:06 pm

Edit Source Code of 'Page Parameters - Block: Parameters' Widget

Postby SteffPoint » Mon Sep 17, 2018 8:43 am

I wanted to customize the 'Page Parameters - Block: Parameters' Widget, but however when I copy the Widget Source Code, for example:

Code: Select all

<div class="polarion-rp-widget-part" data-widget="com.polarion.pageParametersForm">
  <span class="polarion-rp-widget-parameters">
   
    <sub id="title">Page Parameters Block Widget Titel</sub>
   
    <sub id="content">
     
      <sub>Query_Selection</sub>   
     
      <sub>Work_Items_Link_Role</sub>
     
      <sub>Work_Item_Link_Direction</sub>
     
      <sub>Test_Choice</sub>
     
    </sub>
   
    <sub id="width">500</sub>
   
  </span>
</div>


and then remove the page parameters block widget (as there can't be two of them) and paste the code to a Script Block Widget, it doesn't generate/render the Widget.

Somebody know's what is the cause of it and how to fix it?

adbarads
Posts: 11
Joined: Mon Nov 13, 2017 7:47 pm

Re: Edit Source Code of 'Page Parameters - Block: Parameters' Widget

Postby adbarads » Tue Sep 25, 2018 3:33 am

are you sure this can even be done?
I didn't think it was possible to edit/create your own page parameters block using the script block.

I'm also curious as well, how to solve this issue.
Say this is doable, how would you obtain the page parameters to be displayed onto your script block? and also how would you set the page parameters you capture from the frontend and send it to the backend.
By default, Polarion has this Apply button, that you click Apply to send it all to the backend.

What's the main reason you need to be able to do this?

SteffPoint
Posts: 31
Joined: Wed Mar 07, 2018 1:06 pm

Re: Edit Source Code of 'Page Parameters - Block: Parameters' Widget

Postby SteffPoint » Tue Sep 25, 2018 11:21 am

Thank you very much for your answer adbarads,

I have two main purposes beyond this:

1) I would like to seperate the Page Parameters Block Widget into two parts (listed on different areas on the page - or at least with some spaces between), as I have a kinda high amount of (multiple) select boxes, which can be allocated to two different categories

2) This refers highly on the "Apply-Button" you explained me the functionality of. I would like to see the code for getting a feeling how to create such an "Apply-Button" with custom functionality. I would like to define custom UI-Elements / Buttons, which onclick can #set certain page parameter values.


I would be highly grateful for further assistance :)

Greetings,
Steff

adbarads
Posts: 11
Joined: Mon Nov 13, 2017 7:47 pm

Re: Edit Source Code of 'Page Parameters - Block: Parameters' Widget

Postby adbarads » Wed Sep 26, 2018 5:35 am

Hi SteffPoint,

So, I can explain to you a work around, because that is what I had to do for my reports.

1) Create all the page parameter you need.
2) Proceed to add the page parameters widget block to your page
3) Then in a separate script block widget, use jquery to hide all the elements in the page parameters widget block (you can hide every element including the Apply button.)

4) Now, proceed to go to your other script blocks, create your own html form.
5) When you need to obtain frontend action from the user and pass it to the backend. Use jquery to set the value from your html input code to the hidden element.
6) And when the user clicks "submit" have jquery hit the hidden "Apply" button.

This will essentially allow you to create your own fields and inputs form, but you will have to send all the data captured into the hidden page parameters block and click apply for it all using jquery.

With all that said, this is only 1 work around I implemented.
After thinking about this problem, I wonder if there is a way to set javascript variable directly to velocity variable. I doubt that would work as there is no way to get that value into the backend. The only way is by using the "Apply" button.

I hope this makes sense. If you need more details I can provide you a simple example.

SteffPoint
Posts: 31
Joined: Wed Mar 07, 2018 1:06 pm

Re: Edit Source Code of 'Page Parameters - Block: Parameters' Widget

Postby SteffPoint » Wed Sep 26, 2018 5:43 am

Hello adbarads,

this sounds amazing. Thank you very very much for sharing your workaround with me.

As I have never worked with jQuery before, I would be really grateful for a code sample (to 3), 4) and 5) and 6)).

Thank you very much!

Kind Regards,
Steff

adbarads
Posts: 11
Joined: Mon Nov 13, 2017 7:47 pm

Re: Edit Source Code of 'Page Parameters - Block: Parameters' Widget

Postby adbarads » Wed Sep 26, 2018 6:39 am

Hi Steff,

So, jquery is just a javascript library that allows you to do javascript but easier.
You technically do not need jquery at all and can do everything I suggested with pure javascript. Or import your own frontend library, since you're not as familiar with jquery.

Here is an example of what I did, there really isn't an easy way to add this code in without it going insane quick. I will try to answer any questions the best I can.
At this point, we are just manipulating the DOM and doing all frontend web dev coding.

to summarize, what this code does is, in my html, I have a button with an id to it like this:

Code: Select all

<button onclick="submitRequirementId(this) id="projectId">test</button>


1) when a user clicks on the button, it passes in the value into the submitRequirementId function in the script tags below.
2) in that function, I find the proper element on the page for the page parameter "string" text field, and I set that field to the value the button the user clicked.
3) then I click the Apply button for the user.

4) When the Apply button is clicked, Polarion will now have the user's input from the button saved into a $pageParameter. Allowing me to use that value in the pageScript or wherever.

Also, look for this line:

Code: Select all

$j(global_MyPageParmeter_${componentID}).prop('hidden', true);

that line I'm using jquery to hide the element I don't want the user to see on the page, such as the page parameter text fields, or the boolean yes / no, etc..

I hope this helps..


Code: Select all

## this is ID of your page parameter
#set($componentID = "search_req")


#macro(buildJSEnvironment)
    ## importing jquery
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script>
        // because velocity uses $ and so does jquery. added this line to prevent conflict
        var $j = jQuery.noConflict();
        var DEFAULT_OPTION = '<option value="default" disabled="true" selected="true"> -- select an option -- </option>';
        var global_SelectedProjectPlan = {project : null, plan : null};
        var global_ProjectPlanData = [];
        var global_MyPageParmeter_${componentID} = "";

        $j(document).ready(function(){
            setPageParameter_${componentID}();
            $j(global_MyPageParmeter_${componentID}).prop('hidden', true);
        });

        function setPageParameter_${componentID}(){
            $j(".polarion-rpe-ParameterEditor-outerPanel").each(function(){
                if($j(this).find("#gwt-debug-polarion-ParameterEditor-label").text() == "$componentID"){
                    global_MyPageParmeter_${componentID} = this;
                }
            });
        }

        function submitRequirementId(element) {
            $j(global_MyPageParmeter_${componentID}).find("#gwt-debug-polarion-StringParameterImpl-input").val(element.innerHTML);
           
            // Apply button
            $j(".polarion-rpe-pageParametersForm-applyButton > tbody:nth-child(2) > tr:nth-child(1) > td:nth-child(2) > div:nth-child(1)").click();
        }

        function submitRequirementId(element) {
            $j(global_MyPageParmeter_${componentID}).find("#gwt-debug-polarion-StringParameterImpl-input").val(element.innerHTML);
            $j(".polarion-rpe-pageParametersForm-applyButton > tbody:nth-child(2) > tr:nth-child(1) > td:nth-child(2) > div:nth-child(1)").click();
        }
</script>
#end

SteffPoint
Posts: 31
Joined: Wed Mar 07, 2018 1:06 pm

Re: Edit Source Code of 'Page Parameters - Block: Parameters' Widget

Postby SteffPoint » Wed Sep 26, 2018 8:28 am

So kind of you to help me.

However I couldn't figure out yet to make it running.

I simply changed the entry in componentID to one of my page parameters (ID = "Query_Selection") I defined on the page. I basically only use enumerations and custom enumerations in the page parameters - does this maybe influence the following part:

Code: Select all

#set($componentID = "Query_Selection")


And besides the $componentID ="" - what else do I have to change in the code? My current version:

Code: Select all

<button onclick="submitRequirementId(this)" id="projectId">Test-Button</button>

## this is ID of your page parameter
#set($componentID = "Query_Selection")


#macro(buildJSEnvironment)
    ## importing jquery
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script>
        // because velocity uses $ and so does jquery. added this line to prevent conflict
        var $j = jQuery.noConflict();
        var DEFAULT_OPTION = '<option value="default" disabled="true" selected="true"> -- select an option -- </option>';
        var global_SelectedProjectPlan = {project : null, plan : null};
        var global_ProjectPlanData = [];
        var global_MyPageParmeter_${componentID} = "";

        $j(document).ready(function(){
            setPageParameter_${componentID}();
            $j(global_MyPageParmeter_${componentID}).prop('hidden', true);
        });

        function setPageParameter_${componentID}(){
            $j(".polarion-rpe-ParameterEditor-outerPanel").each(function(){
                if($j(this).find("#gwt-debug-polarion-ParameterEditor-label").text() == "$componentID"){
                    global_MyPageParmeter_${componentID} = this;
                }
            });
        }

        function submitRequirementId(element) {
            $j(global_MyPageParmeter_${componentID}).find("#gwt-debug-polarion-StringParameterImpl-input").val(element.innerHTML);
           
            // Apply button
            $j(".polarion-rpe-pageParametersForm-applyButton > tbody:nth-child(2) > tr:nth-child(1) > td:nth-child(2) > div:nth-child(1)").click();
        }

        function submitRequirementId(element) {
            $j(global_MyPageParmeter_${componentID}).find("#gwt-debug-polarion-StringParameterImpl-input").val(element.innerHTML);
            $j(".polarion-rpe-pageParametersForm-applyButton > tbody:nth-child(2) > tr:nth-child(1) > td:nth-child(2) > div:nth-child(1)").click();
        }
</script>
#end


Screenshot Page Parameter:
Image

adbarads
Posts: 11
Joined: Mon Nov 13, 2017 7:47 pm

Re: Edit Source Code of 'Page Parameters - Block: Parameters' Widget

Postby adbarads » Wed Sep 26, 2018 4:06 pm

hrmm.... this is not going to work with enumerations.

I had a similar case with me. what I did was instead do this:

instead of using the enum page parameter to fill the values in the drop down select menu.
1) I created a SQL query in the page script that did the exact same thing as the enum.
2) then, I populated a drop down select menu that I created using html from the SQL query.
3) and to push user data to the backend I used a "string" page parameter, to pass what the user selected from my html drop down menu select.

I hope that makes sense. I didn't attempt to use jquery to click on the select enum page parameter menu and do selection.

You will find very quickly, to do anything in Polarion, it is very painful.

SteffPoint
Posts: 31
Joined: Wed Mar 07, 2018 1:06 pm

Re: Edit Source Code of 'Page Parameters - Block: Parameters' Widget

Postby SteffPoint » Thu Sep 27, 2018 7:44 am

Thank you very much again!

Can you please also prodive me any code sample to those three points?

It may be very helpful to me for quicker understanding.


Kind Regards,
Steff


Return to “Polarion Application Lifecycle Management (ALM)”

Who is online

Users browsing this forum: No registered users and 5 guests