Creating Custom Reusable Elements

Objectives

After completing this lesson, you will be able to:
  • Create custom libraries and methods
  • Create custom code lists

Custom Libraries

With the Custom Reusable Elements app, you can modularize your custom code and thus structure your custom code according to your requirements. The app is specifically designed for custom code reuse and supports your productivity and efficiency.

The figure shows the position of the add-button to create a new custom library. When this button is choosen, a pop-up displays, on which you can enter the name and the Library ID of the newly created custom Library.

You can use the Custom Reusable Elements app to:

  • Create and edit custom libraries
  • Create and edit methods, along with the corresponding parameters
  • Create structures

    You can create structures to make your data management and access more efficient. To be able to work with structured data it is possible to define structures for a custom library which can then be used in the definition of method parameters.

  • Create tables

    You can create definitions of tables (like an ABAP table types for internal tables). They can be used for method parameters' typing.

  • Create data objects (variables)

    You create definitions of variables. These variables can be addressed in implementations. So there is not the need to define them repeatedly.

  • Create custom code lists

To create custom libraries and methods proceed as follows:

  1. Open the Custom Reusable Elements app.
  2. Choose + (Add) to create a new custom library.
  3. Define a library name and a library ID for your new custom library. If not changed manually, the library ID will be derived from the custom library name. Then select Create.
  4. Choose + (Add) in the METHODS section to create a new method within your previously created custom library.
  5. Define a method ID and if required a description for your method. Proceed to the method details by selecting the method.
  6. Choose + (Add) to add parameters for your method.
  7. Define a parameter ID and, if required, a name for the parameter. Choose a parameter type that fits your method. Then select a technical type and define length and decimals if required.
  8. You can save the method as a draft or publish it. A method has to be published to enable you to proceed to the editor and enter custom code.
  9. Return to the Library Details and select the method ID to proceed to the editor.
  10. Choose Edit and enter your custom code.
  11. Choose Test to check your custom code for functional correctness.

    Note

    You cannot save or publish your custom code if it contains errors.
  12. Publish your custom code and your method.
The figure illustrates the explanations from below.

In the example shown, the method calc_discount_amount, from the custom library zz1_customer_functions_10, is called in a custom business object. The method parameters amount and discount are supplied with appropriate values. The returning parameter of the method is assigned to the variable customerinvoice10-discountamount_v.

How to Create and Use a Custom Library

For the steps and data of this demonstration, refer to the exercise Create and Use a Custom Library.

Create and Use a Custom Library

Business Example

In this exercise, you create a custom library with one method to modularize and structure your custom code. You will use the library in the implementation of your custom business object.

Note

In this exercise, when the values include ##, replace ## with your group number.

Steps

  1. In the Custom Reusable Elements app, create a new custom library with NameCustomer Functions ## and Library IDZZ1_CUSTOMER_FUNCTIONS_##.

    1. To start the SAP Fiori launchpad of the S4D system, choose the path 10 Development → s4dhost → 10 S4D Fiori Launchpad in the bookmarks bar of the browser.

    2. In the SAP Fiori launchpad, choose the Custom Reusable Elements tile.

    3. On the Custom Libraries tab of the Custom Reusable Elements app, choose + (Add) from the toolbar of the displayed table.

    4. On the New Custom Library dialog that appears, enter Customer Functions ## as Name and ZZ1_CUSTOMER_FUNCTIONS_## as Library ID.

    5. Choose Create.

  2. Create a new method within the previously created custom library with Method IDCALC_DISCOUNT_AMOUNT and DescriptionCalculate Discount Amount.

    1. Choose + (Add) in the METHODS section of the displayed screen to create a new method.

    2. Enter CALC_DISCOUNT_AMOUNT as Method ID and Calculate Discount Amount as Description for the new method.

  3. Add the following parameters to your method:

    Parameter IDNameParameter TypeTechnical TypeProperties
    AMOUNT<your description>ImportingNumberLength:15, Decimals:2
    DISCOUNT<your description>ImportingNumberLength:5, Decimals:2
    DISCOUNTAMOUNT<your description>ReturningNumberLength:15, Decimals:2

    1. Select your newly created method in the table to proceed to the method details.

    2. Use + (Add) from the toolbar of the displayed table to create 3 parameters for your method. Set the Parameter ID, Name, Parameter Type, Technical Type and the Properties of the added parameters as indicated in the table above.

  4. Publish your method.

    1. Choose Publish from the page footer to publish the method.

  5. After publishing create a draft for the method logic and implement it as follows: Calculate the discount amount based on the passed amount and discount. Return the calculated discount amount to the caller using the corresponding returning parameter.

    1. Choose Back to return to the library details.

    2. Choose the Method ID CALC_DISCOUNT_AMOUNT to proceed to the ABAP editor.

    3. Choose Edit.

    4. Enter the following coding in the Draft Code editor:

      Code Snippet
      1
      discountamount = ( amount * discount ) / 100.

    5. Choose Save to save the draft.

  6. Test your custom code for functional correctness within the Custom Reusable Elements application.

    1. In the Test tab, enter appropriate values for the import parameters AMOUNT and DISCOUNT of the method.

    2. Choose the Test button to execute the test run.

    3. Check the content of the returning parameter DISCOUNTAMOUNT after your logic was executed. It is displayed in the Returning parameters view.

  7. Publish your custom code after successful testing.

    1. Choose Publish from the page footer.

  8. Now use the custom library you have just created in your custom business object ZZ1_CUSTOMERINVOICE##: Call the method CALC_DISCOUNT_AMOUNT in the implementation of the action Apply Customer Discount to calculate the discount amount.

    1. In the SAP Fiori launchpad, choose the Custom Business Objects tile.

    2. Open your custom business object ZZ1_CUSTOMERINVOICE## by selecting it in the displayed Custom Business Objects table.

    3. Switch to the Logic tab.

    4. Select the link Apply Customer Discount.

    5. Choose Create Draft.

    6. Adapt the coding in the Draft Logic editor as follows:

      Code Snippet
      12345678910111213141516171819
      SELECT SINGLE FROM d425_i_cust## FIELDS zz1_discount_##_g##
 WHERE id = @customerinvoice##-customerid
 INTO @customerinvoice##-discount.

 IF sy-subrc = 0.
