Styling the summary page

classic Classic list List threaded Threaded
6 messages Options
Reply | Threaded
Open this post in threaded view
|

Styling the summary page

bwallis42
When I have a couple of saved drafts for a new (never saved) form and I try to create a new one I get asked the question

Several drafts for this form were auto-saved. Would you like to 
start from scratch or to see the auto-saved drafts (and then 
possibly edit one of them)?

Start from Scratch                   View auto-saved drafts

When I select the View auto saved drafts option I get taken to the summary page. Can I style this page to remove the search box and to change the buttons displayed (and the processes behind them)?

I just want
   "Review", "Delete" and "Back (or Cancel)" buttons with modified processes behind them.
   No search box
   a narrower width.

Is this possible.

What would be really nice would be a hover popup displaying a scaled down version of the draft :-)
Reply | Threaded
Open this post in threaded view
|

Re: Styling the summary page

Alessandro  Vernet
Administrator
Hi Brian,

The summary page you see in that case is just the regular summary page, just produced with the drafts-for-never-saved-document=true request parameter. You could change the code in apps/fr/summary/view.xhtml to add a CSS class, say on the <body> element, somewhere when that request parameter is present, and then write CSS that hides certain parts if that class is present. Would this do the trick for you?

Alex
--
Follow Orbeon on Twitter: @orbeon
Follow me on Twitter: @avernet
Reply | Threaded
Open this post in threaded view
|

Re: Styling the summary page

bwallis42
Thanks Alex, I don't want to go and make changes to the summary page as that would make it harder to upgrade in the future. What I have done and is working so far is to just add some CSS in our current css customisation file. This is similar to what we do for the buttons on the view and edit pages.

This CSS seems to work and gives me the floating buttons at the bottom of the window with a transparent
background. I have also hidden the buttons I don't want. The final css element hides the search box and button. I got this all working with a bit of trial and error.

My only concern with this is that if you make changes to the html in subsequent orbeon releases this will stop working. Is this something I should be concerned about? Is there a better way to do this?

thanks
brian...


/* Float the orbeon form buttons to the bottom of the frame 
   with the buttons contained in a transparent slightly grey
   div */

/* This matches the div that contains all the buttons*/
.orbeon .fr-buttons {
	bottom: 1px;
	display: inline-block;
	width: 98%;
	position: fixed;
	text-align: center;
	right: 1px;
	background: rgb(54, 25, 25); /* Fall-back for browsers that don't support rgba */
	background: rgba(54, 25, 25, .4);
	background-repeat: no-repeat;
	border: none;
	cursor: pointer;
	overflow: hidden;
	outline: none;
	position: fixed;
	border-radius: 8px;
}

/* This matches the span containing the button on a form view or edit page. */
.orbeon .fr-buttons .xbl-fr-process-button
{
	display: inline-block;
	position: relative;
	/* top: 50%;
	transform: translateY(10%); */
        padding: 7px;
}

/* This matches the review and delete buttons on a summary view form which is presented when 
   you try to create a new form but have multiple unsaved drafts of that form type. */
.orbeon .fr-buttons .fr-review-button, 
.orbeon .fr-buttons .fr-delete-button
{
        display: inline-block;
        position: relative;
        /* top: 50%;
        transform: translateY(10%); */
        padding: 7px;
}

/* This matches the home, pdf, duplicate and new buttons on a summary view form 
   which is presented when you try to create a new form but have multiple unsaved 
   drafts of that form type. We want to hide these buttons. */
.orbeon .fr-buttons .fr-home-button,
.orbeon .fr-buttons .fr-pdf-button,
.orbeon .fr-buttons .fr-duplicate-button,
.orbeon .fr-buttons .fr-new-button
{
        display: none;
}

/* This turns of the search field and button on the search in the summary view form
   which is presented when you try to create a new form but have multiple unsaved drafts
   of that form type. */
.orbeon .fr-summary-search #search-switch,
.orbeon .fr-summary-search div.fr-search-buttons
{
	display: none;
}
Reply | Threaded
Open this post in threaded view
|

Re: Styling the summary page

Alessandro  Vernet
Administrator
Hi Brian,

I might be missing something here, but doesn't this CSS apply to all summary pages, not just the one produced with the drafts-for-never-saved-document=true request parameter? Or am I missing something?

And about HTML changing, you can never completely rely on it never changing, but on the other side those things are pretty easy to test after an upgrade, and if necessary to change, so if it works for you I wouldn't really worry about it.

Alex
--
Follow Orbeon on Twitter: @orbeon
Follow me on Twitter: @avernet
Reply | Threaded
Open this post in threaded view
|

Re: Styling the summary page

bwallis42
Alessandro Vernet wrote
I might be missing something here, but doesn't this CSS apply to all summary pages, not just the one produced with the drafts-for-never-saved-document=true request parameter? Or am I missing something?
I see you your point but in our case it doesn't matter as this is the only time we actually use the summary page. Orbeon is tightly integrated into our document viewer and we provide the document listing functionality as there are other document types besides forms so we don't have a need for the summary list in normal usage.

 I am not going to go down the path of changes to the internals of Orbeon again, we did that for our last integration and it made updating to a later version almost impossible (but I'm getting there!)

And about HTML changing, you can never completely rely on it never changing, but on the other side those things are pretty easy to test after an upgrade, and if necessary to change, so if it works for you I wouldn't really worry about it.
I'll stop worrying and be happy :-)

thanks
Reply | Threaded
Open this post in threaded view
|

Re: Styling the summary page

Alessandro  Vernet
Administrator
Hi Brian,

OK, got it, if this is the only case in which users see the summary page, then you're good. And here as well, I'll do my best to story worrying and be happy :).

Alex
--
Follow Orbeon on Twitter: @orbeon
Follow me on Twitter: @avernet