Apex Code Development You need to sign in to do that
Don't have an account?
daroz UI Modifications - Yes you Can!
I've promised to post a how-to kind of document after the Winter '06 release, but my time is rather short at the moment. I'll get to it eventually with some example, in production code, but it won't be for a bit yet... Given the number of posts here and elsewhere asking how to do this I thought I'd give some of you a head start. But first a small disclaimer:
You can modify actions in the UI on the following pages:
Any Standard or Custom Object Display, Edit, or Print Preview Page, and the user's Home Page
You cannot modify the UI using this method on report pages, the setup pages, and probably several other locations I can't think of at the moment.
What you will need to do is to write some JavaScript code that will execute on the client-side that will locate using the browser DOM the elements you want to edit. For example I change the destination of a "New" button on one of my related list entries. Because there are multiple "New" buttons on the page you will need to check the SFDC-provided destination of the link. It so happens that the related list is a custom object who's id's start with "a00", so I check the link for the string "/a00" and then alter accordingly.
Once you have your JS code you need to get it to execute on the browser.
First create a new Custom S-Control in setup. Give it an appropriate name, and paste your JS code you've written into the "HTML Body" section. Don't include any HTML in the JS, but do include the HTML/JS comment delimiter open/closings on your code. Save your control and view it. You should have a URL that starts with https://na1.salesforce.com/01N... Take note of the object ID (the 01N...
part) and continue on...
If this code will execute on the home page you'll need to have the "Messages and Alerts" home page component enabled. Edit it, and create a HTML script tag with the src url:
/servlet/servlet.Integration?lid=01N...&enc=UTF-8
Replace 01N... with the object ID you saved above.
That's pretty easy, and really doesn't push the limits too far, but how do we get the code to execute on the individual object pages? Ah ha...
WARNING: Again, this is not supported by SFDC, and if done improperly could break your page layout(s). SFDC may decide this is a bug and patch the system, breaking this method. Proceed at your own risk.
In the Page Layout you can give section headers custom names (with some exceptions). These section names are allowed to be very long, and allow you to use unfiltered HTML. One word of caution, when you make these changes below, use a copy of your page layout. If you make a typo, like forgetting a less then or greater then symbol you will break the HTML on the page and very likely break the ability to delete the section or edit it further. You have been warned!
1. After cloning your page layout, edit it and edit a section name. 2. If your section name before was "Section" insert an HTML script tag in front or behind the section name in the same format as the one above in the HTML message box. 3. Save your layout.
Some cautionary words - again, do this at your own risk, but the abilities this leaves us are seemingly unlimited. Do note that straight JS code will execute as the page is loading, not after it completes. You'll need to hook an on-load event to the page to delay execution until after the load is complete.
I'm sorry I couldn't post the actual script tags and whatnot but the forum tends to actually render those as HTML, not as text.
WARNING: READ THIS FIRST
THIS TECHNIQUE IS NOT SUPPORTED BY SALESFORCE.COM -- IF YOU HAVE ANY PROBLEMS, DON'T EVEN BOTHER CALLING
READ THIS ENTIRE POST BEFORE ATTEMPTING THESE CHANGES. If you make a mistake you may render your page layout unuseable and uneditable. Possibly even undeleteable.
USE AT YOUR OWN RISK
You can modify actions in the UI on the following pages:
Any Standard or Custom Object Display, Edit, or Print Preview Page, and the user's Home Page
You cannot modify the UI using this method on report pages, the setup pages, and probably several other locations I can't think of at the moment.
What you will need to do is to write some JavaScript code that will execute on the client-side that will locate using the browser DOM the elements you want to edit. For example I change the destination of a "New" button on one of my related list entries. Because there are multiple "New" buttons on the page you will need to check the SFDC-provided destination of the link. It so happens that the related list is a custom object who's id's start with "a00", so I check the link for the string "/a00" and then alter accordingly.
Once you have your JS code you need to get it to execute on the browser.
First create a new Custom S-Control in setup. Give it an appropriate name, and paste your JS code you've written into the "HTML Body" section. Don't include any HTML in the JS, but do include the HTML/JS comment delimiter open/closings on your code. Save your control and view it. You should have a URL that starts with https://na1.salesforce.com/01N... Take note of the object ID (the 01N...
part) and continue on...
If this code will execute on the home page you'll need to have the "Messages and Alerts" home page component enabled. Edit it, and create a HTML script tag with the src url:
/servlet/servlet.Integration?lid=01N...&enc=UTF-8
Replace 01N... with the object ID you saved above.
That's pretty easy, and really doesn't push the limits too far, but how do we get the code to execute on the individual object pages? Ah ha...
WARNING: Again, this is not supported by SFDC, and if done improperly could break your page layout(s). SFDC may decide this is a bug and patch the system, breaking this method. Proceed at your own risk.
In the Page Layout you can give section headers custom names (with some exceptions). These section names are allowed to be very long, and allow you to use unfiltered HTML. One word of caution, when you make these changes below, use a copy of your page layout. If you make a typo, like forgetting a less then or greater then symbol you will break the HTML on the page and very likely break the ability to delete the section or edit it further. You have been warned!
1. After cloning your page layout, edit it and edit a section name. 2. If your section name before was "Section" insert an HTML script tag in front or behind the section name in the same format as the one above in the HTML message box. 3. Save your layout.
Some cautionary words - again, do this at your own risk, but the abilities this leaves us are seemingly unlimited. Do note that straight JS code will execute as the page is loading, not after it completes. You'll need to hook an on-load event to the page to delay execution until after the load is complete.
I'm sorry I couldn't post the actual script tags and whatnot but the forum tends to actually render those as HTML, not as text.
That being said, we're looking into a number of ways to let developers enhance our UI pages.
Fantastic!!!!
I am a bit ashamed not to have thought of it
For you to post the html tags try to replace the less than by [ and the greater than by ] that should work
Daroz you rock
Christophe
Message Edited by The_Fox on 01-13-2006 01:51 PM
I have tried the daroz Tweak (ok not yet fully) but if you just want to have an alert to your sales for example on edit page only you will have to add in the title of your section (here the name is Test and the message send is lame but it is just to give you a head start:)and manipulating the dom tree is a piece of cake isn't it
Test [script]if (document.location.toString().indexOf("e?retURL")!=-1) {alert("Edit Mode");}[/script]
Normally, I shoul post a complete example by next week (replace the xxx country input by a select option on Account Edit page) or tomorrow if i am not overwhelmed by my *ing users.
PS: Salesforce.com Dave could you make sure every item in your dom tree has an unique ID , it is simpler to manipulate the dom tree like this
PS2: In your common.css line 1557 vertical-aling: auto; is not recognised as valid. Value authorised are baseline, sub, super, top, text-top, middle, bottom, text-bottom, inherit, % and lenght. For table's cell only baseline, top, middle and bottom are accepted
I am replying to myself so
What I have done
Create a s-control with the scontrol being :
[script]if (document.location.toString().indexOf("e?retURL")!=-1) {alert("Edit Mode");}[/script]
just that
and in the section title i put
Test [script src="/servlet/servlet.Integration?lid=01N2000000004o9&enc=UTF-8"][/script]
and nothing happen
I tried a lot of different thing but apparently as soon there is src=... it doesn't do anything and no error in the different console.(on Firefox)
I tried also in the scontrol nothing but [script]alert("Edit Mode");[/script] and sti and stil nothing...very strange and very frustrating
BTW as soon as someone (Daroz WE WANT YOU) is able to help me with this problem. I scracth my head some hours already and I give up for today
PS:I have finish the litlle code snippet to replace the standard input for billing country by a select (I know it works because as soon as you put your javascript directly in the section the javascript runs so I have tidyed my code and just replace the input by the select with no options and that rocks) so if can have it in s-controls to be able to add all my options (some county list is big) it would be wonderful
Message Edited by The_Fox on 02-02-2006 04:01 PM
This concerns me.
For lack of a better term, this javascript injection is not supported!
NOT SUPPPORTED
NOT SUPPPORTED
NOT SUPPPORTED
NOT SUPPPORTED
NOT SUPPPORTED
NOT SUPPPORTED
NOT SUPPPORTED
NOT SUPPPORTED
NOT SUPPPORTED
NOT SUPPPORTED
NOT SUPPPORTED
NOT SUPPPORTED
NOT SUPPPORTED
It has been clearly stated numerous times in this thread and others that the technique presented by Daroz is NOT SUPPORTED and will likely BREAK if we decide to change any part of the pages we deliver.
Everyone else -- I want to reiterate what I said in the post, and Benji and Dave both followed up with -- this is not supported by SFDC. Feel free to ask me, or others on the forums, but don't expect SFDC to reply.
I have sent you 3 emails from chumbert at odyssey-group dot com. Did you receive them.
Otherwise send me an email and will respond to you
Regards
I'll see what I can do! :smileywink:
Ok, I had some times before leaving for holidays, so finally it works but as usuals it is not recommended.
Whta I have done, changing the county text box to a picklist in the standard salesforce ui only in the editing mode for lead/contact/account and the method is reusable for any address field your want just a parameter to add in the s-controls at the beginning.
So It is doable and I have a friend who is doing something on the stage field for opps...same technique
A hint use DOM.
I will not give away the code here as it is not supported by salesforce but you can contact me if you want
Regards