The form-report Way

Table of Contents

1) Extracting data from a DF-page by using listpages.

3) Fixing the problem of displaying only the wanted article.

5) Hiding unwanted information when in editing-mode

6) Now redirecting to the "view" page after saving the "edit" page

Okay this is a hack and a workaround but I need this - so I made it.
In the future all the form fields will be available outside the [[form]] declaration so then this will not be necessary any more.
What I was aiming for is a way to style the entered data from a form in the way that I wish, not the way wikidot does now: a simple table that lists all the entered data.

So for a regular use of Data Forms (DF) you should make a live _template in a certain category. Lets assume that we are making some kind of newspaper with articles and pictures.

I will make the _template in the category "new-article:". Now that the _template is created, I assign an autonumbering to that category. You can set it in the admin-section. If you follow this link you will go to the template without the adjustment to make this all work… So that it the basic template, I have saved it as new-articl2:_template so you can see the difference in the end. This could be a page that is created with that _template. As you can see… with the funcionality of today this looks like shit. So I did a few hacks

1) Extracting data from a DF-page by using listpages.

The [[listpages module]] make it is possible to get all the fields from a page that is constructed using a DF. That page holds fields named "form_data{fieldname}". Where fieldname is your given name to a field and as defined if the [[form]] declaration.

So we can make a design inside the [[listpage module]]. The simplest design could be something similar to the following:

[[module listpages category="new-article"]]
+ %%title%%
[[div style="font-style : italic;"]]
%%form_data{summary}%%
[[/div]]

%%form_data{full-article}%%

[[image %%form_data{picture}%%]]
----
[[/module]]

This page shows the result. That is starting to look better.

2) Using tags to get only one result.

However, it is not possible (YET) to use a pagename as a selector for the [[listpages module]]. So I had to find a way to select a single specific page. There is no other way as far as I know, then using tags. So I give every page that I create with the form, ist autonumber as a tag.

So there is a category named "new-article" that holds the _template and the rough-shaped articles. And every article has a unique tag beeing its own autonumber (you need to set this tag this manually :-( ).

3) Fixing the problem of displaying only the wanted article.

Lets see if we can do this with an [[include]] function and some variables. For example [[include include:show-article number=1]]

This is an example of basic data forms

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras semper sem eu est pretium placerat. Etiam sodales pulvinar nibh et eleifend. Maecenas auctor tincidunt mattis. Proin placerat purus in dolor dignissim eget fermentum nunc sollicitudin. Lorem rulez.

Aliquam rhoncus dictum hendrerit. Ut vel erat nec ante iaculis tempor quis sit amet erat. Duis mattis justo eget elit fermentum dapibus. Aliquam quis sem et mi congue dignissim. Integer dignissim dignissim metus et ornare. Aliquam erat volutpat. Mauris sodales quam id nulla adipiscing venenatis. Praesent pulvinar augue in tellus bibendum ullamcorper. Sed at urna eu augue vulputate aliquet. Fusce a dui risus. Nam non metus id nibh rhoncus tempor non nec massa. Nam placerat erat nec velit condimentum venenatis. Vestibulum luctus imperdiet eros, nec gravida velit volutpat consectetur. Aliquam erat volutpat. Nam scelerisque porttitor elit, quis euismod orci adipiscing et.

4) Adding an edit button to your layout

Of course, this is a wiki so we want everybody to be able to edit what they see. We need an "EDIT" with some funky redirecting because the article is of course not on the page where the edit-button sits. Atherwards you can edit this and make a graphical button, but for now I will make a simple text-button.
I need to construct the link with things that are available in the [[listpages module]]:
[[http://form-report-way.wikidot.com/new-article2:{$number}/edit/true EDIT]] So we jump to the right page and we display it in EDIT-mode by adding "/edit/true" to the URL.
Okay I added some CSS for the button

[[span class="textbutton"]][http://form-report-way.wikidot.com/new-article2:{$number}/edit/true EDIT][[/span]]
[[module css]]
.textbutton{
    display:inline;
    margin:3px;
    border:1px solid #777;}
.textbutton a{
    color:#000;
    font-size:80%;
    padding:3px;
    margin:0px;
    background-color:#ddd}
.textbutton a:hover{
    color:#333;
    background-color:#aaa}
[[/module]]

I added this to include:show-article-edit so You can still see the different steps… Okay, this works but we will need to refine it even more

This is an example of basic data forms EDIT

5) Hiding unwanted information when in editing-mode

If you clicked on the new EDIT-button, you will see a page that jumps to the form (wich we want) but that page also shows a lot of things we do not want to see as a "dummy"-contributor… and that is what this is all about… making user-friendly simple interfaces so that our contributers are not confronted with "technical stuff".
So now it's CSS-time… to keep your [[form]] declaration page simple I will use an [[include]] for the CSS. Let's put it on "include:clear-form".
This is the CSS code

/* HIDES: The page does not (yet) exist.*/
#page-title{display:none}
 
/* HIDES: edit the page*/
#action-area h1{display:none}
/*
#action-area-top    {display:none !important}
*/
 
/* SETTINGS to align "title of page" to form*/
#edit-page-form table.form{
    margin:0 0 0 0 !important;
    padding:0 0 0 0 !important;
    border-collapse:collapse}
 
#edit-page-form table.form tr{
    margin:0 0 0 0;
    padding:0 0 0 0;}
 
#edit-page-form table.form tr td{
    margin:0 0 0 0;
    padding:0 0 0 2px;
    vertical-align:middle}
 
#edit-page-form table.form tr td input.text{
    font-weight:400 !important;
    font-size:12px !important; 
    border:2px inset #f00;
    background-color:#fff;
    width:400px;
    height:17px;
    margin-left:22px}
 
table.form-table{
    border:0px solid red;
    margin:0 0 0 0 !important}

Now lets see what the new edit-mode looks like: press "EDIT" below.

This is an example of basic data forms EDIT

6) Now redirecting to the "view" page after saving the "edit" page

If we put a [[redirect module]] in the form-page this will get executed after saving the file. The thing is… How to avoid the redirect when you enter the form-page if you wish to edit? Well wikidot invented something @URL so this is where the EDIT-button gets redesigned… we will add ""/noredirect/true". So that will become:

[[span class="textbutton"]][http://form-report-way.wikidot.com/new-article2:{$number}/edit/true EDIT][[/span]]

And we add to the form-page the [[redirect module]]

[[module Redirect destination="http://form-report-way.wikidot.com/include:show-article/number/%%name%%"]]

OKAY the redirect after saving does not work with the include page… have to figuere this out

This is an example of basic data forms EDIT

Please give me some feedback on this.

Hide All Comments Unfold All Fold All

Add a New Comment

home

The form-report Way

Giving form to data

1) Extracting data from a DF-page by using listpages.

2) Using tags to get only one result.

3) Fixing the problem of displaying only the wanted article.

This is an example of basic data forms

4) Adding an edit button to your layout

This is an example of basic data forms EDIT

5) Hiding unwanted information when in editing-mode

This is an example of basic data forms EDIT

6) Now redirecting to the "view" page after saving the "edit" page

This is an example of basic data forms EDIT