Hey, Skuids!
Why I haven’t converted to V2: A three-part saga.
I’m probably an anomalous user as I have built over 150 custom skuid pages in my salesforce app, many of which incorporate many data models and components, and I have augmented many with custom CSS. Here is what has stopped me from converting:
Part 1) I have a couple pages that use CSS to build functionality like custom popups and flashing banners that are anchored to different parts of the screen. There are a few very useful stylings that are not accommodated by V2 and because V2 doesn’t allow CSS, I have been kind of stuck with those pages. CSS Posted Below
Part 2) There are a couple components that I have commonly used that don’t convert to V2:
-Global and mass actions are not available on Decks
-Select Actions are no longer configurable
-Radio button and picklist Tab Set properties are no longer available
Part 3) Because of Part 1 and Part 2 above, I couldn’t convert 100% of my pages. I could convert probably 80-85%, but you currently don’t allow cross version page includes. For this reason, even now I’m still building new pages in V1. I have used inline frames to include V2 pages in V1 pages, but the functionality is not quite the same. So, I would otherwise do a partial conversion of most pages and build all new pages that didn’t require custom CSS styling in V2. Additionally, partial conversion would be much easier to execute as I could then convert my 150 plus pages over the course of a few months instead of having to try to convert them all at once.
So, ideally:
- there would be a way to add custom CSS into a Design System (Even if through XML hacking) to add the stylings not covered by design systems.
- The missing functionality for components in V2 that existed in V1 would be added
- A V1 to V2 and a V2 to V1 page include option would allow for incremental migration. It would be great if V2 and V@ page includes would seamlessly accommodate either V1 or V2 pages as included pages.
Below is some custom CSS I use. Thanks!
.RichTextSmallLines.sk-richtext p { margin: 0em 0; line-height: 1.4; }
.nx-editor select { font-size: 16.25px; }
.fixedElement { background-color: #c0c0c0; position:fixed; top:0; width:100%; z-index:90; }
@media screen and (max-width: 900px) { .MobileHide { display: none !important; } }
@media screen and (min-width: 899px) { .DesktopHide { display: none !important; } }
.Hover:hover { opacity:.4; }
.blink_me { animation: blinker 5s linear infinite; } @keyframes blinker { 50% { opacity: 0; } }
.sk-pagepanel.sk-pagepanel-overlay.sk-pagepanel-bottom.sk-pagepanel-open,.sk-pagepanel.sk-pagepanel-overlay.sk-pagepanel-left.sk-pagepanel-open, .sk-pagepanel.sk-pagepanel-overlay.sk-pagepanel-right.sk-pagepanel-open, .sk-pagepanel.sk-pagepanel-overlay.sk-pagepanel-top.sk-pagepanel-open {
border-color: white;
background-color: white;
padding:0px;
}
.nx-list-loadmore { background-color: #b95555; color: white; }
.FieldEditorItem.nx-basicfieldeditor-item {
margin-top:5px;
padding: 0 8px;
border-left: 2px solid #d4d4d4;
border-top: 2px solid #d4d4d4;
border-right: 2px solid #d4d4d4;
border-bottom: 2px solid #d4d4d4;
background: 0 0;
font-style: normal;
font-weight: 400;
font-size: 15px;
line-height: extract(normal,normal,15px,null,5);
}
.nx-basicfieldeditor-item-label {
width: Auto;
vertical-align: central;
padding: 10px 10px 10px 0;
}
.skuidEditBtn { display: none; }
.AgreementWrapper.sk.wrapper{ margin-left: auto; margin-right: auto; }
.sk-richtext table { border-collapse: collapse; }
table.nx-skootable-data thead td, table.nx-skootable-data>tbody>tr>td { border-right: 1px solid #b1bdc1; }