STYILING THE DROPDOWN VALUES IN PEOPLESOFT CLASSIC

 

Classic Drop-Down List Styling


STEP:1 

To overriding delivered CSS is to identify the style class(es) to target. We can do this using the browser's developer tools.




we can see thet it is targeting the below css

.pt_classic_plus select.PSDROPDOWNLIST 

.pt_classic_plus select.PSDISABLED 

.pt_classic_plus select.PSDROPDOWNLIST_DISABLED 

.pt_classic_plus select.PSDROPDOWNLISTDISABLED 

.pt_classic_plus select.PSERROR { }


STEP: 2

we can create a custom css for these calss Eg: i am goind to show evenrows in green and oddrows in red for all drop downs in one component

open the App designer create new style sheet object as and put the custom css like below


.pt_classic_plus select.PSDROPDOWNLIST :nth-child(even), 

.pt_classic_plus select.PSDISABLED :nth-child(even), 

.pt_classic_plus select.PSDROPDOWNLIST_DISABLED :nth-child(even), 

.pt_classic_plus select.PSDROPDOWNLISTDISABLED :nth-child(even), 

.pt_classic_plus select.PSERROR :nth-child(even) {

    background-color: green;

}


.pt_classic_plus select.PSDROPDOWNLIST :nth-child(odd), 

.pt_classic_plus select.PSDISABLED :nth-child(odd), 

.pt_classic_plus select.PSDROPDOWNLIST_DISABLED :nth-child(odd), 

.pt_classic_plus select.PSDROPDOWNLISTDISABLED :nth-child(odd), 

.pt_classic_plus select.PSERROR :nth-child(odd) {

    background-color: red;

}


STEP:3

we can appaly for this to custom component Eg:(XX_BOOKING_CMP)

Navigation: PeopleTools > Portal > Branding > Component Branding

and give ths css which you create as shown in below and click save




Results

now we can check the dropdowns in component


For Specific rows instead of (#PSBRSYSTOPT_WRK_PTBRANDTHEME) theis replace with your name for you CSS Selector

.pt_classic_plus select#PSBRSYSTOPT_WRK_PTBRANDTHEME.PSDROPDOWNLIST :nth-child(8),
.pt_classic_plus select#PSBRSYSTOPT_WRK_PTBRANDTHEME.PSDISABLED :nth-child(8),
.pt_classic_plus select#PSBRSYSTOPT_WRK_PTBRANDTHEME.PSDROPDOWNLIST_DISABLED :nth-child(8),
.pt_classic_plus select#PSBRSYSTOPT_WRK_PTBRANDTHEME.PSDROPDOWNLISTDISABLED :nth-child(8),
.pt_classic_plus select#PSBRSYSTOPT_WRK_PTBRANDTHEME.PSERROR :nth-child(8) {
background-color: #cdcfd1;
}
.pt_classic_plus select#PSBRSYSTOPT_WRK_PTBRANDTHEME.PSDROPDOWNLIST :nth-child(9),
.pt_classic_plus select#PSBRSYSTOPT_WRK_PTBRANDTHEME.PSDISABLED :nth-child(9),
.pt_classic_plus select#PSBRSYSTOPT_WRK_PTBRANDTHEME.PSDROPDOWNLIST_DISABLED :nth-child(9),
.pt_classic_plus select#PSBRSYSTOPT_WRK_PTBRANDTHEME.PSDROPDOWNLISTDISABLED :nth-child(9),
.pt_classic_plus select#PSBRSYSTOPT_WRK_PTBRANDTHEME.PSERROR :nth-child(9) {
background-color: #cdcfd1;
}

For specific values

.pt_classic_plus select#PSBRSYSTOPT_WRK_PTBRANDTHEME.PSDROPDOWNLIST option[value^="SV_"],
.pt_classic_plus select#PSBRSYSTOPT_WRK_PTBRANDTHEME.PSDISABLED option[value^="SV_"],
.pt_classic_plus select#PSBRSYSTOPT_WRK_PTBRANDTHEME.PSDROPDOWNLIST_DISABLED option[value^="SV_"],
.pt_classic_plus select#PSBRSYSTOPT_WRK_PTBRANDTHEME.PSDROPDOWNLISTDISABLED option[value^="SV_"],
.pt_classic_plus select#PSBRSYSTOPT_WRK_PTBRANDTHEME.PSERROR option[value^="SV_"] {
background-color: #cdcfd1;
}




Comments

Post a Comment

Popular posts from this blog

SQL TO SEE ALL THE OBJECTS IN PROJECT BY PROJECT NAME (PEOPLESOFT)

