A number of standard tools that are used to create content on .wpp pages are included with Web Port.
These are found in the same place as the symbol libraries.
Text editor
The text editor allows you to create your own texts via a WYSIWYG which also allows you to add your own images and links.
The following settings can be made:
| Setting: | Description: |
| Formatted text | Type in text and select the desired formatting |
| Background color | Selecting the background colour of the text area |
| Text color | Selecting a default colour of text (if none is selected in formatting) |
| Overhanging content | Overhanging content, can be hidden, scrolled or displayed |
| Css class | Css class for custom formatting |
| Css style | Allows you to add your custom css code |
| Editable in view mode | Allows you to edit the text in view mode |
Embed image
Provides the opportunity to upload and embed images.
The following settings can be made:
| Setting: | Description: |
| Upload image | Upload new or select image from assets/upload (if URL is not provided) |
| Image URL | Enter URL for image to display it (overrides the upload selection) |
| Fit image to proportions | View the entire image, crop or scale |
| Image position vertically | How to position the image on the image area |
| Image position horizontal | How to position the image on the image area |
| Image link | Create a link if you click on the image |
| Indicate where to open URL | Open in the same window, new tab, or parent |
| Css class | Css class for custom formatting |
| Css style | Allows you to add your custom css code |
| Repeat image and create patterns | Repeats the image in a pattern |
Embed button
Provides the ability to create buttons with selectable functionality. Among other things, link, read and write tags, run script, open and close content area, view and hide components.
The following settings can be made:
| Setting: | Description: |
| Enter text to button | Upload new or select image from assets/upload (if URL is not provided) |
| Navigate to page | Pick page to link to |
| Navigate to your own URL | Enter URL of page to open |
| Indicate where to open URL | Open in the same window, new tab, or parent |
Design settings
Click to expand
| Setting: | Description: |
| Button color | Color for the button |
| Text color | Color for the text on the button |
| Image button | Upload image and use as a button |
| Position image to text | Where the image will be next to the buttons text |
| Image width (height is auto) | In pixels |
| Image distance to text |
In pixels |
| Set size of text | In pixels |
| Fit button width | Either to text or to defined size |
| Margin around text | In pixels set margin from text to button |
| Dropdown shadow (Checkbox) | |
| Color shading (Checkbox) | Put shading to the button |
| Rounded Corners (Checkbox) | Smooth corners of the button |
| Larger mouse over (Checkbox) | Enlarge the button when hoovering |
| Set color based on tag |
Switches colour of button based on tag values. Indicated in format: TAG=VALUE|#hex&TAG2=VALUE2|#hex2. E.g. FAN_CMD=1|#00FF00&FAN_CMD=0|#FF0 000. Which makes the button green when FAN_CMD=1 and red when FAN_CMD=0. |
Write and read tags
Click to expand
| Setting: | Description: |
| Write to tags |
Write to one or more tags at click. Format TAG1=VALUE&TAG2=VALUE2 |
| JavaScript runs after tags are written | Returns an object with name data which can be used in JavaScript to display the result of writing. Example: alert (data.FAN_CMD); Prints "OK" if writing went succeded. See the browser console for more information |
| Read data from tags |
Reads the value of tags and returns as object with name data. Format: TAG1&TAG2 |
| Run Javascript after tags are read | See function JavaScript after writing above |
| Toggle value back and forth on tag | Toggle value on tag. Format: TAG_CMD |
| Run javascript after the tag is toggled | See function JavaScript after writing above |
Run scripts
Click to expand
| Setting: | Description: |
| Run JavaScript at click | Run JavaScript code at click. E.g. alert ('test'); |
Open/close navigation area
Click to expand
| Setting: | Description: |
| Open a navigation area | Enter the Html ID on the area to be opened. (seen below surface ID at top) |
| What mode should navigation area open in | Large surface, small surface, icon or closed |
| Toggle mode between | Allows you to switch between different modes. E.g. between Large and Icon |
Show/hide components
Click to expand
| Setting: | Description: |
| Indicate css classes to be shown | May be indicated on portlets, components and in background image. Separate with ",". E.g. cold1, room |
| Switch visibility | Indicates whether the same button should be used to both switch on and off |
| Hide Objects at first click | Sets the default behavior for first click |
Checkbox
The checkbox allows you to switch on and off layers (via classes), check other check boxes and run JavaScript while toggling. It can also be used as a radio button to choose one of several options.
The following settings can be made:
| Setting: | Description: |
| Enter description | The text shown next to the checkbox |
| Select type | Select whether to use checkbox or radio button. If using radio button, group needs to be filled under Advanced settings |
| Enter CSS classes | Indicates CSS classes to be switched on/off, separate with "," |
Design settings
Click to expand
| Setting: | Description: |
| Text color | Color of the text |
| Background color | Color of the background |
| Check or circle color | Color of the check-mark or selection bullet |
| Own css class | Css class for custom formatting |
Advanced settings
Click to expand
| Setting: | Description: |
| Radio button group id |
Used to group radio buttons so only one can be selected |
| Check other check-boxes | Set to check/uncheck other check-boxes |
Run scripts
Click to expand
| Setting: | Description: |
| Run JavaScript when (not) | E.g. alert ('checked'); |
| Checked Run script on start (checkbox) | Indicates if script for state should be run when loading page |
| Setting: | Description: |
| Remember states between | Indicates whether the last state should be kept in memory |
| pages Checked at startup | Indicates whether check box should be checked when loading page |
Content area
Creating dynamic areas on your page has never been easier. With our content area, you can place content in the page header or footer, along with opening and closing dynamic areas for different screens. For example, information that might not fit on smaller screens can be minimized to an icon. Creating a new content area is simple – all you have to do is drag and drop other objects into the area. The objects will follow the area in both edit and view mode. You can also move the surface without its contained components by pressing Ctrl while you move the content area. Once you create the content area, you'll have a white box with no dynamic functions.
Content area have 4 possible states:
| State: | Description: |
| Large area | The area has the size defined in the object settings |
| Small area | Can be a smaller version of large area where content is scaled, or which shows a smaller portion of a large area. Can also be its own area with contents |
| Icon | Shows an icon which opens a small or large area on click |
| Invisible | The content area is hidden |
Note!
Large area, small area and icon all have their own settings.Objects placed on a content area can be shown in the following ways:
| Setting: | Description: |
| Custom content positioning | Objects placed in the area are positioned as in edit mode |
| Vertical/horizontal list | Objects placed in the area are distributed horizontally or vertically in view mode |
| Overflowing content | Overflowing content can either be hidden, shown, or make a scroll bar appear |
| Scale content | The content area is hidden |
General area settings:
| Setting: | Description: |
| Start mode mobile/desktop | Indicates start mode (large, small, icon, invisible) on mobile or desktop |
| Position of area mobile/desktop | Indicates position of the content area on page in view mode |
| Close button | Manual configuration of whether close button should be shown. Default is to show close button if icon is shown at closing |
| Toggle switch | Button for switching between large and small area is shown by default when small area is defined |
Settings small area:
A small area is activated by either choosing that it should have the same content as large area, or by defining a size. If different content has been chosen, both a large and small area are shown in edit mode.
| Setting: | Description: |
| Same content as large area | Indicates whether small area will have its own content |
| Adjust large content | Scales the content in a large area to fit in the small area |
Settings icon:
Provides the possibility to choose whether the area should be hidden completely or be represented by an icon when closed. When clicking an icon, the following behaviour can be selected:
1. Open large/small area
2. Open url or run javascript
List options:
Provides the possibility to set a margin around objects when positioning is selected as list, and also to set a margin around the entire list. Input format above-right-below-left, e.g. 5px 5px 5px 5px.
General design options:
The area visualization is customized here, with the possibility to add shading, colors, rounded corners and customize scrollbar designs. The text on contents on the area can also be customized to fit the area background color.
Advanced options:
The area behavior on a page is customized here
| Setting: | Description: |
| Area direction | If the area position has not been set in page or floating it can be selected whether to add it to a horizontal or vertical list with other content areas |
| Sort order | Set sort order of content area. Lower = higher priority. By default content areas are sorted according to relative position |
| X/Y pos for floating/inpage | Used for e.g. large content areas which cannot fit on page in edit mode, but which should be shown in view mode |
| Closing priority | Decides which areas to close first when there is not room on screen for all areas. Lower number = latest close order |
| Draggable area | Provides possibility to drag the content area on page |
| Remember state on reload | The content area is started in the same mode as last viewed |
| Close if click outside | Closes the are when clicking outside it |
| Auto minimize | The area is automatically minimized if there is not enough room onscreen |
Examples
Example 1: Simple graphical menu in page
Create a new content area, choose header, place area on the correct position in page, choose a color under settings for large service and general design settings.
Example 2: Place date and time in footer
Create a new content area, place area on arbitrary position outside of the page. Set height to 30px, choose position mobile/desktop as footer-right.
Configure large area not to have background color, overflowing content auto. Remove shadow and rounded corners from design settings. Place a symbol of type Value with prefix WEBPORT_DATETIME.
The text color can either be configured in the value object or in the general design settings of the content area.
Example 3: Icon on top which displays large area on click
Create a new content area, place it arbitrarily where it does not block other content.
Set start-mode mobile/desktop as icon, position top-right. Select show icon when area is close and choose an icon image. Place the wanted objects on the area.
HTML code
HTML code portlet allows you to indicate your custom html/JavaScript code, upload/link other files or link other URL via iframe.
The following settings can be made:
| Setting: | Description: |
| Enter html/JavaScript | Example which produces an alert box and prints text on the page: <script> alert('test'); </script>Text in html |
| Link file | Upload and use HTML/Java script file |
| Link URL | Enter URL to be linked in via iFrame e.g. https://kiona.com |
| Overhanging content | Select behaviour of content that falls outside the selected size of the portlet |
How-Tos
###SectionLinks 12348938402716 en-gb