1. util.js

    /**
     * 
     * Validation 결과 조회 팝업
     * @param element
     * @param param
     * @param callback
     * @example
     * validationPopup(this, param, callback);
     */
    validationPopup : function(element, param, callback)
    {
        var _validationPopup = {};
        
        var _callback = function(event)
        {
            if (UT.isFunction(callback))
            {
                callback.call(element, event.detail);
                
                _validationPopup.removeEventListener("apply-go", _callback);
                _validationPopup.removeEventListener("sc-window-hided", _closeHandler);
                _validationPopup.removeEventListener("close", _closeHandler);
                _validationPopup.getWindowContent().reset();
                _validationPopup.close();
            }
        };
        
        var _closeHandler = function(event)
        {
            _validationPopup.removeEventListener("apply-go", _callback);
            _validationPopup.removeEventListener("sc-window-hided", _closeHandler);
            _validationPopup.removeEventListener("close", _closeHandler);
            _validationPopup.getWindowContent().reset();
            _validationPopup.close();
        };
        
        if (!SCLinkManager.isRegistered("ep-valid-list"))
        {
            SCLinkManager.register("/ui/bp/shared/popup/ep-valid-list.html");
        }
        
        _validationPopup = SCPopupManager.popup("ep-valid-list", element, 900, 500, {
            titleText: "Validation",
            modal: true,
            closable: true,
            maximizable: true,
            draggable: true,
            resizable: true
        });

        _validationPopup.addEventListener("apply-go", _callback);
        _validationPopup.addEventListener("sc-window-hided", _closeHandler);
        _validationPopup.addEventListener("close", _closeHandler);

        _validationPopup.show();
        _validationPopup.getWindowContent().load(param);
    },

2. validation popup

<dom-module id="ep-valid-list">
    <style>
        :host {
            @apply(--vbox-layout);
        }
    </style>
    
    <template>
        <!-- Common code -->
        <sc-request-group id="codes" init>
            <sc-code-group>
                <sc-code code="C018"  value="{{codes.C018}}"></sc-code>     <!-- 필수/옵션 구분코드 -->
            </sc-code-group>
        </sc-request-group>
        
        <sc-grid id="gridPanel"
              data-provider="{{resultList}}"
              class="flex"
              editable="false"
              show-tooltip="true"
              use-state="false"
              use-selection="false">
         
            <cc-grid-toolbar>
                <sc-button id="btnGo"   on-click="onBtnClick"   text="계속진행" disabled="[[formula('hasInvalidR')]]"></sc-button>
            </cc-grid-toolbar>
         
            <sc-grid-columns>
                <sc-data-column     header-text="No."
                                    data-field="valid_seq"          width="50"                  text-align="center"
                                    data-type="number"              format-type="integer"></sc-data-column>
                
                <sc-data-column     header-text="결과 메시지"
                                    data-field="result_message"     width="650"                 text-align="left"
                                    item-label-function="onItemLabel"
                                    show-default-content-tooltip="true"></sc-data-column>
                                
                <sc-combobox-column header-text="유형"
                                    data-field="valid_type"         width="50"                  text-align="center"
                                    display-field="label"           value-field="data"          items="{{codes.C018}}"
                                    item-style-function="onItemStyle"></sc-combobox-column>
            </sc-grid-columns>
        </sc-grid>
    </template>

    <script>
        Polymer({
            is : "ep-valid-list",
            properties : {
                codes : {
                    type : Object,
                    value : function() {
                        return {
                            C018 : []
                        }
                    },
                    reset : false
                },
                sessionUser : {
                    type : Object,
                    value : function() {
                        return SCSessionManager.currentUser;
                    }
                },
                searchParam : {
                    type : Object,
                    value : function() {
                        return {};
                    }
                },
                resultMap : {
                    type : Object,
                    value : function() {
                        return {};
                    }
                },
                resultList : {
                    type : Array,
                    value : function() {
                        return [];
                    }
                },
            },
            
            formulas :
            {
                hasInvalidR : function()
                {
                    var _provider = this.$.gridPanel.getDataProvider();
                    
                    return UT.isNotEmpty(_provider) && _provider.filterItems({result_status:DEF.FAIL, valid_type:DEF.VALID_R}).length > 0;
                }
            },
            
            load : function(param)
            {
                var me = this;

                me.set("resultMap", param);

                if (UT.isArray(me.resultMap.result_data))
                {
                    var _resultList = me.resultMap.result_data.filter(function(data, index, array)
                    {
                        return data.result_status ==  DEF.FAIL;
                    });
                    
                    me.set("resultList", _resultList);
                }

                me.applyFormula();
            },

            onItemLabel : function(data, item)
            {
                var me = this;
                var _label = data[item.dataField];

                switch (item.dataField)
                {
                    case "result_message" :
                         // <br/> 테그 제거
                        _label = UT.nvl(data.result_message, "").replace(/<br\/>/ig, " ");
                        break;
                }

                return _label;
            },
            
            onItemStyle : function(data, item)
            {
                var me = this;
                var styleObj = {};
                
                switch (item.dataField)
                {
                    case "valid_type" :
                        if (data.result_status ==  DEF.FAIL)
                        {
                            styleObj.background = data.valid_type == DEF.VALID_R ? COLOR.REQUIRED : COLOR.OPTION ;
                            styleObj.color  = COLOR.WHITE;
                        }
                        break;
                        
                    default :
                        break;
                }
                
                return styleObj;
            },
            
            onBtnClick : function(event)
            {
                var me = this;
                
                switch (event.target.id)
                {
                    case "btnGo" :
                        me.fire("apply-go");
                        break;

                    case "btnClose" :
                        me.fire("close");
                        break;
                }
            }
        })
    </script>
</dom-module>

3. def.js

var DEF = {

    /**
     * 필수 - 서버에서 Validation처리 구분
     *
     * @property VALID_R
     * @type String
     */
    VALID_R: "R",
    
    /**
     * 경고 - 서버에서 Validation처리 구분
     *
     * @property VALID_W
     * @type String
     */
    VALID_W: "W",

};

var COLOR = {
        
        WHITE : "#FFFFFF",
        
        /**
         * Link - Blue
         */
        LINK : "#227DDA",

        /**
         * Disabled - Gray
         */
        DISABLED : "#CCCCCC",
        
        /**
         * Division - light Gray
         */
        DIVISION : "#EEEEEE",
        
        /**
         * Warning - Red
         */
        WARNING : "#FFA7A7",
        
        /**
         * New - Yellow
         */
        NEW : "#FFFF7E",
        
        /**
         * Confirm - Green
         */
        CONFIRM : "#BCFFB5",
        
        /**
         * Required - Strong Red
         */
        REQUIRED : "#EA0037",
        
        /**
         * Option - Blue
         */
        OPTION : "#66AFE9",
        
        /**
         * BOQ's Spec. Color - Blue type
         */
        SPEC : "#D8EEFD",
        
        /**
         * Grid Editable Color
         */
        EDITABLE : "#F7F4D4",
        
        /* Approval Status */
        NO          : "#FFFF7E",
        OK          : "#28A1E0",
        STOP        : "#FFA7A7",
        CANCEL      : "#CCCCCC",
};