Page tree
Skip to end of metadata
Go to start of metadata

This is the documentation for ConfiForms Server/Data Center app


In this tutorial you will learn how to create a simple form and show the data stored in the form in different ways. We call these macros "views"

  • as WYSIWYG list

  • as Card view (card-like table)

  • as simple HTML table

  • as table with inline search

  • as editable table
  • as Calendar

  • as PlainView (showing data as-is, to mix with HTML and other code)
  • as ValueView (shows particular field value)

We will create 8 page in Confluence, each page will accommodate one of the ways to show the data and another page will be to store the form configuration

If you are new to ConfiForms, please take a few minutes to read the Basic concepts Guide, or go through the video tutorial on that page.  (smile)


ConfiForms is very flexible at how it can show the data your store. Define form once and show it multiple ways (via ConfiForms Registration Control) and show the data stored with this form on any page, any data subset and in the way and layout you want, with sorting and styling you need.

Let's start with the form. We will define a form with 3 fields: text, textarea and date

We will also have a default "ConfiForms Registration Control" macro which will enable default way of registering records with dialog form.

 Click here to expand...
<ac:structured-macro ac:macro-id="4c4be3cf-91c4-4de1-a0b0-ff9f567739cd" ac:name="confiform" ac:schema-version="1">
  <ac:parameter ac:name="formName">f</ac:parameter>
  <ac:rich-text-body>
    <p>
      <ac:structured-macro ac:macro-id="cb785dd3-2e33-4626-9759-dc3c5dfbd5a7" ac:name="confiform-field-definition" ac:schema-version="1">
        <ac:parameter ac:name="fieldName">t</ac:parameter>
        <ac:parameter ac:name="fieldLabel">My Text</ac:parameter>
        <ac:parameter ac:name="type">text</ac:parameter>
      </ac:structured-macro>
    </p>
    <p>
      <ac:structured-macro ac:macro-id="59117dc0-60e6-43f8-be55-828ea7664a0c" ac:name="confiform-field-definition" ac:schema-version="1">
        <ac:parameter ac:name="fieldName">ta</ac:parameter>
        <ac:parameter ac:name="fieldLabel">My textarea</ac:parameter>
        <ac:parameter ac:name="type">textarea</ac:parameter>
      </ac:structured-macro>
    </p>
    <p>
      <ac:structured-macro ac:macro-id="c695ea1a-d03c-4e2a-ac80-85982ca97172" ac:name="confiform-field-definition" ac:schema-version="1">
        <ac:parameter ac:name="fieldName">d</ac:parameter>
        <ac:parameter ac:name="fieldLabel">My date</ac:parameter>
        <ac:parameter ac:name="type">date</ac:parameter>
      </ac:structured-macro>
      <ac:structured-macro ac:macro-id="f24efa14-a7c6-4738-bf8c-721d5bb75923" ac:name="confiform-entry-register" ac:schema-version="1">
        <ac:parameter ac:name="atlassian-macro-output-type">INLINE</ac:parameter>
        <ac:rich-text-body>
          <p> </p>
        </ac:rich-text-body>
      </ac:structured-macro>
    </p>
  </ac:rich-text-body>
</ac:structured-macro>

Let's add couple of rows of data

exactly 2 rows, like in the screenshot above


Now we will create a page for each of the "views", let's start with WYSIWYG list (or the ListView, ConfiForms ListView macro)

WYSIWYG list

The details for ListView macro are like this - we reference the form "f" from our page named "multiple ways to show the data"

This is how the page looks in the "view mode"

CardView

Also, adding a page to Confluence and placing CardView macro on it

We added sorting here, just for fun and the basics are all the same: referencing a from from our page named "multiple ways to show the data"

ConfiForms Field macros tells us which fields to show and in what order. Important note: for TableViews and CardViews you cannot include the design. The macro body is taken as metadata only, to extract field names and their order appearance 

This is how it looks like on the page in "view mode"

Simple HTML table

To show the data from ConfiForms forms as table is a responsibility of ConfiForms TableView macro. Configuration is very similar to CardView. List of ConfiForms Field macros tell the order of the fields to include into the resulting table

How the page looks like in the view mode:

In this example we intentionally skipped the Textarea field and included only date and text field. Just to demonstrate the ability to show only the fields you want from a saved dataset.

Table with instant search

Same as above, uses ConfiForms TableView macro, but changes the defaults to enable instant search, and some highlighting

We have added CSS rules to show the textarea field values in green colour... and you can change the colour to your own of course (smile)

Also , an instant search is enabled via the parameter on TableView (easy to search big tables, including the ones that are paged, shown in pages)

Editable table

Very similar to simple HTML table but will add ConfiForms Edit Controls to enable edits (we can enable edits via dialogs or via inline edit; in this example we will place default "ConfiForms Edit Controls" macro, which will have a delete option enabled as well)

And after saving the page the table will look like

with enabled "Edit/Delete" controls for users who have permissions to edit/delete records (form administrators or record owners)


You can use "ConfiForms Edit Controls" macro with any "views" macro such as TableView, ListView, CalendarView and CardView



Calendar

Another way of showing the data which you can group by date (datetime, timestamp) field is CalendarView

ConfiForms CalendarView macro is responsible for it

Please note that we choose field "d" which is our date field to be the grouping field for the calendar view

And here is how the calendar view looks like in the view mode

In this tutorial we have demonstrated few different ways of how you can show the data stored with ConfiForms forms. And this is just "scratching the surface" as there are many many other options and features to help you with creating amazing custom views over your data with ConfiForms!


Show as PlainView, shows values as-is

ConfiForms has a macro to show the data as-is. The macro is called ConfiForms PlainView.

We can mix the contents with HTML tags for example


This configuration will show a bullet-list of the data we have stored with ConfiForms


Using ValueView

In ConfiForms we have a macro to conveniently show the value of just one field (it can be 1 row or many, depending on a filter you set)

Macro name is ConfiForms ValueView.

Here is how it can be used


You specify a form name, page where form is located, a filter (if you want to show field value for particular record) and a field name

Also, you can apply some CSS if you want to.



Need help with ConfiForms or would like to ask for the advice or share a feature request?