Monday, 24 April 2017

SAP OTC Process: BAPI Sales Order Create Extension - Part 2

In Part 1 of SAP OTC Process, I discussed a demonstration for Creating Quotations with Extensions. In this part I am going to create Sales orders with customer extensions.

The process which i used is the same as in the Part 1, however there are certain considerations and customization which need to be considered for creating sales order based on customer requirements. In a usual process Sales Orders are created in response to a quotation.

Step 1:

Same structures are adjusted for the custom fields as i did in Part 1 and they are:
  • VBAPKOZ
  • VBAPKOZX
  • BAPE_VBAP
  • BAPE_VBAPX
  • VBAPKOM
  • VBAPKOMX
SD (Sales and Distribution), SAP All Module, Tutorial and Certification, SAP Live, SAP Material

Step 2:

After adding custom fields , next we need to fill up the required tables using the function module BAPISDORDER_GETDETAILEDLIST/

SD (Sales and Distribution), SAP All Module, Tutorial and Certification, SAP Live, SAP Material

Step 3: 

Next is again filling up the extension Container as discussed previously.

SD (Sales and Distribution), SAP All Module, Tutorial and Certification, SAP Live, SAP Material

Step 4:

Now the function module Call for creating the sales order is will be done:

SD (Sales and Distribution), SAP All Module, Tutorial and Certification, SAP Live, SAP Material

Step 5: 

Check if we get values in lv_new_sales_document_type and in ext_cont for the custom fields.

SD (Sales and Distribution), SAP All Module, Tutorial and Certification, SAP Live, SAP Material

SD (Sales and Distribution), SAP All Module, Tutorial and Certification, SAP Live, SAP Material

SD (Sales and Distribution), SAP All Module, Tutorial and Certification, SAP Live, SAP Material

The function module has returned new Sales Order number as mentioned above, and ext container is filled with the custom field values .

STEP 6: 

Now we check the VBAP table with new created sales order number to check if custom fields are updated.

SD (Sales and Distribution), SAP All Module, Tutorial and Certification, SAP Live, SAP Material

Saturday, 8 April 2017

SAP UI5 Table row color change based on status

I am going to write about an interesting topic in SAP UI5. Changing the entire row color of a sap.m.Table based on Status. Generally we keep a text in Status field and change the color of the text according to the Status. But, nowadays customers are asking about this requirement for better user experience.

SAPUI5, All SAP Modules, SAP Certifications

I am going describe you step by step to achieve this goal.

Step 1: Mock oData to display on the table

I am defining a method where I had created a mock data and take in a Name-model.

fnGetLeaveHistoryData:function(){
var oData={
LeaveHistory : [ {
"leaveFrom" : "8 Oct, 2016",
"leaveTo" : "11 Oct, 2016",
"leaveSubject" : "Casual Leave",
"Remarks" : "Casual Leave taken",
"status":"Pending"
},
{
"leaveFrom" : "1 Dec, 2016",
"leaveTo" : "2 Apr, 2016",
"leaveSubject" : "Sick Leave",
"Remarks" : "Sick Leave taken",
"status":"Approved"
},
{
"leaveFrom" : "12 Feb, 2017",
"leaveTo" : "14 Feb, 2017",
"leaveSubject" : "Casual Leave",
"Remarks" : "Casual Leave taken",
"status":"Rejected"
},
{
"leaveFrom" : "7 March, 2017",
"leaveTo" : "10 March, 2017",
"leaveSubject" : "LWP Leave",
"Remarks" : "LWP Leave taken",
"status":"Approved"
},
{
"leaveFrom" : "16 Apr, 2017",
"leaveTo" : "18 Apr, 2017",
"leaveSubject" : "Annual Leave",
"Remarks" : "Annual Leave taken",
"status":"Pending"
}]
};
var oLeaveHistoryJsonModel = new JSONModel(oData);
this.getView().setModel(oLeaveHistoryJsonModel,"LeaveModel");
},

Now the above data I am going to bind with sap.m.Table. I am gone a change the color of the row based on the status. If status is Pending, row color should be Orange, if Rejected, row color should be Red, & if Approved, row color should be Green.

Step 2: sap.m.Table data binding

<Table id="LeaveDetailsTable" showSeparators="All" class="sapUiSizeCompact"     items="path:'LeaveModel>/LeaveHistory'}"> <columns>
 <Column width="7em" minScreenWidth="Tablet" demandPopin="true" hAlign="Center"  >
   <Text text="Leave From" />
 </Column>
 <Column width="7em" minScreenWidth="Tablet" demandPopin="true" hAlign="Center">
  <Text text="Leave Up To" />
 </Column>
 <Column width="8em" minScreenWidth="Tablet" demandPopin="true" hAlign="Center">
  <Text text="Leave Type"/>   
 </Column>
 <Column width="12em" minScreenWidth="Tablet" demandPopin="true" hAlign="Center">
  <Text text="Description"/>
 </Column>
 <Column width="7em" minScreenWidth="Tablet" demandPopin="true" hAlign="Center">
  <Text text="Status"/>
 </Column>
</columns>
<ColumnListItem id="clm" >
   <customData>
     <core:CustomData key="mydata" value="{LeaveModel>status}" writeToDom="true"></core:CustomData>
   </customData>
   <cells >
<Text text="{LeaveModel>leaveFrom}"  />
<Text text="{LeaveModel>leaveTo}" />
<Text text="{LeaveModel>leaveSubject}"/>
<Text text="{LeaveModel>Remarks}" />
<Text text="{LeaveModel>status}"/>
  </cells>
</ColumnListItem>
</Table>

Here i have done the data binding. Inside ColumnListItem I had taken a Custom Data and bind the Status as value. So, on run time for each row one customdata will generate. I am attaching the screen shot bellow. Inside data-mydata  will have the Status of that particular row.

SAPUI5, All SAP Modules, SAP Certifications

Then we need to write the css according to that to assign color.

Step 3: Need to add CSS to put color according to the status

tr[data-mydata="Pending"]{
  backgr
ound:   #ff9933!important;
}
tr[data-mydata="Rejected"]{
  background: #ff3333!important;
}

tr[data-mydata="Approved"]{
  background:  #33cc33!important;
}

Now all set.. here is the output:

SAPUI5, All SAP Modules, SAP Certifications