Alpaca form layout in Smart View

Amardeep_Arora_1

Hi All,

Here's a simple form definition for Smart View:

    formDefinition = {  
      "data":{  
        "document_title":null,
        "document_number":null,
       },
       "options":{ 
        "form": {
          "buttons": {
            
             
          }
        },
        "fields":{  
          "document_title":{  
           "hidden":false,
           "hideInitValidationError":true,
           "label":"Title",
           "placeholder": "enter value to filter",
           "readonly":false,
           "type":"text"
          },
          "document_number":{  
           "hidden":false,
           "hideInitValidationError":true,
           "label":"Number",
           "placeholder": "enter value to filter",
           "readonly":false,
           "type":"text"
          }
        }
       },
       "schema":{  
        "properties":{  
          "document_title": {
					 "maxLength": 64,
					 "readonly": false,
					 "required": false,
					 "title": "Title",
					 "type": "string"
					},
					"document_number": {
					 "maxLength": 64,
					 "readonly": false,
					 "required": false,
					 "title": "Number",
					 "type": "string"
					}
        },
        "type":"object"
      }
   };

This results in a 2 field form with fields placed vertically one below the other

So far good.

Now, I would like to change the layout and have these fields placed horizontally instead besides each other. Something like this - I grabbed this snip from alpaca site:

I looked up on alpacajs.org and I found usage of either layout templates to achieve this OR have the layout defined in the "view" declaration like this:

  "view": {
    "parent": "bootstrap-edit",
    "layout": {
      "template": "<div class='row'><div class='col-md-6' id='column-1'></div><div class='col-md-6' id='column-2'></div></div>",
      "bindings": {
        "name": "column-1",
        "address": "column-1",
        "preferences": "column-2"
      }
    }
  }

However, it appears that the smart view SDK doesnt like this declaration and produces an error in the browser's console:

Any options to achieve this if the alpaca directive isnt being successful in smart view?

Thanks

Amardeep

mbarben

Hi Amardeep,

Keep in mind that Smart UI SDK is using an altered version of Alpaca:

• Alpaca Lite
• Alpaca Rest

Unfortunately, because they have altered you cannot be sure what version they based their fork of Alpaca off. However - from the documentation (there is an alpaca.md in the lib area of the SDK), it would appear that Alpaca Lite is a cut-down version of Alpaca. It may be that you need to use the csui-alpaca-legacy of the module (however from what OT has written here there might be a performance penalty for this).

Also, keep in mind that you are going to find a location where forms a spread horizontally in OT. It might be worth keeping the fields stacking vertically to keep it consistent with the OTCS app.