Can I replace the standard Page Title text with a template that looks exactly the same but is editable?

  • 1
  • Question
  • Updated 5 years ago
  • Answered
Since the Page Title already has the record name in it (in this case, the Project Name), I don't want to include the Project Name in the field editor right below the Page Title. It takes up a lot of space and is only necessary in case someone needs to edit it.

Can I use a template instead of the Page Title component? Can you give me an example of the html/css that would need to be in the template?

Thank you!
Photo of Kaede Holland

Kaede Holland

  • 2,744 Points 2k badge 2x thumb
  • happy.

Posted 6 years ago

  • 1
Photo of Peter Bender

Peter Bender, Champion

  • 6,246 Points 5k badge 2x thumb
A template isn't a field that is editable by the end user - it only displays text. Are you saying you want a page that doesn't have a title? Or one that has an editable field with a fancier looking label? You can apply HTML to the field label.
Photo of Anna Wiersema

Anna Wiersema

  • 10,890 Points 10k badge 2x thumb
There's not a direct way to do this, but here's a creative/hacky way with a field editor & CSS (with considerable thanks to Ben Hubbard for the CSS part):



Directions
  1. Delete the title fields of the Page Title (if you want to keep the buttons, which I did).
  2. Add a panel set, adjust the panel widths as desired. Put the buttons in one side, and add a field editor to the other.

  3. Set the field editor to the appropriate model and delete the section title - if you just leave it blank, it won't show up.
  4. Pull in a Template, and delete its field label.
  5. Then, enter the fields you want in the template e.g.{{FirstName}}{{LastName}}

  6. Then, go into Resources and add an inline CSS resource.


    Enter the CSS for your field-editor/title, for example.
    .nx-panel > .nx-basicfieldeditor:first-child .nx-fieldtext {
    
    font-size: 2em;
    color: #299FC5;
    }
    .nx-panel > .nx-basicfieldeditor:first-child .nx-basicfieldeditor-section-header {
    border-bottom: none;
    }

Basically, here you have to tell the page which field editor you want to change the CSS for, since there are many on the page. Since mine was in a panel, I used .nx-panel > .nx-basicfieldeditor:first-child which means something like "in a panel set, look for a field editor and apply these properties." If you're just putting yours at the top of the page (not in a panel), use .nx-page > .nx-basicfieldeditor:first-child.

Let us know if you run into any trouble!
Photo of Kaede Holland

Kaede Holland

  • 2,744 Points 2k badge 2x thumb
Thanks for your help on this!

On my initial try - the inline css I added changed all field editors... not just the first one (the one I created per the above instructions).

Did I miss something?
Photo of Anna Wiersema

Anna Wiersema

  • 10,890 Points 10k badge 2x thumb
will you share your CSS with me, or even just email your whole page XML to me at anna@skuidify.com. I think it's a problem with the .nx-panel > .nx-basicfieldeditor:first-child thing, so if you let me know where your field editors are on your page, that should help (i.e. are they in panels? are they in tabs? are they just on the page and not in another component?)
Photo of John Nelson

John Nelson, Product Manager

  • 3,234 Points 3k badge 2x thumb
It's possible your setup may be slightly different. Basically you need to isolate the one field editor you want to change.

So if the field editor's parent is the page, then .nx-page > .nx-basicfieldeditor:first-child .nx-fieldtext will be what you want. If it's not, you need to figure out what the class is for that component. For instance, if it goes page > tabset > field editor, you'd need something like: .nx-page > .ui-tabs .nx-basicfieldeditor:first-child .nx-fieldtext

What you're trying to do is kind of tricky, so it might take a few tries to get the css just right.
Photo of Kaede Holland

Kaede Holland

  • 2,744 Points 2k badge 2x thumb
I see what you're saying. The CSS was doing exactly what I was telling it to - changing the first field editor found within a panel. I just had a few other first field editors found within a panel on my page. I will try it as the first field editor found on the page and I think that should fix it.
Photo of Kaede Holland

Kaede Holland

  • 2,744 Points 2k badge 2x thumb
After updating to Summer 13 - the CSS I added no longer functions the same way. Can you help?
Photo of Kaede Holland

Kaede Holland

  • 2,744 Points 2k badge 2x thumb
This is what had been working:

.nx-panel > .nx-basicfieldeditor:first-child .nx-fieldtext {
font-size: 14pt;
font-weight: bold;
color: #000000;
}
.nx-panel > .nx-basicfieldeditor:first-child .nx-basicfieldeditor-section{
background: #FFFFFF;
margin: 0px
padding-bottom: 0px;
}
.nx-panel > .nx-basicfieldeditor:first-child .nx-basicfieldeditor-section-header {
padding: 0px;
border-bottom: none;
border-top: none;
font-weight: bold;
color: #FFFFFF;
}
.nx-panel > .nx-basicfieldeditor:first-child .nx-basicfieldeditor-item {
padding: 0px 8px;
margin: 0px;
border-bottom: none;
background-color: #FFFFFF;
}
.nx-panel > .nx-basicfieldeditor:first-child .nx-list-footer {
padding: 0px;
margin: 0px;
}
Photo of John Nelson

John Nelson, Product Manager

  • 3,234 Points 3k badge 2x thumb
This issue really deserves its own thread, so went ahead and created one. Please reference the new topic here: After updating to Summer 13 - the CSS I added no longer functions the same way.
Photo of Ben Hubbard

Ben Hubbard, Employee

  • 12,490 Points 10k badge 2x thumb
Hi Kaede, this should be a pretty simple CSS fix. Can you post a screenshot of how it looks now, and how it used to look?