Building a custom field type via inline visualforce page

Question

So here is what I'm trying to do, and how I'm trying to do it. Feel free to suggest an easier alternative. I am trying to create a field stored on the user object called dialect__c. This will store the Id of a related object (since you can't create relationship fields on the user object, otherwise I'd just do that). I was to present the user a dropdown list that has all of the possible options listed (an entry for each dialect object that exists).

I want this field which exists on my inline visualforce page to look and behave as if it were just a part of the regular page layout. I don't want a separate save button for this field, and ideally it would just blend right in, nobody would even be the wiser that it is an inline vf page.

So my question becomes, how can I style a visualforce page to blend as seamlessly as possible, and is it possible to avoid having to have a separate save button for my field so the normal save button on the user record would work? If it helps visualize what I've got going on at all, here is the code that creates the field.

public class chatter_dialect_controller {

public chatter_dialect_controller(ApexPages.StandardController controller) {

}
public List<SelectOption> getDialects() {
    List<SelectOption> options = new List<SelectOption>();

    for(list<Chatter_Dialects_Dialect__c> dls : [select name, id from Chatter_Dialects_Dialect__c])
    {
        for(Chatter_Dialects_Dialect__c dialect : dls)
        {
            options.add(new SelectOption(dialect.id,dialect.name));
        }
    }
    return options;
}
}

and here is the visualforce page

<apex:page standardcontroller="user" extensions="chatter_dialect_controller" showHeader="false" sidebar="false">

<apex:form >
    <label for="dialect__c">Select Dialect</label>
    <apex:selectList value="{!user.Dialect__c}" multiselect="false" size="1" id="dialect__c">
        <apex:selectOptions value="{!Dialects}"/>
    </apex:selectList><p/>


</apex:form>

Answer 1

I think you the only way to do this would be to override the entire User page with a custom Visualforce page. However, you can't override the User Page, but there is an Idea Under Consideration on the IdeaExchange:

http://success.salesforce.com/ideaview?id=08730000000BrIyAAK

Until the happens, I think you're going to be stuck with an embedded Visualforce Page that requires a separate Save/Update button.

Take a look at the "mode" attribute of apex:pageBlock to try and get the styling as close to the standard look as possible.

The default user mode for the pageBlock component's child elements. This value determines whether lines are drawn separating field values. Possible values are: "detail", in which data is displayed to the user with colored lines; "maindetail", in which data is displayed to the user with colored lines and a white background, just like the main detail page for records; and "edit", in which data is displayed to the user without field lines. If not specified, this value defaults to "detail". These lines have nothing to do with requiredness, they are merely visual separators, that make it easier to scan a detail page.

http://www.salesforce.com/us/developer/docs/pages/Content/pages_compref_pageBlock.htm

Answer 2

You will need to create the whole page in Visualforce. Just use a pageblock and pageblocksection(s) to contain your inputfields for the ordinary fields, and for this special one, wrap the outputlabel and selectlist in a pageblocksectionitem for it to take up one "cell" in the pageblocksection. Instead of <label> you can use <apex:outputlabel>.

To show as text in readonly mode and selectlist in edit mode, conditionally render it as outputtext or selectlist based on the mode. This could be done with two separate pages or one page with output and input fields that are rendered based on some kind of "mode" flag in your controller. Something like this:

<apex:pageblocksection title="Dialect" columns="2">
    ...
    <apex:pageblocksectionitem>
        <apex:outputlabel value="Dialect" />
        <apex:outputfield value="{!User.Dialect__c}" rendered="{!(mode == 'edit')}" />
        <apex:selectlist value="{!User.Dialect__c}" size="1" rendered="{!(mode == 'readonly')}">
            <apex:selectOptions value="{!DialectOptions}"/>
        </apex:selectlist>
    </apex:pageblocksectionitem>
    ...
</apex:pageblocksection>