CSC customization Adding new panels and tabs

Panels and tabs needs to be created for new payment in CSC


ServiceFramework.xml

Add below panelStock and panel defination for each panel.

To display 'new payment orders' on  order toolbar dropdown  as per below screenshot.



 <panel-stack-definition>
    <id>newPaymentOrdersPS</id>
    <app-id>workspace</app-id>
    <enabled-yn>true</enabled-yn>
    <object-type>PanelStackDefinition</object-type>
    <panel-stack-id>newPaymentOrdersPS</panel-stack-id>
    <header>contentHeader</header>
    <error-panel-id>errorPanel</error-panel-id>
    <title-key>newPaymentOrdersPS</title-key>
    <tab-affinity-yn>true</tab-affinity-yn>
    <panel-ids>
      <id-entry>
        <id>errorPanel</id>
        <priority>0</priority>
      </id-entry>
      <id-entry>
        <id>newPaymentOrdersPanel</id> <!-- This is defined below panel-defination -->
        <priority>1</priority>
      </id-entry>
    </panel-ids>
  </panel-stack-definition>

  <panel-definition>
    <id>newPaymentOrdersPanel</id>
    <app-id>workspace</app-id>
    <enabled-yn>true</enabled-yn>
    <object-type>PanelDefinition</object-type>
    <resource-bundle>com.xxx.commerce.csr.FrameworkResources</resource-bundle>
    <template-ids>
      <map-entry>
        <key>panelTemplate</key>
        <value>panelTemplate</value>
      </map-entry>
    </template-ids>
    <panel-id>newPaymentOrdersPanel</panel-id>
    <content-url>/panels/order/newpaymentorders.jsp</content-url> <!-- This panel uses this jsp to display data -->
    <other-context>newagent</other-context>
    <title-key>newpayment.orders.header.label</title-key>
    <visible-yn>true</visible-yn>
    <show-title-yn>true</show-title-yn>
    <panel-open-yn>true</panel-open-yn>
    <allow-panel-toggle-yn>false</allow-panel-toggle-yn>
    <available-yn>false</available-yn>
    <content-open-yn>true</content-open-yn>
    <allow-content-toggle-yn>true</allow-content-toggle-yn>
    <tab-holder-yn>true</tab-holder-yn>
    <always-tabbed-yn>false</always-tabbed-yn>
    <tabbed-yn>false</tabbed-yn>
    <allow-tabbing-yn>true</allow-tabbing-yn>
    <allow-slots-yn>false</allow-slots-yn>
    <tab-scroll-index>0</tab-scroll-index>
    <panel-item-count>0</panel-item-count>
    <access-right>GlobalPanel</access-right> <!-- for everyone access -->

  </panel-definition>

