Child pages
  • Form Component

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

A splitpane could have 2 properties instead of that containedForm property shown above like "left" and "right" that then shows left and right a form.

Extra properties

The form component gets from the system a few extra properties that it can use to show the elements.:

svy_formHeight: the height of the contained form.

svy_formWidht: the height of the contained form.

svy_absoluteLayout: Is the contained form an absolute layout form (false means it is a reponsive form)

 

Below is the example how the bootstrap (reponsive) version of a form component implemenation works:

So if a height or widht is given then it will generate everything inside a div, with that specific height. If no height is given but the containedForm is in absoluteLayout it will use the form height and width to generate that wrapping div.

 

Code Block
languagejs
function createContent() {
	$element.empty();
    var newValue = $scope.model.containedForm;
    if (newValue) {
    	var elements = $scope.svyServoyapi.getFormComponentElements("containedForm", newValue);
        var height = $scope.model.height;
        var width = $scope.model.width;
        if ($scope.model.svy_absoluteLayout) {
	    	if (!height) height = $scope.model.svy_formHeight;
	        if (!width) width = $scope.model.svy_formWidth;
        }
        if (height || width) {
        	var template = "<div style='position:relative;";
        	if (height) template += "height:" +height + "px;"
        	if (width) template += "width:" +width + "px;"
        	template += "'";
        	if ($scope.model.styleClass)  template += " class='" +$scope.model.styleClass + "'";
        	template += "></div>";
        	var div = $compile(template)($scope);
        	div.append(elements);
        	$element.append(div);
        }
        else $element.append(elements);
    }
    else {
    	$element.html("<div>FormComponentContainer, select a form</div>");
    }
}