Fixed and dynamic positions

Fixed and dynamic positions

Fixed and dynamic positions :

When you insert elements in the InterFormNG2 designer, then you can choose to insert the element in either a fixed or a dynamic position.

 

This is also explained in this video:

 



If you insert a physical element in InterFormNG2, then the element is as default inserted with a dynamic position. The only exception is the line element, which always has a fixed position.

 

You can compare dynamic positioning with e.g. html and a Word document: Each new element is inserted to the right or below the previous element depending on the flow direction of the container element in which the element is inserted.

 

You can see if an element is positioned fixed or dynamic in two ways:

 

1.If the element is placed in a fixed position (relatively to the container in which it is placed), then you will be able to see the cross hair icon to the right of the element in the element tree on the left in the designer:

NG2FixedDynamicPos0001

2.You can also see the positioning, if you look at the element properties e.g. via double clicking the element in the element list:

 

This element has a fixed position:

 

NG2FixedDynamicPos0002

 

And this element has a dynamic position (and no cross hair icon in the element list):

 

NG2FixedDynamicPos0003

 

The fixed positioned elements are output in fixed positions, where dynamic positioned elements are output in a position, that is relative to the other elements inserted prior to this element.

 

This is all relative to the element container in which the element is inserted.

 

It is not always 100% clear, if you should use a dynamic or fixed position for a specific element, and to make matters worse you can even combine them and insert a fixed positioned element inside a dynamic positioned element container and vice versa.

 

In general you should however consider to consider to use dynamic positioning as much as an dynamically positioned element e.g. can automatically adopt to the size of the container element in which it is placed. A text element will e.g. automatically wrap around within the container, if the container is not wide enough to hold the text in one line.

 

Dynamic positioning is also normally necessary to present detail lines of an input file.

 

These sections explain each of the options:

 

1.Fixed positioning

2.Dynamic positioning

3.Combining fixed and dynamic positioning


Fixed  positioned element :

In the InterFormNG2 designer you can place elements in either a fixed or dynamic position. In the section below you can read all about fixed positioning.

 

An explanation of fixed vs. dynamic positioning is also included in the manual.

 

This section covers this:

 

1.Convert a dynamic positioned element to fixed position.

2.Convert a fixed positioned element into dynamic positioning.

3.Change the position.

4.The dimensions/size of a fixed positioned element.

5.Fixed positioning and container elements.

6.Fixed position setup via an Xpath expression.

7.Combining fixed and dynamic positions

 

 

Convert dynamic positioned element to fixed positioned

All physical elements in the designer are as default placed in a dynamic position, but you can change an element to be positioned in a fixed position in two ways:

 

1.You can select the element in the result view and drag it to the position, where you want it to be 'printed'. This automatically change the positioning from fixed into dynamic and the position values a changed according to where you drag the element to.

2.You can also edit the properties of the dynamic element and change the position option to fixed like below:

 

NG2FixedDynamicPos0002

 

 

Convert fixed positioned element into dynamic positioning

If you have an element, that you want to convert into dynamic positioning, then you can do that by either insert the fixed positioned element into a dynamic positioned container element or by changing the position mode from 'Fixed' into dynamic by changing the properties:

 

NG2FixedPos0001

 

 

Change the fixed position

If you want to change the position of an element, that is using the fixed position option, then you can use the options mentioned as the fixed alignment options, but you can of course also consider to move the container element in which the element is placed.

 

 

The dimensions/size of fixed positioned elements

The dimension property of an element defines the size. The dimension setting effect the element size as explained below:

 

This is default set to be 'Dynamic width and height based on content'. The behavior is covered here:

In practice this means, that the element size depends on if the element is fixed or dynamically positioned:

1.If the element is dynamically positioned, then the size of the container element is limited by the container element in which it is inserted.

2.If the element is fixed positioned, then there is in theory no limit to the element size. It is actually undefined. A text element will e.g. never wrap around as the width is indefined.

 

Another dimension value is: Fixed width, fixed height. With this the element size is the same for both dynamic and fixed positioning.

 

 

Fixed positioning and container elements

When you setup fixed positioning of an element, then the position is only fixed relatively to the container element in which the element is inserted. That means e.g. that you have setup a margin on the page element of e.g. 0.6 cm, then the position you state for the elements inside the page is 0.6 cm away from the final position. That is the same all over - also if you have multiple levels of element containers.

 

 

