Display Custom Fields In The Header Area of FB60 and FV60

Some SAP clients need extra information added in to a standard SAP process. Here we’ll explore how to add custom fields in the header areas of t-codes FB60 and FV60. FB60 is for posting vendor invoices and FV60 is for parking vendor invoices. In this sample, we’ll be adding in two custom fields.

From research, I found that BAdi BADI_FDCB_SUBBAS01 would work for the initial requirement. I decided to use BADI_FDCB_SUBBAS04 since some of the 01,02s are used by SAP. Go to t-code SE19 to create a BAdi implementation. It’s a classic BAdi rather than a new BAdi. Choose a name and click change. It will ask you to create it and give it the name of the BAdi, which we’d put BADI_FDCB_SUBBAS04.

We get a screen that tells us the two methods that the BAdi has and the name of the implementing class.

The methods should be double clicked and each filled in as follows:

method IF_EX_BADI_FDCB_SUBBAS04~PUT_DATA_TO_SCREEN_OBJECT.
* fill interface attributes from importing paramters
  me->if_ex_badi_fdcb_subbas04~invfo  = im_invfo.
endmethod.
method IF_EX_BADI_FDCB_SUBBAS04~GET_DATA_FROM_SCREEN_OBJECT.
* fill export parameters from interface attributes
  ex_invfo  = me->if_ex_badi_fdcb_subbas04~invfo.
endmethod.

On the subscreens tab, we define a program and screen call based on screen 10 since it’s for Vendor Basic Data and we’re adding to vendor screens.

We then must activate the BAdi implementation so that in the Runtime Behavior section, it says Implementation is called. Note: at this point, it will not work. You need to add your new fields to BKPF, VBKPF, and BSEG via append structures. For BKPF, you open the table in SE11. You then click the Append Structure… button at the top and the appends for BKPF will show up. You then click the piece of paper at the top to create.

It will ask you to name your append structure. You fill out the short description, the z fields, give it an enhancement category, and activate. If everything works fine, it will say active. Do this for all three tables.

At this point, it will still not be working. We still have to create our program and screen. Create a program via SE80 and create a custom screen for it. Create the screen however specified and then fill in the flow logic. Note: In PAI, you must put each field that you define after FIELD:.

You may wonder how INVFO has these fields, and that’s because it’s also enhanced when you add the append structure to BSEG. On the main program, you’ll fill out all the modules and create some data definitons:

REPORT  zf_vendor_invoice.
************************************************************************
*                       T A B L E S                                    *
************************************************************************
TABLES invfo.
************************************************************************
*                  D A T A     D E F I N I T I O N                     *
************************************************************************
DATA: o_bad    TYPE REF TO if_ex_badi_fdcb_subbas04.
*name of the badi reference
*----------------------------------------------------------------------*
***INCLUDE LZF_VENDOR_INVOICEO01 .
*----------------------------------------------------------------------*
*&---------------------------------------------------------------------*
*&      Module  STATUS_9200  OUTPUT
*&---------------------------------------------------------------------*
*       Create a subscreen object and get data from the screen
*----------------------------------------------------------------------*
MODULE status_0100 OUTPUT.
  CALL METHOD cl_exithandler=>get_instance_for_subscreens
    CHANGING
      instance                      = o_bad
    EXCEPTIONS
      no_reference                  = 1
      no_interface_reference        = 2
      no_exit_interface             = 3
      data_incons_in_exit_managem   = 4
      class_not_implement_interface = 5
      OTHERS                        = 6.
  IF sy-subrc <> 0.
*   MESSAGE ID SY-MSGID TYPE SY-MSGTY NUMBER SY-MSGNO
*              WITH SY-MSGV1 SY-MSGV2 SY-MSGV3 SY-MSGV4.
  ENDIF.
* object created  ?
  CHECK NOT o_bad IS INITIAL.
* get data from main screen
  CALL METHOD o_bad->get_data_from_screen_object
    IMPORTING
      ex_invfo = invfo.
ENDMODULE.                 " STATUS_9200  OUTPUT
*&---------------------------------------------------------------------*
*&      Module  USER_COMMAND_9200  INPUT
*&---------------------------------------------------------------------*
*       Put data into the screen
*----------------------------------------------------------------------*
MODULE user_command_0100
   INPUT.
  CHECK NOT o_bad IS INITIAL.
* put data to main screen
  CALL METHOD o_bad->put_data_to_screen_object
    EXPORTING
      im_invfo = invfo.
ENDMODULE.                    "user_command_9200 INPUT
*&---------------------------------------------------------------------*
*&      Module  RECEIVE_ACTUAL_DATA  INPUT
*&---------------------------------------------------------------------*
*       Get data from screen
*----------------------------------------------------------------------*
MODULE receive_actual_data INPUT.
*  object created  ?
  CHECK NOT o_bad IS INITIAL.
* get data from main screen
  CALL METHOD o_bad->get_data_from_screen_object
    IMPORTING
      ex_invfo = invfo.
ENDMODULE.                 " RECEIVE_ACTUAL_DATA  INPUT
*&---------------------------------------------------------------------*
*&      Module  CHECK_TCODE  INPUT
*&---------------------------------------------------------------------*
*       check the t-code – We want it to show up for FB60 and FV60, but
*	  hide it for any other screen that hits this enhancement
*----------------------------------------------------------------------*
MODULE check_tcode OUTPUT.
  IF sy-tcode <> 'FB60' AND sy-tcode <> 'FV60' AND sy-tcode <> 'FB03'.
    LOOP AT SCREEN.
      IF   screen-name = 'INVFO-ZZE_DAT'
        OR screen-name = 'INVFO-ZZE_LOC'
        OR screen-name = 'DATE'
        OR screen-name = 'LOCATION'.
        screen-active = 0.
        MODIFY SCREEN.
      ENDIF.
    ENDLOOP.
  ENDIF.