SELECT PROJECTNAME  ,OBJECTTYPE     , CASE OBJECTTYPE WHEN 0 THEN CASE NVL((     SELECT RECTYPE      FROM PSRECDEFN     WHERE RECNAME = I.OBJECTVALUE1), 99) WHEN 0 THEN 'SQL Table in DB' WHEN 1 THEN 'SQL View in DB' WHEN 2 THEN  'Work Record' WHEN 3 THEN 'Sub Record' WHEN 5 THEN 'Dynamic View' WHEN 6 THEN 'Query View' WHEN 7 THEN  'Temporary Table' ELSE 'Other Record or Deleted' END WHEN 1 THEN 'Index' WHEN 2 THEN 'Field' WHEN 3 THEN  'Field Format' WHEN 4 THEN 'Translate Value' WHEN 5 THEN 'Page' WHEN 6 THEN 'Menu' WHEN 7 THEN 'Component'  WHEN 8 THEN 'Record PeopleCode' WHEN 9 THEN 'Menu PeopleCode' WHEN 10 THEN 'Query' WHEN 11 THEN 'Tree  Structure' WHEN 12 THEN 'Tree' WHEN 13 THEN 'Access Group' WHEN 14 THEN 'Color' WHEN 15 THEN 'Style' WHEN 16  THEN 'Business Process Map' WHEN 17 THEN 'Bu...
Read more

BIP (BIPUBLISHER) Using PS_Query

HOW TO CREATE BI-PUBLISHER REPORT CREATE PS QUERY BASED ON REQUIRMENTS OF OUR REPORT REGISTER BIP DATA SOURCE STEP:1 MAINMENU>REPORTING TOOLS> BI PUBLISHER> REGISTER BIP DATA SOURCE ADD NEW VALUE (+)  SOURCE TYPE=QUERY SOURCE ID= PS-QUERY NAME GENERATE XML FOR OUR QUERY DOWNLOAD THAT XML FILE UPLOAD THAT FILE IN WORD BI PUBLISHER MODIFY THE WORF FILE BASED ON OUR REQUIRMENTS SAVE THAT FILE AS RTCH TEXT FORMATE(RTF) CREATING BIP REPORT DEFINITION STEP:2 MAINMENU>REPORTING TOOLS> BI PUBLISHER> CREATE BIP REPORT DEFINITION ADD NEW VALUE (+)  REPORT NAME= NEW NAME FOR REPORT DATA SOURCR TYPE=QUERY DATA SOURCT ID=PS-QUERY NAME INSIDE TABS 1.DEFINITION TAB DESCR= CREATE DESCR REPORT STATUS ACTIVE MAKE IT ALLUSERS 2.TEMPLATE TAB CHANGE STATUS TO ACTIVE UPLODE RTF FILE 3.OUTPUT TAB CHANGE OUT PUT TYPE AS PER YOUR REQUIRMENTS MAKE DEFAULT AS PDF BIP QUERY REPORT VIEWER STEP:3 MAINMENU>REPORTING TOOLS> BI PUBLISHER> BIP QUERY REPORT VIEWER REPORT NAME= (WHAT...
Read more

BASIC GLOBAL SEARCH IN PEOPLESOFT

  HOW TO CREATE GLOBAL SEARCH MAINMENU>REPORTINGTOOLS>QUERY MANAGER STEP:1 MAINMENU>REPORTING TOOLS > QUERY MANAGER> 1.LAST EFFDATE COLUMN 2.CRETRIA FOR EFFDT  IS NOT LESS THAN CREATE A PSQUERY   OR (USE CONNECTED QUERY)  OR (USE DOCUMENTS ALSO) PEOPLETOOLS>SEARCH FRAME WORK>DESIGNER> DEFINE SEARCH DEFINITION STEP:1 PEOPLETOOLS>SEARCHFRAMEWORK> DESIGNER>  DEFINE SEARCH DEFNITIONS 1.MAP DATE ,LINK COLUMN 2.ADD TITLE,SUMMARY 3.MAP SEARCH ATTRIBUTE IN TOP (SELECT FIELDS FOR GLOBAL SEARCH DISPAY)&FACETED ADD NEW VALUE CREATE SEARCH DEFINITION NAME*   SOURCE TYPPE =QUERY ADD+ SOURCE NAME=PS_QUERY NAME DEFINE SEARCH CATAGORY STEP:2 PEOPLETOOLS>SEARCH FRAMEWORK>  DESIGNER>   DEFINE SEARCH CATEGORIES CHECK BOX (SEARCH GROUP) MAP SEARCH  DEFINITION NAME BELOW AND SAVE ADD NEW VALUE SEARCH CATEGUARY=SAME NAME SEARCH DEFNITION NAME PEOPLETOOLS>SEARCH FRAME WORK>ADMINISTRATOR> DEFINE SEARCH CONT...
Read more