<!-- to display data on click of panel 'newPaymentOrders' -->

  <content-definition>
    <id>newPaymentOrdersTabAction</id>
    <app-id>workspace</app-id>
    <enabled-yn>true</enabled-yn>
    <object-type>ContentDefinition</object-type>
    <content-id>newPaymentOrdersTabAction</content-id>
    <mime-type>text/javascript</mime-type>
    <body>atgChangeTab(atg.service.framework.changeTab('newPaymentOrdersTabDefinition'), null,null,null);</body>
    <url-yn>true</url-yn>
  </content-definition>

  <tab-definition>
    <id>newPaymentOrdersTabDefinition</id>
    <app-id>workspace</app-id>
    <enabled-yn>true</enabled-yn>
    <object-type>TabDefinition</object-type>
    <resource-bundle>com.xxx.commerce.csr.FrameworkResources</resource-bundle>
    <content-ids>
      <map-entry>
        <key>actionJavaScript</key>
        <value>myTabAction</value>
      </map-entry>
    </content-ids>
    <template-ids>
      <map-entry>
        <key>contentHeader</key>
        <value>contentHeaderTemplate</value>
      </map-entry>
    </template-ids>
    <tab-id>newPaymentOrdersTab</tab-id>
    <title-key>newPaymentOrdersTab.resource</title-key>
    <visible-yn>true</visible-yn>
    <access-right>GlobalPanel</access-right>
    <panel-stack-assignments>
      <map-entry>
        <key>preferencesPanel</key>
        <value>contentColumn</value>
      </map-entry>
      <map-entry>
        <key>helpfulPanels</key>
        <value>sidebarColumn</value>
      </map-entry>
      <map-entry>
        <key>newPaymentOrdersPS</key>
        <value>contentColumn</value>
      </map-entry>

      <map-entry>
        <key>globalPanels</key>
        <value>globalCell</value>
      </map-entry>
    </panel-stack-assignments>
    <current-panel-stacks>
      <map-entry>
        <key>newPaymentOrdersPS</key>
        <value>contentColumn</value>
      </map-entry>

      <map-entry>
        <key>globalPanels</key>
        <value>globalCell</value>
      </map-entry>
    </current-panel-stacks>
    <panel-stack-order>
      <id-entry>
        <id>globalPanels</id>
        <priority>0</priority>
      </id-entry>
      <id-entry>
        <id>helpfulPanels</id>
        <priority>1</priority>
      </id-entry>
      <id-entry>
        <id>paypalOrdersPS</id>
        <priority>2</priority>
      </id-entry>
      <id-entry>
        <id>preferencePanels</id>
        <priority>3</priority>
      </id-entry>
    </panel-stack-order>

  </tab-definition>

To display data on click of 'new payment orders' on order toolbar. 'newpaymentorders.jsp' is used to display data from droplet. Here is sample code.