ENDMODULE.                 " CHECK_TCODE  INPUT

Once this is activated, you will see the screen fields(Event Date and Event Location):

You can also look at any document created and see those fields held in BKPF or VBKPF.

Adding custom fields to many SAP screens follow the same procedure. Knowing how to do this will help you add value to your customer and provide them the ability to have some custom information added in to a standard process.

Brandi Setzler
Senior Programmer Analyst
Brandi Setzler

User Experience (UX) – Whole Team Involvement

Sometimes I find that there are multiple ways to describe my job position: user interface designer, user experience designer, and graphic designer can all adequately describe the roles I fill at Rural Sourcing, but what do I actually do? A large part of what I do is help clients discover the best way to visually display and interact with their product. Often I am labeled as the person who just “makes it look pretty.” User experience (UX) is much more than just making something “look pretty.” UX is about making interactions simple and visually providing users with the best solution they will easily understand. Another thing to remember is that it’s not always just about the user; the overall experience should meet as many goals and requirements as possible for both the business and the user. A similar understanding of the role of the UX designer can help businesses, designers, and developers provide the best service to clients.

Developing and designing around a great user experience can be a problem. The best way to achieve a great user experience is through collaboration of everyone on a team. If designers want their designs to be built, they need to be involved through the whole process – especially when issues arise and when the scope changes during development. It’s easier to understand the end of the story if we’re there to hear the beginning, right? Involving designers early, when products are still in the development stage, helps paint a clear picture of what the end product is intended to be. Developers can work out design issues by interacting with designers and collaborating on clear documentation. As quality assurance (QA) testers verify that a project has met its technical requirements, designers can also utilize them through identification of issues with front-end design implementation. The entire project team can benefit from collaboration between designers, developers, and testers. Early team collaboration can help eliminate time wasted on tedious corrections and edits.

Jared Spool, CEO at the world’s largest usability research firm, says that the most common flaw he has found is that companies think “good experience design is an add-on, not a base requirement.” There are always unanswered UX questions that arise, and utilizing a UX designer early can save time on ramp-up and rework for any project. For example, a small change to a design that supports reuse of components can help make development faster, which in turn frees up time for work on more complex areas. Everyone sets out to achieve the best product they can; success can be attained through collaboration between the entire team, early involvement of UX designers, and a cohesive understanding of what UX can bring to a project; so how do you engage your UX designer(s)?

Kelly Shubnell
Associate Programmer Analyst
Kelly Snubnell

The Visual Web

In this blog, I will be examining the concept known as the Visual Web. Take moment and look around you – the web is changing, now more than ever. More and more, websites and even mobile applications are joining what is being called the Visual Web. This begs the question: What is the Visual Web, where does it come from, and what does it mean to you?

First, let’s take a brief look back to the design origins of the web. When websites were first created, they were designed to mimic documents; web pages were essentially sheets of paper in the giant filing cabinet of the internet. Even up until the mid-2000s, almost every web-page was devoted to a singular purpose: relaying text.

Then something subtle occurred. People received ever-increasing access to smart devices and high-quality media. With a camera in every pocket, it was no longer necessary to share these long, in-depth recollections of current events. YouTube had a big red ‘Upload’ button right on the home page. People didn’t have to host their own site just to upload some pictures onto a webpage. As media became more prevalent, the web began to reshape itself into the internet we know today.

connections counter

At the time of this writing, Cisco reports over 12.5 billion devices connected to the internet. That is a lot of devices, each with different form factors, resolutions, input devices, software and hardware. How are you supposed to show your Instagram selfie on 12 billion devices?! Luckily, this new ‘Visual Web’ thing accounts for this using something called responsive design. This means that the flow of the website can change based on the screen it’s on so you always get the best version. On top of that, many sites are designed mobile-first, meaning that the site is built to look good on a phone and then scaled to a larger screen to avoid compromise.

Another huge aspect is iconography. By representing well-known actions or ideas with images, a site can convey a great deal of information in a single element. Of course, people have been making icons for years – you have the floppy disk, the printer, clipboard, scissors, etc., but until recently websites could only display glossy images which were large, didn’t scale well and had a plethora of download issues. The icons used today are simply fonts; they’re rendered exactly the same as the letters you’re reading now, perfect on any screen.

Lastly, Visual Web sites are fast. Using content delivery networks, front-end code can be held on a central repository. This is so that if you browse to a site that uses a library you’ve already encountered, your browser can recognize the repository and load the library from cache. This is much faster, and saves a lot of data in the long-run. Many of these websites also use a one-page design so that most or all of the site is hosted on a single page; this prevents the browser from reloading everything when you click a button or link, and also means the site can respond to you in real-time.

So what does it all mean? Faster, cleaner browsing wherever you go and more access to the content you enjoy without the clutter. Plus accessible information in the form that fits you most. The truth is, it’s hard to say for sure what the limits are. People are finding new ways to use and improve the Visual Web every day, and it’ll soon evolve into yet another discernable version of the internet. Just be sure to pay attention; things are about to get really cool.

Christopher Johnson
Junior Associate Programmer Analyst
Christopher Johnson