Custom Button Nugget

Custom Control Design: Boolean Buttons
I was giving help to someone to help them make their buttons look better when I was asked to discuss how to make nice custom controls in a more formal way that everyone could benefit from (special request from Jeff Bohrer) in this thread.
http://forums.ni.com/t5/LabVIEW/Decal-Custom-Control/m-p/1544212
First let me show some of my controls and then we can talk about how they are made. We will also discuss the dos and don’ts of making nice buttons.
To do something like this you will need to have an artistic flair or access to someone that does. It takes a long time to design and develop the icons that you see. There are many parts and like writing code there are many little pieces that are required to make these things look good. So I am going to have to assume that you have access to custom icons that you want to use for this process.
First thing that you want to do is create a button on the front panel of the program that you are working on. Right click on the button and you will see and option for advanced and customize.
This will open a new window which is a custom control window.
From Here if you click on the wrench button in the menu bar it will allow you to edit the button.
You will see tweezers after you click this button. This is where the magic happens. If you click on the Window option in the menu bar you will see an option for show parts window. This window will show all of the parts that make up this control. There are three parts for a Boolean button. We are only worried about the button part. You can also click on the button part to edit what you need. If you right click on the button you will see these options.
We need to talk about some of these options and what they mean when you are importing your custom icons.
Result of option:
import from the clipboard - this will distort the picture and it will look fuzzy.
import from the clipboard at same size - this will distort the picture and it will look fuzzy. It will be worse if the button is bigger than the picture that you are importing.
Import from file – This is the best option as it will make nice pictures as long as the picture that you are importing is the same size as the button that you are importing to. The way to make your buttons look the best is to edit them in a picture editing program prior to importing them so that they are the same size.
Import from File at Same Size – This can distort the picture if it is a different size than the button that you are importing to. This can make your pictures look fuzzy.
So when I make a custom icon I make sure that it is the same size as the button that I am using so I get the best picture quality that I can. You need to also remember that if you resize the button on the front panel that it will distort the picture ion on your new custom button. If you need to make a different button size you need to make a different size icon to go with it. It can get very time consuming to do this correctly.
Tim
Johnson Controls
Holland Michigan
Attachments:
Green Button Control.ctl ‏314 KB

Thanks for the nugget. I was doing some new button designs today, so I add my newest findings right here.
At first: resizing is a bit critical. Get your design as a vector graphic (svg using inkscape), then use it on a LV button of the same size. A good start for design is tango, because it's all public domain (be aware of licensing issues when using icons from the net, most stuff on wiki-commons is CC-SA='share alike' which might force you to open your code!) and svg.
In this case, I use the IEC5010 On/Off Symbol (found here). Using inkscape, I did export a 16x16 png (attached). Now let's get it into LV:
Place a 'Modern->Boolean->Round LED' on a FP and go to Advanced->Customize. Little trick from the micro-nuggets-thread: use the win explorer to drag-drop the png file on the control FP. Now Select and Cut/Ctrl+X. Right-Click the Round LED and select 'Import Picture' -> Decal. (Do NOT switch to edit mode for this). Wow, the frame is now around both the on and off led. Below my result for 64x64 px size.
Get different sizes by: 1. export the png from Inkscape in the appropiate size and 1. Resize the round LED befor copying it from the clipcoard.
As mentioned in the original post, the image does not scale with the button resizing as usual.
I have some more tricks. Hope the weekend gives me the time to post them.
Felix
www.aescusoft.de
My latest community nugget on producer/consumer design
My current blog: A journey through uml
Attachments:
On_Off_16.png ‏1 KB

Similar Messages

Add on custom button to ALV toolbar in std tcode ME51N, ME52N and ME53N.

Hi All,
I have the requirement to add on the custom button to ALV toolbar in ITEM OVERVIEW for standard transaction ME51N, ME52N and ME53N. Does anyone know what enhancement point or user exit i should apply and how i can add on the custom button?
Thanks.

