Hi All,

The cWebForm has a the capability - with a prompt - to related fields. This has been functionality since 1982/83?

A few years ago the function 'ParentNullAllowed' is introduced and in some instances used.
Parent-child relations - with this command - are not inforced any more.
So leaving a field blanc is a possibilty now.

A problem occurs when a once connected parent-child needs to be set to blanc again. As far as i know there is no way to this.

So i thought maybe a X can be added to the prompt button in a cWebform that clears the relationship.

I looked at the cWebform.js , theme.css. How hard can it be?

The fact that i'm asking help should answer the question.

What i did was: make changes to Webform.js (yes i should create a new class bu i don't want to complicate things) and added code to the application.css

Code:
df.WebForm = function WebForm(sName, oParent){
    df.WebForm.base.constructor.call(this, sName, oParent);
    
    this.prop(df.tBool, "pbPromptButton", false);
    this.prop(df.tBool, "pbClearButton", false);
    this.prop(df.tBool, "pbPassword", false);
    this.prop(df.tString, "psPlaceHolder", "");
    this.prop(df.tBool, "pbHtml5NumberOnMobile", true);

    //  Events
    this.event("OnPrompt", df.cCallModeWait);
    this.event("OnClearPrompt", df.cCallModeWait);
        
       // @privates
    this._eWrap = null;
    this._ePrompt = null;
    this._eClearPrompt = null;
    this._bTypeNumber = false;
    
    //  Configure super classes
    this._sControlClass = "WebForm";
};
/*
This class is the implementation of the client-side part of the WebForm data entry object. It can 
render itself to HTML and implements the published properties from the server. It has special prompt 
button functionality.
*/
df.defineClass("df.WebForm", "df.WebBaseForm",{

/*
This method generates the HTML for input element. The input element has two wrappers for styling it 
and making space for the prompt button. The HTML for the prompt button is available by default and 
is made visible when needed.

@param  aHtml   String builder array to which HTML can be added.

@private

//<span class="WebFrm_Prompt"></span><div class="WebFrm_PromptSpacer"><span class="WebFrm_Clear"></span><div class="WebFrm_PromptSpacer">
    
*/
openHtml : function(aHtml){
    df.WebForm.base.openHtml.call(this, aHtml);
    aHtml.push('<div class="WebFrm_Wrapper"><span class="WebFrm_Prompt"></span><div class="WebFrm_PromptSpacer"><span class="WebFrm_Clear"></span><div class="WebFrm_PromptSpacer">', 
            '<input type="', (this.pbPassword ? 'password' : 'text'), 
            '" name="', this._sName, 
            '" value="" id="', this._sControlId, 
            '" placeholder="', df.dom.encodeAttr(this.psPlaceHolder), '"', 
            (!this.isEnabled() ? ' disabled="disabled" tabindex="-1"' : ''),
            '>'); 
},

/*
This method generates the closing HTML closing the tags opened by the openHtml. This allows 
subclasses to insert HTML inside the WebFrm_PromptSpacer div.

@param  aHtml   String builder array to which HTML can be added.

@private
*/
closeHtml : function(aHtml){
    aHtml.push('</div></div></div>'); 
    
    df.WebForm.base.closeHtml.call(this, aHtml);
},

/*
This method is called after rendering and gets references, attaches event handlers and sets property 
values.

@private
*/
afterRender : function(){
    //  Get references
    this._eControl = df.dom.query(this._eElem, "div.WebFrm_Wrapper input");
    this._ePrompt = df.dom.query(this._eElem, "div.WebFrm_Wrapper span.WebFrm_Prompt");
    this._eClear = df.dom.query(this._eElem, "div.WebFrm_Wrapper span.WebFrm_Clear");
    this._eWrap = df.dom.query(this._eElem, "div.WebFrm_Wrapper");
    
    df.WebForm.base.afterRender.call(this);
    
    //  Attach event handlers
    df.dom.on("click", this._ePrompt, this.onPromptClick, this);
    df.dom.on("click", this._eClear, this.onClearClick, this);
    
    //  Set properties
    this.set_pbPromptButton(this.pbPromptButton);
    this.set_pbClearButton(this.pbClearButton);
},

/*
This setter switches the field between an input type=password and a input type=text field.

@param  bVal    The new value.
@private
*/
set_pbPassword : function(bVal){
    if(this._eControl){
        if(df.sys.isIE && df.sys.iVersion < 9){   // For IE8 and older we need to clone the DOM element before we can switch it
            var eNew = this._eControl.cloneNode(false);
            eNew.type = (bVal ? 'password' : 'text');
            this._eControl.parentNode.replaceChild(eNew,this._eControl);
            this._eControl = eNew;
        }else{  //  Modern browser support simply setting the type
            this._eControl.type = (bVal ? 'password' : 'text');
        }
    }
},

/*
This setter sets the background color of the field. The background color is applied to the wrapper 
div element.

@param  sVal    The bew value.
@private
*/
set_psBackgroundColor : function(sVal){
    if(this._eWrap){
        this._eWrap.style.background = sVal || '';
    }
},

/*
This setter hides / shows the prompt button. That is done by removing / setting setting the 
"WebFrm_HasPrompt" CSS class on the wrapper div element.

@param  bVal    The new value.
*/
set_pbPromptButton : function(bVal){
    if(this._eWrap && this._ePrompt){
        df.dom.toggleClass(this._eWrap, "WebFrm_HasPrompt", bVal);
    }
},

set_pbClearButton : function(bVal){
    if(this._eWrap && this._eClear){
        df.dom.toggleClass(this._eWrap, "WebFrm_HasClear", bVal);
    }
},
/* 
Sets the placeholder using the HTML5 placeholder attribute (only works on IE10 and higher).

@param  sVal    The new value.
*/
set_psPlaceHolder : function(sVal){
    if(this._eControl){
        this._eControl.placeholder = sVal;
    }
},

/*
This method handles the onclick event of the prompt button DOM element and fires the OnPrompt event.

@param  oEvent  The event object (see df.events.DOMEvent).
@private
*/
onPromptClick : function(oEvent){
    if(this.isEnabled()){
        //  Tell webapp object that we have the focus but do not give ourselve the actual focus (prevent Mobile Keyboard flashing)
        this.objFocus();
        
        if(this.firePrompt()){
            oEvent.stopPropagation();
        }else{
            //  If the prompt button doesn't do anything we still need to give ourself the real focus
            this.focus();
        }
    }
},

onClearClick : function(oEvent){
    /*if(this.isEnabled()){
        //  Tell webapp object that we have the focus but do not give ourselve the actual focus (prevent Mobile Keyboard flashing)
        this.objFocus();
        
        if(this.firePrompt()){
            oEvent.stopPropagation();
        }else{
            //  If the prompt button doesn't do anything we still need to give ourself the real focus
            this.focus();
        }
    }*/
},
Code:
.WebForm .WebFrm_ClearSpacer{

}
.WebForm .WebFrm_HasClear .WebFrm_ClearSpacer{
    margin-right: 30px;
}
.WebForm .WebFrm_Clear{
    width: 24px;
    height: 26px;
}
.WebForm.Web_Disabled .WebFrm_Clear{
    opacity: 0.5;
    filter: alpha(opacity=50);
}
.WebForm .WebFrm_Clear:before {
    /* Clear button - X button */
    content: "s"; 
    font-size: 16px;
    padding: 0;
    color: #BABABA;
    font-size: 20px;
    position: absolute;
    top: 5px;
    left: 1px;    
}

.WebForm.Web_Enabled .WebFrm_Clear:hover:before{
    color: #0072C6;
}
The result is a totally screwed-up cWebform layout and in some cases - when df.dom.on("click", this._eClear, this.onClearClick, this); -if not commented- out the app will not start.

Strangely enough when '<div class="WebFrm_Wrapper"><span class="WebFrm_Prompt"></span><div class="WebFrm_PromptSpacer"><span class="WebFrm_Clear"></span><div class="WebFrm_PromptSpacer">'

is replaced by

'<div class="WebFrm_Wrapper"><span class="WebFrm_Prompt"></span><div class="WebFrm_PromptSpacer"><div class="WebFrm_Wrapper"><span class="WebFrm_Prompt"></span><div class="WebFrm_PromptSpacer">'

The cWebform shows two prompts

Anyone able and willing to create this needed basic cWebform extension?

Roel