Skip to main content

This content has been archived and is no longer being updated. Links may not function; however, this content may be relevant to outdated versions of the product.

Support Article

CSS Not loading properly



User is trying to fail the validation and launch a modal dialog to attach a file.
After the file is attached and the modal dialog is submitted, when user comes back to the original screen, it is observed that  the css skin is not getting applied.

Error Messages

N/A (but Screen loads without any CSS content.)

Steps to Reproduce

a) Section contains filepath control and an inputText that has validation defined (server side).
b) Fail the validation.
c) Attach a file
d) Correct the input Text to allow validation to pass.
d) Submit the flowAction

We find that the screen loads without any CSS. This does not happen if the same operation is performed without any validaiton failure. 

Root Cause

User had included in  the harness a modified version of  pega_yui_connection js file as they were not able to even attach a file.
In the same file, some of the code changes were made to resolve the CSS loading issue. In the uploadFile function, the oElements variable's scope was increased and it was also used at the end of the function instead of using this._formNode.removeChild


Following changes (shown in bold below ) were made in the uploadFile function in the customised pega_yui_connection js file to resolve the issue :

    uploadFile:function(o, callback, uri, postData){

        // Each iframe has an id prefix of "yuiIO" followed
        // by the unique transaction id.
        var oConn = this;
        var frameId = 'yuiIO' + o.tId;
        var uploadEncoding = 'multipart/form-data';
        var io = document.getElementById(frameId);
        var args = (callback && callback.argument)?callback.argument:null;

        // Track original HTML form attribute values.
        var rawFormAttributes =

        // Initialize the HTML form properties in case they are
        // not defined in the HTML form.
        this._formNode.setAttribute('action', uri);
        this._formNode.setAttribute('method', 'POST');
        this._formNode.setAttribute('target', frameId);

            // IE does not respect property enctype for HTML forms.
            // Instead it uses the property - "encoding".
            this._formNode.setAttribute('encoding', uploadEncoding);
            this._formNode.setAttribute('enctype', uploadEncoding);
        } /* Change # 1 */
var oElements;
             oElements = this.appendPostData(postData);

        // Start file upload.

        // Fire global custom event -- startEvent, args);

            // Fire transaction custom event -- startEvent
  , args);

        // Start polling if a callback is present and the timeout
        // property has been defined.
        if(callback && callback.timeout){
            this._timeOut[o.tId] = window.setTimeout(function(){ oConn.abort(o, callback, true); }, callback.timeout);

        // Remove HTML elements created by appendPostData
        if(oElements && oElements.length > 0){
            for(var i=0; i < oElements.length; i++){
/* Change #2 */
                var oElement = oElements[i];

Suggest Edit

Published January 31, 2016 - Updated October 8, 2020

Did you find this content helpful? Yes No

Have a question? Get answers now.

Visit the Collaboration Center to ask questions, engage in discussions, share ideas, and help others.

We'd prefer it if you saw us at our best.

Pega Community has detected you are using a browser which may prevent you from experiencing the site as intended. To improve your experience, please update your browser.

Close Deprecation Notice
Contact us