There are no user exits or badi's for COOIS. You may have to make copy of the PPIO_ENTRY to ZPPIO_ENTRY including all the varians without changing their names like copy SAP&COOIS to SAP&COOIS. Create a T-Code ZCOOIS and replace COOIS in variant SAP&COOIS to ZCOOIS not in the name of the variant but in the field "Check Authorization for".
The PF-Status is found in the include LCOISOUTPUTF16 which is located in the function group COISOUTPUT you may have to copy that too. Finally you need to copy SAPLCOISOUTPUT with its GUI status GENERAL and add your custom button there.

Custom button on ALV report for Tcode FL10G ?

Hi All,
I want to add custom button in the AVL report for FL10G transaction. And then need to implement logic for that button (calling BAPI to create shipment for the selected records).
For VL10G alv program GUI Status - STANDARD001 I think I can add button in this gui by using access key.
But how to implement logic for this custom button? Where I can put the code for this button logic?
Please let me know if any one has any ideas on this issue.
I appreciate your help and time on this.
Thanks.
M

Hi Murali,
The standard program it will not allow to copy the GUI Status. Because source and target program should not same.
It will definitely debug will work. Yo can create the GUI Status through SE41. In SE41 Just give Program name :SAPLV50R_VIEW click the button status. here you should not give any gui status. just blindy say create the then it will popup screen appears in the screen. Here you can mention your Z GUI Status. It is not required to create all the menus manually instead of the there is button which is located in the screen next to blue i button. here you can click and select the standard interface. You can get all the menus as similar to standard. Like that you should create Menu Bar, Application Toolbar and Function Keys Menus. Then you can add your custom button in the Application tool bar button.
When you execute the Transaction VL10G and check your cusom menu button will appears. Once you click custom button only exit will trigger. Find the below code for your reference.
CODE
        loop at ct_postab assigning <fs>
                where selkz = 'X'.
*To Fill the BAPI Header Parameters
              str_ordhdr-ship_cond = w_sval-value.
*To Fill the BAPI HeaderX Parameters
              str_ordhdrx-updateflag = 'U'.
              str_ordhdrx-ship_cond = 'X'.
              call function 'BAPI_SALESORDER_CHANGE'
                exporting
                  salesdocument    = <fs>-vbelv
                  order_header_in = str_ordhdr
                  order_header_inx = str_ordhdrx
                tables
                  return           = str_return.
            endloop.
            read table str_return into w_return index 1.
            if sy-subrc eq 0.
              if not w_return-type = 'S'.
                message w_return-message type 'E'.
                leave to current transaction.
              endif.
            endif.
*Do the BAPI Commit
            call function 'BAPI_TRANSACTION_COMMIT'
              exporting
                wait = 'X'.
          endif.
        endif.
      endif.
Let me know if you have anything to discuss on the same.

How can I create a custom button for opening a form?

I have a parent form having child forms. In my main form I want to create custom buttons for opening child forms. I want to use master-detail form but there are more than one child forms, and in master-detail form I can only create one detail form. So I will create a form based on a table and in that form I will call the child forms by custom buttons. Can I do that?
Thanx,
Gulsah.