<%@ include file="/include/top.jspf"%>
<dsp:page xml="true">
<dsp:importbean bean="/com/order/paypal/newPaymentCSOrderFormHandler"/>
<style>
table, th, td {border: 1px solid black;}
table {border-collapse: collapse;}
td,th {padding: 6px;}
th { font-weight: bold;  text-align: center;}
.paypalBatchCapture {
    background-color: #56546f;
    border-radius: 25px;
    border: 1px solid #56546f;
    display: inline-block;
    cursor: pointer;
    color: #ffffff;
    font-family: Arial;
    font-size: 15px;
    padding: 2px 22px;
height: 55px;
width: 150px;
float:right;
</style>
<!-- below script to submit the form -->
<script>
newOrderBatchCapture = function (theFormId){
var checkboxes = document.querySelectorAll('input[type="checkbox"]:checked').length -1;
if (confirm("Continue with batch capture for "+checkboxes+" authorizations") == true) {
atgSubmitAction({form:dojo.byId(theFormId),
panels: ["newPaymentOrdersPanel"],
panelStack: "newPaymentOrdersPS"
});
}
};
</script>
<dsp:importbean bean="/com/order/paypal/newPaymentOrdersDroplet" />
<div class="atg_commerce_csr_content">
<dsp:droplet name="newPaymentOrdersDroplet">
<dsp:oparam name="output">
<dsp:form name="batchCaptureForm" id="batchCaptureForm" method="POST">
<table border="1">
<tr><th>S.No</th>
<th>Order Id</th><th>Auth Status</th><th>OrderId(s)</th>
<th>Payment Auth Amount</th><th>Auth Date/Time</th><th>Auth Code</th>
<th>Token</th><th>Capture</th>
</tr>
<c:set var="count" value="1" scope="page" />
<dsp:droplet name="/atg/dynamo/droplet/ForEach">
<dsp:param name="array" param="results" />
<dsp:oparam name="output">
<dsp:getvalueof var="atgOrderId" param="element.atgOrderId"/>
<tr>
<td>${count}</td>
<td>
<c:choose>
<c:when test="${fn:contains(atgOrderId,'_')}">
${atgOrderId}<br/>
<div style="font-size:9px">(add on charge)</div>
</c:when>
<c:otherwise>
<a href="#" onclick="atg.commerce.csr.order.viewExistingOrder('<dsp:valueof param="element.atgOrderId"/>','PROCESSING');return false;">
${atgOrderId}
</a>
</c:otherwise>
</c:choose>
</td>
<td><dsp:valueof param="element.authStatus"/></td>
<td><dsp:valueof param="element.OrderId"/></td>
<td><dsp:valueof param="element.orderTotal"/></td>
<td><dsp:valueof param="element.authDateTime"/></td>
<td><dsp:valueof param="element.authCode"/></td>
<td><dsp:valueof param="element.Token"/></td>
<td>
<c:choose>
<c:when test="${!fn:contains(atgOrderId,'_')}">
<dsp:input type="checkbox" value="${atgOrderId}" bean="newPaymentCSOrderFormHandler.captureOrderIds"/>
</c:when>
<c:otherwise>
<b>*</b>
</c:otherwise>
</c:choose>
</td>
<tr/>
<c:set var="count" value="${count + 1}" scope="page"/>
</dsp:oparam>
</dsp:droplet>
</table>
<dsp:input type="hidden" value="true" bean="newPaymentCSOrderFormHandler.newPaymenmtBatchCapture"/>
<input class="newPaymentBatchCapture" type="button" name="newPaymentBatchCapture" id="newPaymentBatchCapture"
onclick="newPaymentBatchCapture(batchCaptureForm); return false;"
            value="Batch Capture newPayment" form="batchCaptureForm"
            dojoType="atg.widget.validation.SubmitButton" />
</dsp:form>
</dsp:oparam>
</dsp:droplet>
</div>

</dsp:page>


application-csc/src/main/webapp/panels/order/search.jsp  has below code to display anchor tags as per below screenshot


 <div class="atg_commerce_csr_coreSearchOrders">
          <ul class="atg_commerce_csr_panelToolBar">
            <li class="atg_commerce_csr_last"><a onclick="atg.commerce.csr.createOrder();event.cancelBubble=true;return false;" href="#"><fmt:message key='create-new-order'/></a></li>
             <li><a href="#" onclick="atg.commerce.csr.order.newSearch();return false;"><fmt:message key='new-search'/></a></li>
             <li>
            <li><a href="#" onclick="atg.commerce.csr.openPanelStackWithTab('failedOrdersPS','failedOrdersTab');return false;">Order Resubmit</a></li>
            <li><a href="#" onclick="atg.commerce.csr.openPanelStackWithTab('newPaymentOrdersPS','newPaymentOrdersTab');return false;">newPayment Orders</a></li>
          </ul>

 Below screenshot for displaying data for new payment order table on clicking of 'new payment orders' on order's toolbar in search page


Below component is to control to display 'newPaymentOrders' panel in search page

 app-csc/src/main/config/atg/svc/agent/ui/newPaymentOrdersNavAction.properties
$class=atg.svc.agent.ui.NavAction
$scope=window

id=newPaymentOrdersNavAction
sortPriority=900

#controls if this action is available. If not, it will not be included in
#the UI.
available=true
#use this property to assign a specific security access right to this action. If the agent
# doesn't have this right, it will not be included in the UI
#accessRight=

environmentTools=/atg/svc/agent/environment/EnvironmentTools

resourceBundleName=com.commerce.csr.FrameworkResources
labelResourceKey=newPayement.orders.header.tab.label


javaScriptFunctionCall=atg.commerce.csr.openPanelStackWithTab('newPaymentOrdersPS','newPaymentOrdersTab');

This component has to be registerd in 
app-csc/src/main/config/atg/svc/agent/ui/OrderNavActionFactory.properties

actions+=\
/atg/svc/agent/ui/ConfirmationNavAction,\
    /atg/svc/agent/ui/FailedOrdersNavAction,\
    /atg/svc/agent/ui/newPaymentOrdersNavAction


Below screenshot to display new Payment details on click of specific order in Orderdata table shown in previous screenshot



Here is sample code for above screenshot in app-csc/src/main/webapp/include/order/orderViewUIFragment.jsp

 <div class="atg-csc-base-table-row">
<span class="atg_commerce_csr_fieldTitle atg-csc-base-table-cell atg-base-table-order-view-first-label">New Payment Order Management</span>
<span class="atg_commerce_csr_fieldData atg-csc-base-table-cell">
<br/>
<b>Payment Method:</b> ${paymentGroup.paymentMethod}<br/>
<b>Amount Authorized:</b>$${paymentGroup.authAmount}<br/>
<b>Authorization Code:</b> ${paymentGroup.authCode}<br/>
<b>Auth Date/Time:</b> ${paymentGroup.authDateTime}<br/>
<b> Payer Id:</b> ${paymentGroup.Id}<br/>
<b> Payment Id:</b> ${paymentGroup.paymentId}<br/>
<b> Order Id:</b> ${paymentGroup.orderId}<br/>
<b> Email Id:</b> ${paymentGroup.emailId}<br/><br/>
<c:if test="${paymentGroup.authStatus eq 'authorized'}">
<span id="captureLink">
<a href="#" id="captureRef" onclick="newPaymentOperation(this.id)">Capture Funds</a>
<br/><br/>
<a href="#" id="addonRef" onclick="newPaymentOperation(this.id)">Add on newPayment Funds</a>
<br/><br/>
</span>
<span class="atg_commerce_csr_fieldData atg-csc-base-table-cell">
<svc-ui:frameworkUrl var="successURL" panelStacks="globalPanels,newPaymentOrdersPS"/>
                    <svc-ui:frameworkUrl var="errorURL" panelStacks="globalPanels,newPaymentOrdersPS"/>
<dsp:getvalueof var="orderId" vartype="java.lang.String" value="${order.id}"/>

<dsp:form id="captureForm" method="POST" name="captureForm" formid="newPaymentCaptureForm" action="">
<b>Capture Funds:</b><br>
Amount:&nbsp;$&nbsp;${paymentGroup.authAmount}&nbsp;&nbsp;
<dsp:input bean="newPaymentCSOrderFormHandler.captureAmount" id="captureTotal" type="hidden" value="${paymentGroup.authAmount}"/>
<dsp:input bean="newPaymentCSOrderFormHandler.atgOrderId" type="hidden" value="${OrderId}"/>
<dsp:input bean="newPaymentCSOrderFormHandler.captureErrorUrl" type="hidden" value="${successURL}"/>
<dsp:input bean="newPaymentCSOrderFormHandler.captureSuccessUrl" type="hidden" value="${errorURL}"/>
<dsp:input bean="newPaymentCSOrderFormHandler.newPaymentCapture" type="hidden" value="true"/>
<input class="newPaymentCapture" type="button" name="newPaymentCapture" id="newPaymentCapture"
                                onclick="newPaymentCapture(captureForm); return false;"
                                value="Capture newPayment" form="captureForm"
                                dojoType="atg.widget.validation.SubmitButton" />
<br/> 
</dsp:form> //captureForm closing

<dsp:form id="addonForm" method="POST" name="addonForm" formid="addonForm" action="">
<b>Add on amount(New charges only):</b><br>
Amount:&nbsp;$&nbsp;<dsp:input bean="CSOrderFormHandler.addonAmount" id="addonAmount" type="text" />&nbsp;
<dsp:input bean="CSOrderFormHandler.atgOrderId" type="hidden" value="${orderId}"/>
<dsp:input bean="CSOrderFormHandler.captureErrorUrl" type="hidden" value="${successURL}"/>
<dsp:input bean="CSOrderFormHandler.captureSuccessUrl" type="hidden" value="${errorURL}"/>
<dsp:input bean="CSOrderFormHandler.paypalAddon" type="hidden" value="true"/>
<input class="newPaymentAddon" type="button" name="newPaymentAddon" id="newPaymentAddon"
                                onclick="NewPaymentAddon(addonForm); return false;"
                                value="Add on New Payment" form="addonForm"
                                dojoType="atg.widget.validation.SubmitButton" />
</dsp:form>  <br/> //addonForm closing
</span>
</c:if>
</span>

</div>


<script>
$( document ).ready(function() {
$("#captureForm").hide();
$("#addonForm").hide();
});
function newPaymentOperation(id) {
if(id == 'captureRef'){
$("#captureForm").show();
$("#addonForm").hide();
}
if(id == 'addonRef'){
$("#addonForm").show();
$("#captureForm").hide();
}
}
newPaymentCapture = function (theFormId){
if (confirm("Continue with capture for $"+$("#captureTotal").val() +"\nValid add-ons, if any, will also be captured along with this.") == true) {
atgSubmitAction({form:dojo.byId(theFormId),
        panels: ["newPaymentOrdersPanel"],
        panelStack: "newPaymentOrdersPS"
});
$("#captureRef").hide();
$("#addonRef").hide();
$("#captureForm").hide();
$("#addonForm").hide();
}
};
newPaymentAddon = function (theFormId){
atgSubmitAction({form:dojo.byId(theFormId),
        panels: ["newPaymentOrdersPanel"],
        panelStack: "newPaymentOrdersPS"
});
$("#captureRef").hide();
$("#addonRef").hide();
$("#captureForm").hide();
$("#addonForm").hide();
} 
};
</script>

 When you click on Capture link,Below screen will appear