*   old:
*   customerinvoice##-discountamount_v = ( customerinvoice##-amount_v * customerinvoice##-discount ) / 100.
*   new:
    customerinvoice##-discountamount_v = zz1_customer_functions_##=>calc_discount_amount(
                                            amount   = customerinvoice##-amount_v
                                            discount = customerinvoice##-discount
                                          ).
    customerinvoice##-discountamount_c = customerinvoice##-amount_c.
ELSE.
    message = VALUE #(
      severity = co_severity-error
      text     = 'Discount could not be determined'
    ).
ENDIF.

      You might want to use the Insert Code Snippet function. Select it (above the editor), select tab Custom, and find your library and its methods.

    7. Choose Save to save the draft.

  9. Test the adapted implementation of the action Apply Customer Discount, both within the Custom Business Objects application and after publishing via your Manage Customer Invoices app.

    1. To test the draft of your Action logic within the Custom Business Objects application, proceed as described in the previous exercise.

    2. Choose Publish from the page footer to publish the draft version of the Action logic after successful testing.

    3. After publishing test the Action logic via your Manage Customer Invoices app as described in the previous exercise.

Custom Code Lists

The figure visualizes the process of creating custom code lists. This process is described below. The Plus-button opens a screen, which is used to create new custom code lists.

To create custom code lists for reuse in custom applications proceed as follows:

  1. Open the Custom Reusable Elements app and choose the Custom Code Lists tab.
  2. Choose + (New) to create a new custom code list.
  3. Enter the name, the custom code list ID and define the maximum length of the code values.
  4. Choose + (New Code Value) to add code values to the list. Then enter the code value and the description.
  5. (Optional) If required, you can add translations for the descriptions. Choose + (New Translation) and select the language for which you want to maintain the translations.
  6. Click Save and Publish to enable your custom code list for reuse.
The figure shows the positions of the mentioned fields below in the screens.

In the example shown, the field PaymentMethod of the custom business object CUSTOMERINVOICE10 has been typed with the custom code list ZZ1_PAYMENTMETHOD10. This has the effect that an input help is provided for the corresponding input field on the generated UI. This input help can be used to select a value from the code list.

How to Create and Use a Custom Code List

For the steps and data of this demonstration, refer to the exercise Create and Use a Custom Code List.

Create and Use a Custom Code List

Business Scenario

In this exercise, you create a custom code list that contains different payment methods. You will use this code list in the implementation of your custom business object to create a new field. This field will be displayed automatically with a corresponding input help on the UI of your Manage Customer Invoices app.

Note

In this exercise, when the values include ##, replace ## with your group number.

Steps

  1. In the Custom Reusable Elements app, create a new custom code list with NamePayment Method ## and Code List IDZZ1_PAYMENTMETHOD##.

    1. To start the SAP Fiori launchpad of the S4D system, choose the path 10 Development → s4dhost → 10 S4D Fiori Launchpad in the bookmarks bar of the browser.

    2. In the SAP Fiori launchpad, click the Custom Reusable Elements tile.

    3. On the screen that is displayed, go to the Custom Code Lists tab.

    4. Choose + (New) from the toolbar of the displayed table to create a new custom code list.

    5. In the General Information section of the screen that appears, enter Payment Method ## as Name and ZZ1_PAYMENTMETHOD## as Code List ID.

  2. Add the following code values to your code list:

    CodeDescription
    01Bank Transfer
    02PayPal
    03Credit Card

    1. In the Code Values section of the displayed screen, use + (New Code Value) from the toolbar of the table to create the above listed code values.

  3. Publish your custom code list.

    1. To complete the creation of the new custom code list, choose Save and Publish in the lower right corner of the screen.

  4. Now use the custom code list you have just published in your custom business object ZZ1_CUSTOMERINVOICE##. Add the following field to the node CUSTOMERINVOICE## of your business object:

    LabelIdentifierTypeKeyProperties
    Payment MethodPaymentMethodCode List Code List: ZZ1_PAYMENTMETHOD##

    1. In the SAP Fiori launchpad, click the Custom Business Objects tile.

    2. Open your custom business object ZZ1_CUSTOMERINVOICE## by selecting it in the displayed Custom Business Objects table.

    3. Go to the Fields tab.

    4. Choose Edit Draft.

    5. Choose New from the toolbar of the displayed table to create the new field. Set the Label, Identifier, Type, Key property and additional Properties of the added field as indicated in the table above.

  5. Publish your changed business object.

    1. Choose Publish from the page footer.

  6. After publishing check the Manage Customer Invoices app in the SAP Fiori launchpad of the S4D system: There will be an additional field named Payment Method on the object page of an invoice. It will have an input help that can be used to select a value from the code list.

    1. In the SAP Fiori launchpad, click your Manage Customer Invoices tile in the S4D425 group.

    2. Click Create in the toolbar of the displayed table to create a new customer invoice.

    3. Check on the page that appears whether there is a corresponding input field for the payment method.

Log in to track your progress & complete quizzes

Learning

SAP FacebookSAP YoutubeSAP LinkedIn