Please, note that the Edit button is hidden if the application is run by LyciaWeb as browsing a local machine from the Internet zone is forbidden in all modern browsers.

BlobViewer can hold any file, but in runtime it will display and allow editing only those file types (content types) which can be processed by your operation system (for LyciaDesktop) or the browser you use (for LyciaWeb). If the necessary plug-ins are not installed, Lycia graphical clients will not be able to manipulate them.

By default, editor type will be determined in runtime according to the type of the first manipulated BlobViewer content. You can set the value of the editor property so that to tell LyciaDesktop and LyciaWeb what type of editor should be used to manipulate it. To get more information, please, refer to the editor property page.

In LyciaDesktop, the BlobViewer content can be edited.

After you left-click the Edit button, the file displayed by the BlobViewer will be opened in the corresponding editor:

LyciaDesktop will allow editing BlobViewer content in the editor associated with this file type (content type) in your system. If you want a file to be opened in the definite editor, you have to make it the default one.

Windows Photo Viewer is the default program for opening image files:

Paint is the default program for opening image files:

If the file displayed by the BlobViewer cannot be edited, the Edit button will be hidden:

For the BlobViewer content to be properly displayed, you must either specify its type with the file extension or set the value of the Editor property.

Return to top

Blob Images and Aspect Ratio

By default, your blob image will keep aspect ratio at the window resizing. To override that behaviour, add image-ignore-aspect-ratio as the classNames parameter in the BlobViewer widget properties in the form.

Please see the examples of images behaviour at window resizing with aspect ratio preserved (upper figure) and aspect ratio ignored (lower figure):

Return to top

CSV Editor in BlobViewer

The BlobViewer widget has an Editor that can display CSV files. You can use a separate form for the CSV spreadsheet, or integrate the spreadsheet with an existing form.

With this Editor, you can:

Edit the spreadsheet data, save changes, and send them to the server
Toggle on the spreadsheet header if it has been specified in the first row of the spreadsheet;
Resize the columns;
Move the columns using drag-and-drop;
Sort the data in the column;
Resize the window by dragging a window corner (in case the contents of the form obtain a bigger space than the form window size is, the BlobViewer will add appropriate ScrollBars);
Download the spreadsheet;
Print the spreadsheet (it gets converted into PDF format);
Upload another spreadsheet;
Open the spreadsheet in the fullscreen mode.

Note: The Editor recognizes the following delimiters: tab, comma, pipe (|), semicolon, record_sep (ASCII30), unit_sep (ASCII31).

Return to top

Invoking the CSV Editor

Prerequisites: Before doing the steps described below, prepare the following:

a .csv spreadsheet
a blank .fm2 form file
a blank .4gl file with a MAIN block

Step 1. Within the MAIN block of your .4gl file, define a variable with the TEXT data type:

DEFINE bl2 TEXT

Note: A value name bl2 in this example was chosen to follow a default BlobViewer widget naming for convenience.

Step 2. Assign a window to open with your form:

OPEN WINDOW w1 AT 1,1 WITH FORM "9056_spreadsheet01"

Step 3. Use the LOCATE clause to make bl2 store the spreadsheet data:

LOCATE bl2 IN FILE "9056_spreadsheet01.csv"

Step 4. Add an INPUT BY NAME clause followed by the WITHOUT DEFAULTS clause to reference and display the spreadsheet data:

INPUT BY NAME bl2 WITHOUT DEFAULTS

Step 5. Add a call for the fgl_getkey() function:

CALL fgl_getkey()

Next, you must adjust your form layout to display the CSV data. To do that, open your .fm2 form file in VS Code's Editor, and fill it in with the following code:

<?xml version="1.0" encoding="UTF-8"?>

<form.rootContainer>

<GridPanel.gridRowDefinitions>

</GridPanel.gridRowDefinitions>

<GridPanel.gridColumnDefinitions>

</GridPanel.gridColumnDefinitions>

</GridPanel>

</form.rootContainer>

<form.screenRecords>

</form.screenRecords>

</form>

If you open the Form Builder after that and select the BlobViewer widget in the Design Area or in the Form Structure, in the Properties view you should see the following:

Attention: The CSV Editor in Form Builder relies on the first row of the spreadsheet to define the number of columns to parse data into. Edit the first row of the spreadsheet if it doesn’t have enough columns.

Return to top

CSV Editor Options

The options are located in the lower-left corner of the CSV Editor. Those are the following:

1. Download: By pressing this button, you will invoke the file downloading dialog.

2. Print: This button triggers the CSV file printing dialog:

After you configure the parameters you need and click Print, the Viewer will convert the CSV file into the PDF file, and invoke a printing dialog.

3. CSV Parser Setting: This button offers different options for the spreadsheet display:

Note: The changes will take effect dynamically after you select an option.

The settings for you to configure are:

Header: This setting controls displaying the first row of spreadsheet values as a header. If you set this to Yes, the values from the first row of the spreadsheet will be rendered as headers:

If you set this to No, the columns will be assigned with nominal column identifiers (numbers starting from 0):

This is useful when there is no header row in the spreadsheet.

Delimiter: Controls the parsing of the data into columns. The delimiters that Editor accepts are: Comma (,), Tab (\t), Pipe (|), Semicolon (;) , record_sep (ASCII30), and unit_sep (ASCII31).
New Line Character: Auto-Detect, Line Feed (\n), Carriage Return (\r), Carriage Return + Line Feed (\r\n).
Quote Character: Specify the quote character if you need the CSV Editor to remove it from the file display.
Encoding: Specify the encoding of your CSV file. The default is UTF-8.
Skip Empty Lines: Set this to Yes to remove empty lines from the file display in CSV Editor.
Skip First N Lines: In case your CSV file has several lines of data that have to be omitted in the CSV Editor view, type in the amount of those lines to skip them.

Click DONE after configuring the CSV spreadsheet display to exit the configuration dialog.

4. Upload: Using this button, you can upload another CSV file’s contents into the current view and to the server. Mind that this new data will replace the contents of the initially opened file, so at the next program run the BlobViewer’s CSV Editor will display the latest data.

5. Edit: Clicking this button invokes the editing mode so you can edit separate values in the spreadsheet. To edit a value, click Edit, double-click the value you need to edit, and input the new value. Double-click another cell to edit that cell. After all the editing is done, return to the CSV Parser Settings pane in the lower-left corner of the Editor, and select the Done button:

6. Full Screen: Invokes the fullscreen display (if the program is run as a web application, the spreadsheet will occupy the whole tab space).

Return to top