This can be easily done. First open up two instances of your Portal. In one window, you will need to go into your component you wish to link FROM. In the other window you will need to go into your component you wish to link TO. In the component you wish to link TO there will be a moduleid. Note this somewhere. Then, you will see an area that says: "Call Interface: Show". Click on this. (In the window you are linking to.). In this window, you will see a bunch of stuff. At the bottom you will see a URL call. This is the call you need to use. At the top, it explains each piece of the URL call. Just subsitute YOUR appropriate information into the URL call. In the form you wish to link FROM, create a button. Once you create this button, it will appear at the bottom, click on it and you will see an area to insert a Javascript. Click the onClick and insert:
//this is the variable you want to pass from one form to the other
get_field_name = getField(this.form,'COLUMN_NAME_IN_DATABASE');
//this is so you can open the "child" form
window.open('/pls/cc_prod/DAD_NAME.wwa_app_module.link?p_arg_names=_moduleid&p_arg_values=MOD_ID_HERE&p_arg_names=_sessionid&p_arg_values=&p_arg_names=COLUMN_NAME_IN_DATABASE&p_arg values='+GETFIELD_NAME+'&p_arg_names=_COLUMN_NAME_IN_DATABASE_cond&p_arg_values=%3D');
In the fourth tab, where it says, "....before displaying form" insert the following: (This will tell the form how to handle the getField function.)
htp.p('<script language="JavaScript1.3">
< !--
function getField(form,fieldName)
var objName = "";
var tmp = "";
var dAction = "";
var sel_idx = 0;
var cnt = 0;
var instance = 0;
var slicedName;
var fillData = new Array();
for (var i = 0; i < form.length; i++)
slicedName = form.elements.name.split(".");
tmp = slicedName[2];
instance = parseInt(slicedName[3],10);
if (!tmp)
continue;
objName = tmp;
if (objName == fieldName)
return form.elements[i].value;
//-->
</script>');
I hope this helps.
null

How can I open a URL from a Custom Button in a second help window?

I have a custom button, which currently opens a URL in a web
browser, using a redirect page. How can I change this so that it
opens in a second help window instead? If I understand some of the
posts I've read, it is possible by linking the button to a related
topics function but I've no idea how this is done.
As usual, your help is most appreciated. Thanks a lot.

Hi, ecoulyn,
You need to make a topic file like the one below the target
of the Jump button.
The onLoad function on the Body start-tag causes the Related
Topics command to fire when the topic file is loaded in the topic
pane. When specifying the file name of the topic to display in the
secondary window, you must always prepend it with the name of your
.chm file, followed by "::/". Otherwise, an error message appears
when the Jump button is clicked.
Pete

How to create a custom Button in a SNP planning book

Hi Experts,
I created my own Planning Book and Dataview in SNP with 3 Key Figures: KF1, KF2, KF3. Now I want to create one my own button with Macro so that when I press that button, the Macro will run to calculate: KF3 = KF1 + KF2.
I know that I can drag this Macro to one of default events like: Default, Level Change, Start. But actually, I want to create my own button so that I can handle the event as I want.
My question are:
1. How to create a custom button on the toolbar of SNP Planning book and writing macro for the button?
2. Please give me any document, material teaching about writing macro and relating to my above scenario.
Thanks very much!
Duyennx
Edited by: xuanduyen on Sep 6, 2011 9:20 AM

Hi,
Access the transaction "/n/sapapo/advm". In the list select your planning book/ data view and click 'Start Macro Builder' button.
In the Macro builder screen, drag and drop your macro from Macro depot to the work area.
Right click on your macro name and select 'properties'. In the pop up, next to the Assigned Push button field, there is a button 'Choose'. Click that. It will display all the available icons. In standard system, it displays more than 1000 icon. Choose any one icon which is suitable for your macro function. Close the pop up and save the macro. This will assign a push button to your macro.
In the Planning book tool bar, you can see the selected icon in the header tool bar. Just by clicking that icon, you can execute the macro interactively.
And I don't know whether we can include/design our own icon. But there are already 1000+ standard icons to choose.
Regards,
Manimaran M.

How to add a custom button in WD screen to call a workflow in siebel?

Hi All,
We have a requirement to have a custom button at the summary screen(after the rule execution) "Create Opportunity", on clicking on it a new opportunity record should be created in Siebel. As we know the "Save" link calls "PolicyAutomationSaveSession" inbound web service method and saves the information in session table and we can modify the PreSession and PostSession workflows. But we are not sure how it calls the service method and where is the mapping defined.
Can you please help me on how to add a custom button and how to invoke a workflow in siebel side to implement this requirement?
Also is there any document which can help me to add a custom button in screen and to add the code behind the button?
Thanks in advance!!
Regards,
Subhradeep

Subhradeep,
Closing a Web Determinations window is essentially the same as closing any HTML window. It involves javascript, which you would have to add to the Web Determinations templates.
Essentially the javascript command to close a window is {{window.close}} or {{top.close}}
For timing, you might be able to use the setTimeout function of Javascript (see: http://www.w3schools.com/jsref/met_win_settimeout.asp)
At the risk of exposing exactly how bad my javascript skills are, I have attached a super-simple html fragment, a page that closes itself after 3 seconds. It may help you get started in the right direction. In general closing a window is a fairly dubious activity and is often not permitted by certain browsers. This html page at least works in Internet Explorer.
<html>
     <head>
     <script language="JavaScript">
          setTimeout(closeMe, 3000);
          function closeMe() {
               alert("This window will close");
               top.close();
     </script>
     </head>
     <body><B>This window will close in three seconds</B></body>
</html>
{code}

Add a custom button on notification page and open a oaf page after button

Hi All,
My Requirement is add a custom button on notification page and after button click with take some parameter from notification page like supplier_id and org_id then open a new oaf page and show supplier credit and debit balance but problem is that button is only enable to a ap invoices notification not for other type of notification.
how to take approach/action i don't know.
it is possible through OAF personalization/customization or it is part of work flow customization.
Navigation path - payable->worklist->open notification and Type of notification also there
Type should be matched with AP_Invoices type notification then custom button enable.
Please Let me know is it possible or not. If possible how to achieve this. ...................................it's argent...plz help me
Edited by: 815572 on Nov 25, 2010 1:15 AM

Hi Irk,
My notification came in given below format (in table) but my custom button only enable for Contract Approval Type not for others..........i hv attach a button on notification page (subject-Contract 21969-R17......)
From Type Subject Sent
Taylor, Phillip Contract Approval Contract 21969 - R17-AUG-07 06:19:27 has been approved by Taylor, Phillip 22-Aug-2007
Taylor, Phillip OKS Contract Process Contract 21975 - R17-AUG-07 06:22:18 for AT&T Universal Card (52,500.00 USD) has been published online 19-Aug-2007
Taylor, Phillip OKS Contract Process Contract 21969 - R17-AUG-07 06:19:27 for AT&T Universal Card (15,000.00 USD) has been published online 19-Aug-2007
If I just put a button SHOW BALANCE just like notification button APPROVE, REJECT, REASSIGN but this button shows all types of notification and my req. is this button show only for Contract Approval type notification. how to handled this issuesss ?
if extend the co of notification page then how to handle TYPE value from worklist page ....please write proper code if u hv any idea...........
Thanks,

Add Alt Attribute Info to a Custom Button

I have created an alternative to editing the
“whtbar.js” file to give an image alt attribute
information. We have a custom button in our help file that needed
alt information, but we had already incorporated the text into the
button’s image and did not want to add the text label. We
also did not like the visual border treatment that adding a text
label did to the button.
I wrote this JavaScript function that will not only
accomplish this, but it will also capture the functionality that
RoboHelp creates for the OnClick event handler and duplicates it in
an OnKeyPress event handler for that same button. I have
successfully tested this script in both IE (IE 6.0) and Mozilla
(Firefox 1.5), and it appears to work fine.

The OP probably tried to attach it to their post, but it was stripped by the forum software. Hopefully they can show a screenshot image (using the camera icon in the web interface) to display the coding.

Custom button goes missing after click the button in Customer Master

Hi All,
I have one query regarding Custom tab button in Custome MAster.I have implemented BAdIs using CUSTOMER_ADD_DATA_CS and CUSTOMER_ADD_DATA to match my requirment.
Query:
While click the custom button(which i have created in Customer Master) , the subscreen is displayed but the Custom Button is missing.Where in Standard Buttons like 'GENERAL DATA' and 'COMPANY CODE DATA' Std buttons in Customer master Etc. buttons going to disable mode while click these button in custome mastar.
Is there any OSS notes to implement OR we required to set up some PF status to match above requirment.
Please let me know.
Thanks,
Sridhar

If I follow you, no. That's the way it works. The buttons are composited with the background so become part of it. I'd rethink the design.
Basically, you don't want the highlights to determine the color of unselected buttons. You'll always have fringes and jaggies. Having a non-transparent color set for the unselected state kind of does what you want, but won't look the best.

Need to add custom button (xml) in VA05

I need to add a custom button (xml) to report output layout of VA05. Even the corrsponding functionality needs to be written for this button. Without changing the SAP standard code using Access keys, is there any other functionality in which we can add the button and write the code.
Please send me detail steps in this regard.

Hi Ramesh,
As i knoew in case of va05 there is no badi or exit available to achieve this functionality.There is a provision to add some fields in report out put.I hope this is possible through a custom one.
Regards,
Madhu

Add customer button on header level for BUS2201(PO) - SRM 7.0

Hi,
I want to define a customer button (with action) within PO on header level.
Web Dynpro           FPM_OIF_COMPONENT
Configuration          /SAPSRM/WDCC_FPM_OIF_PO_PURCH
Task:
Add a customer button besides standard Export button.
I assume-afterwards I have to enhance the method onactionbutton_pressed to create my event when customer button is pressed, right?
Could anyone please guide me how to solve this issue?
Thanks and best reagrds
Andreas

Hi,
Here are the steps to add the button, I wrote it in other thread. In my case for PO is not displayed, try to follow the steps and if you are able to show the button tell me how please.
Add custom button in PO
And yes ,you need to create an enhancement point in the view CNR_VIEW of the component FPM_OIF_COMPONENT, you need to create a post-exit in the method BUTTON_PRESSED, here you have a sample code:
DATA: lv_id TYPE string,
        lv_event_id TYPE fpm_event_id.
DATA: lo_nd_oif_application TYPE REF TO if_wd_context_node,
        lo_nd_variant TYPE REF TO if_wd_context_node,
        lo_nd_toolbar TYPE REF TO if_wd_context_node,
        lo_nd_button TYPE REF TO if_wd_context_node,
        lo_el_button TYPE REF TO if_wd_context_element,
        lo_nd_other_functions TYPE REF TO if_wd_context_node.
DATA: lv_substring TYPE string,
        lv_substring_i TYPE i,
        lv_node_name TYPE string,
        lv_position TYPE string,
        lv_length TYPE i,
        lv_seq TYPE i.
DATA:lt_keys TYPE STANDARD TABLE OF string,
       lv_key LIKE LINE OF lt_keys.
TYPES:BEGIN OF y_parameters,
    name TYPE string,
    value TYPE string,
END OF y_parameters.
DATA: lt_parameters TYPE STANDARD TABLE OF y_parameters,
        ls_parameter LIKE LINE OF lt_parameters.
DATA: lv_boid      TYPE bbp_guid,
        lv_botype    TYPE string,
        lv_objkey TYPE swo_typeid,
        lv_objtype TYPE swo_objtyp,
        lv_object_id TYPE crmt_object_id_db,
        lv_process_type TYPE crmt_process_type_db,
        lv_object_type TYPE crmt_subobject_category_db,
        lv_rfc TYPE zgrs_co_logsys-rfc,
DATA: lo_fpm TYPE REF TO if_fpm.
lo_fpm = cl_fpm_factory=>get_instance( ).
lo_fpm->raise_event_by_id( lv_event_id ).
lt_keys = lo_fpm->mo_app_parameter->get_keys( ).
LOOP AT lt_keys INTO lv_key.
    ls_parameter-name = lv_key.
    lo_fpm->mo_app_parameter->get_value(
      EXPORTING iv_key = lv_key
      IMPORTING ev_value = ls_parameter-value ).
    INSERT ls_parameter INTO TABLE lt_parameters.
ENDLOOP.
lv_id = wdevent->get_string( 'ID' ).
lo_nd_oif_application = wd_context->get_child_node( name = wd_this->wdctx_oif_application ).
lo_nd_variant = lo_nd_oif_application->get_child_node( name = wd_this->wdctx_variant ).
lo_nd_toolbar = lo_nd_variant->get_child_node( name = wd_this->wdctx_toolbar ).
lo_nd_other_functions = lo_nd_toolbar->get_child_node( name = wd_this->wdctx_other_functions ).
lv_substring = lv_id.
lv_length = STRLEN( lv_id ).
lv_seq = lv_length - 3.
IF lv_id+lv_seq = '_CP'.
    lv_substring = lv_substring(lv_seq).
    lv_id = lv_substring.
ENDIF.
WHILE lv_substring CS '_'.
    lv_position = sy-fdpos + 1.
    lv_substring = lv_substring+lv_position.
ENDWHILE.
IF lv_substring CO '1234567890'.
    lv_substring_i = lv_substring.
ENDIF.
* Item level action;
IF lv_id CS '_item'.
* Or header level action;
ELSE.
    IF lv_id CA '0123456789'.
      lv_position = sy-fdpos - 1.
      lv_node_name = lv_id(lv_position).
      IF lv_id CS 'OTHER_FUNCTIONS'.
        lo_nd_button = lo_nd_other_functions->get_child_node( name = wd_this->wdctx_button ).
        lo_nd_button->set_lead_selection_index( index = lv_substring_i ).
        lo_el_button = lo_nd_button->get_element( ).
        TRY.
            lo_el_button->get_attribute(
            EXPORTING
              name = `EVENT_ID`
            IMPORTING
              value = lv_event_id ).
          CATCH cx_wd_context.
        ENDTRY.
        READ TABLE lt_parameters INTO ls_parameter WITH KEY name = 'SAPSRM_BOTYPE'.
        lv_botype = ls_parameter-value.
        READ TABLE lt_parameters INTO ls_parameter WITH KEY name = 'SAPSRM_BOID'.
        lv_boid = ls_parameter-value.
*         Obtain the object_id;
        SELECT SINGLE object_id INTO lv_object_id
         FROM crmd_orderadm_h
         WHERE guid EQ lv_boid.
*         If not Z button, exits;
        IF lv_event_id(1) NE 'Z'. EXIT. ENDIF.
*      Actions;
        CASE lv_event_id.
          WHEN 'ZBUTTON'.
          WHEN 'ZBUTTON2'.
        ENDCASE.
      ENDIF.
    ENDIF.
ENDIF.

Is it possible to create custom buttons in CRM Ondemand?

Hi,
Is it possible to create custom buttons in CRM Ondemand in any detail page like the inbuilt buttons like 'New', 'Delete' etc? If possible then how?
Thanks
Arpita

You can add a button using custom javascript. but this could potentially have performance issues. please test the performance and functionality if you implement a lot javascript
see this link : http://helponmyproject.com/TTOCOD/
Regards,
Royston

Centering text on a custom button

I have created a custom button, which extends canvas. I would like it to be possible to add a label, via constructor. I've tried to add the "Label" component, since it has its own centering facility, but cant seem to add to a canvas nor a component extended class. Ive created a string which kind of sits in the middle, but as the string gets bigger it doesn't align correctly. Does anyone have any ideas of how to get around this?

Use FontMetrics.stringWidth() to calculate the size of the string
http://java.sun.com/docs/books/tutorial/uiswing/painting/drawingText.html

Is there a command to Submit a form from a custom button?

I am going to add a custom button to allow the user to click on the button to Print the form. I have found the example code of how to do this.
My question is as follows:
Is there a command I can add to a custom button to Submit the form after it prints?
I want the submit to be automatic after they print using my custom "Print" button on the form.
Thanks so much,
Susan

Here is who you would do this :
1) Import your PDF in FormsCentral
2) Save the Submission Enabled Form from the Distribute Tab
3) Open the PDF in Acrobat XI
4) File > Save a Copy...
5) Open the copy in Acrobat XI
6) Tools > Forms > Edit
7) Find the Submit button on the form right click on it to show the properties dialog
8) Go to the Actions Tab
9) Select "Run a Javascript" and click on the "Edit" button
10) Add the this.print() javascript line to the button's javascript
11) Close the dialog with "OK"
12) Close the property dialog with "Close"
13) Click on "Close For Editing" (top right corner in Acrobat XI)
14) File > Save as Other... > Reader Extended PDF > Enable More Tools (includes form fill-in & save)...
15) Test your form (make sure it submits to FormsCentral without errors)
Hope this helps
Gen

Custom Button Nugget

Similar Messages

Maybe you are looking for