When you click on Add on Funds, Below screen will appear



<dsp:form id="addonForm" method="POST" name="addonForm" formid="AddonForm" action="">
<b>Add on amount(New charges only):</b><br>
Amount:&nbsp;$&nbsp;
<dsp:input bean="CSOrderFormHandler.addonAmount" id="addonAmount" type="text" />&nbsp;
<dsp:input bean="CSOrderFormHandler.OrderId" type="hidden" value="${OrderId}"/>
<dsp:input bean="CSOrderFormHandler.captureErrorUrl" type="hidden" value="${successURL}"/>
<dsp:input bean="CSOrderFormHandler.captureSuccessUrl" type="hidden" value="${errorURL}"/>
<dsp:input bean="CSOrderFormHandler.Addon" type="hidden" value="true"/>
<input class="newPaymentAddon" type="button" name="newPaymentAddon" id="newPaymentAddon"
                                onclick="newPaymentAddon(addonForm); return false;"
                                value="Add on New Payment" form="addonForm"
                                dojoType="atg.widget.validation.SubmitButton" />

</dsp:form> 

Comments

Post a Comment

Popular posts from this blog

how to generate classes from swagger

Generate java classes from swagger API java -jar swagger-codegen-cli-2.2.1.jar generate -i swagger.json -l java -o modelFolder --library feign --api-package "com.company.res.proj.api" --model-package "com.company.res.proj.dto" --group-id "com.company.trip" --artifact-id "trip-swagger-client" --artifact-version "1.0.0" 1. download swagger-codegen-cli-2.2.1.jar from internet 2.Download .JSON from swagger documentation tool 3.run this where swagger-codegen-cli-2.2.1.jar and swagger.json exists BashScript #!/bin/bash curl -s https://repo1.maven.org/maven/io/swagger/swagger-codegen-cli/2.2.1/swagger-codegen-cli-2.2.1.jar -o swagger-codegen-cli-2.2.1.jar curl --insecure -s -H "Accept: application/json" https://swaggerhub.com.com/v1/apis/r55439/emp-Create/0.0.1 -o emp-service-definition.json rm -rf emp-client mkdir emp-client java -jar swagger-codegen-cli-2.2.1.jar generate \             ...
Read more
  Query to search for table in DB schema ------------------------------------------ SELECT * FROM all_tables where owner = 'TEST_SCHEMA' and TABLE_NAME like ('%MASKING%'); Query to find for table updates or inserts in Table DB ----------------------------------------------------------------------- select table_owner,table_name,inserts,updates,deletes from dba_tab_modifications  where table_name = 'TEST_MASKING';
Read more

How to create new user/account in BCC

Image
How to create new user/account in BCC Go to internal users in content.xyz.com/atg/bcc Select new user as shown below screen Add details in below screen Click on Org & roles Tab Select primary organization as root Select roles as Epub-Super-Admin , Portal-Admin, Search -Access Logout  and login with newly created User
Read more