Fixed position setup via an Xpath expression

It is possible to setup an XPath expression to decide the position of a fixed positioned element instead of setting a fixed value. In order to do this you first set the element to be fixed positioned:

 

NG2FixedPosition0002

 

And then you can click the <> icon to the very right of the X-axis or Y-axis lines to change into XPath mode:

 

NG2FixedPosition0003

 

Now you can setup an XPath expression e.g. with the use of the magnifying glass to calculate the position from the left (X-axis) and right (Y-axis). In the example above we have chosen to set the position via two variables.

 

Please notice the measurement for the position: The measurement is 72 dots per Inch. This means, that if either of the variables has a value of 72, then this will mean a position that is 1 inch (from the top or left).

 

So in short if you want to calculate and set the position in inches, then you just need to multiply the position in inches with 72.

 

If you want to calculate and set the position in cm, then you need to multiply the position in cm with 72 and divide with 2.54. This is the same as multiplying the position in cm with 28.3464.

 

Remember, that the numeric value for the position must be written with a decimal dot without any thousand separator.



Dynamic positioned element :

In the InterFormNG2 designer you can place elements in either a fixed or dynamic positions. In the section below you can read all about dynamic positioning.

 

An explanation of fixed vs. dynamic positioning is also included in the manual.

 

This section covers this:

 

1.Convert a dynamic positioned element to fixed position.

2.Convert a fixed positioned element into dynamic positioning.

3.Change the position.

4.The dimensions/size of a dynamic positioned element.

5.Dynamic positioning and container elements.

6.Detail lines

7.Page breaks

8.Block protection

9.Combining fixed and dynamic positions

10.Calculated position

11.Forcing vertical repositioning for blank texts.

 

 

 

Convert dynamic positioned element to fixed positioned

All physical elements in the designer are as default placed in a dynamic position, but you can change an element to be positioned in a fixed position in two ways:

 

1.You can select the element in the result view and drag it to the position, where you want it to be 'printed'. This automatically change the positioning from fixed into dynamic and the position values a changed according to where you drag the element to.

2.You can also edit the properties of the dynamic element and change the position option to fixed like below:

 

NG2FixedDynamicPos0002

 

 

Convert fixed positioned element into dynamic positioning

If you have an element, that you want to convert into dynamic positioning, then you can do that by either insert the fixed positioned element into a dynamic positioned container element or by changing the position mode from 'Fixed' into dynamic by changing the properties:

 

NG2FixedPos0001

 

 

Change the position

If you want to change the position of an element, that is using the fixed position option, then you can use the options mentioned as the dynamic alignment options, but you can of course also consider to change the margin of the element (inside the element properties), or to move the container element in which the element is placed.

 

 

The dimensions/size of a dynamic positioned element

The dimension property of an element defines the size. The dimension setting effect the element size as explained below:

 

This is default set to be 'Dynamic width and height based on content'. The behavior is covered here:

In practice this means, that the element size depends on if the element is fixed or dynamically positioned:

1.If the element is dynamically positioned, then the size of the container element is limited by the container element in which it is inserted. That means e.g. that a text element as default automatically adapts to the width of the container and wraps around to use as much as possible of the available width and include all the text.

2.If the element is fixed positioned, then there is in theory no limit to the element size. It is actually undefined. A text element will e.g. never wrap around as the width is indefined.

 

Another dimension value is: Fixed width, fixed height. With this the element size is the same for both dynamic and fixed positioning.

 

 

Dynamic positioning and container elements

Dynamic positioning can be used on multiple levels: Not only can you insert dynamically positioned elements inside of a container element, but the container elements can also be dynamically positioned.

 

 

Detail lines

Detail lines should normally be presented via design elements, that flows over the page from the top and downwards. They need to be inserted in the body (i.e. outside of the header and footer) of the page element. This flow is created by inserting text lines, that are dynamically positioned.

 

The dynamic positioning can be implemented in these ways:

 

1.You can insert a table element, where you have activated the repeat option for a row.

2.You can use a Repeat element and inside of it you can insert dynamically positioned elements. That can e.g. be a table with a single row, or you can e.g. also consider to insert a container element. You can e.g. set a fixed height of the container element and use fixed positioned elements inside of this container.

 

