Jump to content
belltree

FormBuilder creating new form schemas

Recommended Posts

To create a new form schema and output do you only need to create files as below and edit as needed?

 

 

Input form (Schema):

jreviews/views/themes/default/fields_formbuilder/newformname.json

 

Output display:

jreviews/jreviews/views/themes/default/fields_phpformat/newformname.thmtl
 

 

How do the below example classes come into play elsewhere as I guess these should be renamed to suite the new schema? Are there other files that need to be edited when making a new schema?

<ul class="jrBusinessHours">

 <span class="jrBusinessHoursStatus jrBusiness-<?php echo $status;?>">

Share this post


Link to post

That is correct, only those two files are necessary. But you don't even need to create the files, you can add the code to the field in the Fields Manager directly if you use the "Schema" textarea for json code and PHP Based Formatting textarea for the template code.

 

In the template you can use 100% custom html and css code, it's not required to use anything existing from JReviews.

But if you want, you can definitelly use existing JReviews classes. For example, if you need to split some data into multiple columns, you can use the jrGrid classes: https://docs.jreviews.com/?title=Using_grids_for_custom_layouts

Share this post


Link to post

Thank you for your reply Kristian. I am trying to implement the below form with unpopulated check boxes on the listing input schema form and the output listing display but I am having a difficult time doing so. Is this technically possible with the current templates or should I be creating ones from scratch? Appreciate any guidance/pointers. Thank you.

 

 

2FVYSS4.png

Edited by belltree

Share this post


Link to post

If the left screenshot is how you want the Business Hours fields to look like on the listing submission form, that's not possible.

But on the listing detail page it should be possible to display the business hours however you want. All the data is available in the theme file and you can use 100% custom styles to display them.

That said, creating this layout isn't something we can help you with, it would probably require several hours to build it. Try posting this to the freelance board.

Share this post


Link to post

Yes, on the left, is how I wanted the submission form to appear for users submitting listings. While it is disappointing to know it is not possible it will save me hours of attempting to achieve the impossible. Thanks.

 

Thank you for advising. I will attempt further from my end and if I cannot achieve it I will post to the freelance board. Much appreciated.

Share this post


Link to post

I know you've wanted to create something like this for some time, I just don't understand why. Is that an industry-specific format? I created the "inventory" example just for you. Did you see the table format and the checkbox column there? It is true that we won't be providing support for creating new forms and themes, but at least now that we are at the beginning of this feature, we'll try to explore the possibilities. And while you cannot create something exactly like your form, you can create something close to it. However, you'll need to create the entire theme from scratch yourself or hire someone to help you with it.

 

Here's the JSON schema for the form. The hours cannot be text, they must be an input so I chose a select and made it readonly.

{
  "title": "Business Hours",
  "type": "table",
    "options": {
        "disable_array_add": true,
        "disable_array_delete": true,
        "disable_array_reorder": true
    },  
    "items": {
    "title": "Item",
    "type": "object",
    "properties": {
        "hours": {
          "id": "hours",
          "title": "Hours",
          "type": "string",
          "readOnly": true,
          "enum": [
            "8-9",
            "9-10",
            "10-11",
            "11-12",
            "12-13",
            "13-14",
            "14-15",
            "15-16",
            "16-17",
            "17-18",
            "18-19",
            "19-20",
            "20-21",
            "21-22",
            "22-23",
            "23-24"
          ]
        },        
        "monday": {
            "title": "M",
            "type": "boolean",
            "format": "checkbox"
        },
        "tuesday": {
            "title": "T",
            "type": "boolean",
            "format": "checkbox"
        },
        "wednesday": {
            "title": "W",
            "type": "boolean",
            "format": "checkbox"
        },
        "thursday": {
            "title": "T",
            "type": "boolean",
            "format": "checkbox"
        },
        "friday": {
            "title": "F",
            "type": "boolean",
            "format": "checkbox"
        },
        "saturday": {
            "title": "S",
            "type": "boolean",
            "format": "checkbox"
        },
        "sunday": {
            "title": "S",
            "type": "boolean",
            "format": "checkbox"
        }
    }
  },
  "default": [
    {
        "hours": "8-9"
    },
    {
        "hours": "9-10"
    },
    {
        "hours": "10-11"
    },
    {
        "hours": "11-12"
    },
    {
        "hours": "12-13"
    },    
    {
        "hours": "13-14"
    },     
    {
        "hours": "14-15"
    },
    {
        "hours": "15-16"
    },
    {
        "hours": "16-17"
    },
    {
        "hours": "17-18"
    },
    {
        "hours": "18-19"
    },
    {
        "hours": "19-20"
    },
    {
        "hours": "20-21"
    },    
    {
        "hours": "21-22"
    },    
    {
        "hours": "22-23"
    },
    {
        "hours": "23-24"
    }    
    
  ]
}

I used the "id" attribute on the entire form and also the "hours" input so that it's possible to make changes to it using CSS. So you can change the width, heights, padding, etc. Here's something to get you started.

[data-schemaid="business-hours"] tbody tr:nth-child(odd) {
   background-color: #ccc;
}
[data-schemaid=hours] {
   width: 70px;
}
[data-schemaid="business-hours"] td.compact {
  padding: 4px 20px 0 0;
}
[data-schemaid="business-hours"] select {
  height: 18px;
  font-size: 12px;
}

 

It ends up looking like this

 

2016-07-06_07-56-54.png

Share this post


Link to post

Wow, just wow! (Me, upon seeing your post Alejandro). That submission form is what I had been wanting all these years! Thank you so much, my hat is off to you sir. I am using this for a site which is not meant to be a "review site" so it will not be  standard use I think but I do believe it would be very useful for showing listings that are not open standard hours. Visually it is quite simple to see what days and hours something is open/closed or available or not.

 

About the output theme to display it I will work on it and see what I can come up with using your example as a base. If I cannot do so I will hire someone.

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. Please refer to our Privacy Policy.