If you want the detail lines to be able to force a page break/page overflow, then you need to ensure, that the main container has a dynamic position. If it has a fixed position, then the detail lines cannot force a page overflow.

 

This video shows how detail lines can be handled in InterFormNG2:



Page breaks

Page breaks in InterFormNG2 can be executed in these ways:

 

1.You can insert multiple page elements in the template.

2.You can insert detail lines with dynamic positioned elements, that overflows the available size of the body,

3.You can use the page break element to force a new page whenever you like e.g. within a condition like the if element or the select element.

4.Please notice, that if your detail lines does not respect the footer and the size of the page, then you should verify this: a) Is the main container in which the detail lines are inserted positioned dynamically? That is a requirement. If the main container is fixed positioned, then it cannot force a page break. b) If the footer is overwritten, then make sure that you have a dynamically positioned container in the footer, that defines the size of the footer.

 

 

Block protection

When you insert detail lines, then you might want to prevent a page break in the middle of a section. You can e.g. have detail lines in an invoice, where some detail lines has multiple optional description lines and you want to keep these description lines on the same page as the header.

 

If you want to avoid this, then you need to implement a block protection in InterFormNG2 i.e. ensure that InterFormNG2 considers these element as an unbreakable section.

 

You should normally do that by inserting the whole detail line section in a cell in a table. A cell cannot be divided across pages, so you can use that as a block protection.

 

This video illustrates how block protection works:



Combining fixed and dynamic positioning :

It is sometimes useful to combine fixed and dynamic positioning in your templates.

 

A couple of examples are mentioned below:

 

1.Use fixed positioned texts within a dynamically positioned container.

2.Use dynamically placed texts within a fixed positioned container.

 

 

 

Fixed positioned texts within a dynamically positioned container

If you want to create multiple, small labels on each output page, then you might want to place lines, boxes (in form of container elements) barcodes, images and texts in fixed positions within each label, by you want to let InterFormNG2 distribute the labels across the output pages:

 

NG2CombineFixedAndDynamic0001

 

In the example above we create a setup, that inserts multiple labels on each page - 2 columns per page.

The outmost container is like the inner one placed with a dynamic position. The outmost sets up 2 columns:

 

NG2CombineFixedAndDynamic0002

 

Inside of that we have a repeat loop for all document and inside of that a container, that defines the contents of each label (one for each document):

 

NG2CombineFixedAndDynamic0003

 

We can also setup a top/bottom margin on this container to spread the labels a bit more. In this example I have also added a border on this container.

 

Inside the container the texts and the barcode is inserted with a fixed position, so that they placed in the same relative positions in each of the labels:

 

NG2CombineFixedAndDynamic0004

 

 

Dynamically placed texts within a fixed positioned container.

One example of when it makes sense to consider dynamically placed texts within a fixed positioned container is in an address box:

You can e.g. use an outer fixed placed container to position the address to a fixed place in the output to match the envelopes, that you intend to use - or to match a corporate identify.

This outer container can e.g. even use a border to make a box around the address.

 

Within the fixed positioned container it however makes sense to insert dynamically placed texts (e.g. within another fixed placed container to easily be able to move the texts inside the main container).

 

This is covered in this video:







    • Related Articles

    • Split spool (dynamic key position)

      As the split spooled file (fixed key position) component above, this component can be used to split a spooled file based on a key value. However, in this case the key value can be in variable positions on the page. You just need to be able to find ...
    • Split spool (fixed key position)

      If you want InterFormNG2 to process spooled files, that contains multiple documents e.g. multiple invoices within a single spooled file (e.g. generated by a batch invoice run), then you may want to split up the spooled file into multiple output PDF ...
    • Insert dynamic images found in spooled file

      This section address scenarios where you have an input spooled file in InterFormNG2, which includes spooled file lines, that refers to dynamic images e.g. found via a link. This can e.g. be in spooled files generated for processing in InterForm400 ...
    • Aligment options for dynamic placed elements

      There are several ways to align dynamic positioned elements in the designer: (This lists alignment options for dynamic positioned elements only. All alignment options are covered here.) 1.You can use the table element to align columns e.g. for detail ...
    • Aligment options for fixed positioned elements

      There are several ways to align fixed positioned elements in the designer: (This lists alignment options for fixed positioned elements only. All alignment options are covered here.) 1. You can enable a grid, resize the lines of the grid and the fixed ...