view/download icons missing when using ViewFileItem

[claudiobosticco]

Thanks for the quick reply.
I'm not sure I fully understand the suggestion regarding autoDraw, and I’m not seeing any WARN messages related to it.
Moreover, I’m observing the same behaviour in my application, where I’m already using isc.setAutoDraw(false).

[Isomorphic]

We'll check on the regression. Regarding it being called multiple times, it looks like your sample doesn't have autoDraw set up to avoid redraws, so that's expected (and is warned about in the SmartClient log).

[claudiobosticco]

SmartClient Version: v13.1p_2025-12-05/AllModules Development Only (built 2025-12-05)

Hi, I’ve just realized there’s a regression related to the test case from the first post - the modified #upload sample:

isc.DynamicForm.create({
    autoDraw: false,
    ID: "uploadForm", width: 300,
    dataSource: mediaLibrary,
    fields: [
        { name: "title", required: true },
        { name: "image", type: "imageFile", multiple:false, hint: "Maximum file size is 5 MiB" },
        { title: "Save", type: "button",
            click: function () {
                this.form.saveData("if(dsResponse.status>=0) uploadForm.editNewRecord()");
            }
        }
    ]
});

isc.DynamicForm.create({
    autoDraw: false,
    ID: "viewForm",
    dataSource: mediaLibrary,
    width: "100%",
    fields: [
        { name: "title", title: "Title", type: "text", width: "*" },
        { name: "image", title: "image", editorType: "ViewFileItem", showFileInline:false, canEdit:false,
            startRow: false, endRow: false
        }
    ]
});

isc.ListGrid.create({
    autoDraw: false,
    ID: "mediaListGrid",
    width: "100%",
    height: 224,
    autoFetchData: true,
    recordClick:"viewForm.editRecord(record)",
    dataSource: mediaLibrary
});

isc.VLayout.create({
    autoDraw: false,
    ID:"mainLayout",
    width:500,
    height:250,
    members:[viewForm, mediaListGrid]
});

isc.HStack.create({
    width:"100%",
    membersMargin: 10,
    members:[uploadForm, mainLayout]
});

With both showFileInline set to either true or false, and using either type="binary" or type="imageFile" for the image field, after uploading an image, when I click on the corresponding record in the grid, nothing is displayed in the image formItem (viewForm). I don’t see the image when showFileInline is true, nor the view/download icons when it’s false.

[claudiobosticco]

Hello, I actually noticed that the formatValue gets called 5 times for every formView.editSelectedData(listGrid). Is it normal?

Also, value and record in the formatValue don't contain the actual values.

[claudiobosticco]

SmartClient Version: v13.1p_2025-12-05/AllModules Development Only (built 2025-12-05)

I see it's working now, thank you very much!

[Isomorphic]

We just fixed this issue. Please try again with tomorrow’s builds (December 5).

Regards
Isomorphic Software

[claudiobosticco]

SmartClient Version: v13.1p_2025-12-03/AllModules Development Only (built 2025-12-03)

Hi, I think I've found another problem.
In a ViewFileItem I’m trying to customize the displayItem that shows the file name, but it doesn’t seem to work.

I modified the customBinaryField example by adding displayItemProperties, but the formatValue defined there is not being called:

isc.DynamicForm.create({
    ID: "formView",
    width: "100%",
    dataSource: customBinaryField,
    fields: [
           {name: "id", width: 150, canEdit:false},
        {name: "file", canEdit:false, editorType:"ViewFileItem",
             displayItemProperties: {
                 formatValue: function (value, record, form, item) {
                     return "foo";
                 }
             }
        }
    ]
});

isc.DynamicForm.create({
    ID: "formEdit",
    width: 100,
    dataSource: customBinaryField,
    fields: [
        {name: "id", width: 150, required: true},
        {name: "file", required: true}
    ]
});

isc.IButton.create({
    ID: "uploadButton",
    title: "Upload",
    width: 100,
    click: function(){
        formEdit.saveData("if(dsResponse.status>=0) formEdit.editNewRecord()");
    }
});

isc.VLayout.create({
    ID: "vLayoutForms",
    width: 100,
    members: [
        isc.Label.create({
            contents: "Editor",
            width: 50,
            height: 25,
            autoDraw: true,
            baseStyle: "exampleSeparator"
        }),
        formEdit,
        uploadButton,
        isc.Label.create({
            contents: "View",
            width: 50,
            height: 25,
            autoDraw: true,
            baseStyle: "exampleSeparator"
        }),
        formView
    ]
});

isc.ListGrid.create({
    ID: "listGrid",
    width:500, height:224,
    dataSource: customBinaryField,
    selectionType: "single",
    autoFetchData: true,
    fields:[
        {name:"id", width:100},
        {name:"file", width:380}
    ],
    recordClick: function(viewer, record, recordNum, field, fieldNum, value, rawValue) {
        formEdit.editSelectedData(listGrid);
        formView.editSelectedData(listGrid);
    }
});

isc.HLayout.create({
    ID: "hLayoutTop",
    width: 700,
    layoutMargin:10,
    membersMargin: 10,
    members:[listGrid, vLayoutForms]
});

isc.Button.create({
    ID: "buttonDownload",
    width:200,
    title: "Download Selected File",
    click: function () {
        var selectedRecord = listGrid.getSelectedRecord();
        if (selectedRecord == null) {
            isc.say("You must select one record");
            return;
        }
        customBinaryField.downloadFile(selectedRecord);
    }
});

isc.Button.create({
    ID: "buttonView",
    width:200,
    title: "View Selected File",
    click: function () {
        var selectedRecord = listGrid.getSelectedRecord();
        if (selectedRecord == null) {
            isc.say("You must select one record");
            return;
        }
        customBinaryField.viewFile(selectedRecord);
    }
});


isc.HLayout.create({
    ID: "hLayoutButtons",
    width: 500,
    layoutMargin: 10,
    membersMargin: 10,
    members: [buttonDownload, buttonView]
});

isc.VLayout.create({
    ID: "vLayout",
    width: 300,
    members: [hLayoutTop, hLayoutButtons]
});

[claudiobosticco]

SmartClient Version: v13.1p_2025-11-28/AllModules Development Only (built 2025-11-28)

OK. We were able to reproduce the issue and we have fixed it. Please try again with tomorrow’s builds (November 28).

I see it's fixed, thank you very much!

[claudiobosticco]

Thanks, I’ll try it as soon as it’s available.

I also noticed that in the docs for FileItem/ViewFileItem, in the displayCanvas/displayForm/displayItem properties, a "blob" field type is mentioned:

...and the field type is "blob"

However, I can’t find any documentation for a blob FieldType.

[Isomorphic]

OK. We were able to reproduce the issue and we have fixed it. Please try again with tomorrow’s builds (November 28).

Regards
Isomorphic Software

[claudiobosticco]

Hi, I wasn’t referring to the icons on the grid records, but to the icons on the ViewFileItem inside the viewForm (above the grid).

The documentation for ViewFileItem explicitly mentions them:

Displays one of two UIs, according to the value of showFileInline. If showFileInline is false, this Item displays the View and Download icons and the filename. Otherwise, it streams the image-file and displays it inline.

[Isomorphic]

We just tested your sample code from the showcase and both icons are present and functioning correctly. Tested with various skins from the Flat and Enterprise series.

For instance:
Tahoe:


Stratus:





Please retest and let us know if there is anything else in your code that was not included in your post.

Regards
Isomorphic Software

[claudiobosticco]

SmartClient Version: v13.1p_2025-11-25/AllModules Development Only (built 2025-11-25)

Hi, I’m trying to use ViewFileItem with the #upload example.
After uploading a file successfully, and selecting the record in the grid, I would expect to see the preview and download icons in the viewForm, but they don’t show up.
Here is the code I’m using:

<DataSource ID="mediaLibrary" serverType="sql" tableName="mediaLibrary">
    <fields>
        <field name="pk" type="sequence" hidden="true" primaryKey="true"/>
        <field name="title"/>
        <field name="image" type="binary" maxFileSize="5242880" required="true"/>
    </fields>
</DataSource>

isc.DynamicForm.create({
    autoDraw: false,
    ID: "uploadForm", width: 300,
    dataSource: mediaLibrary,
    fields: [
        { name: "title", required: true },
        { name: "image", type: "imageFile", multiple:false, hint: "Maximum file size is 5 MiB" },
        { title: "Save", type: "button",
            click: function () {
                this.form.saveData("if(dsResponse.status>=0) uploadForm.editNewRecord()");
            }
        }
    ]
});

isc.DynamicForm.create({
    autoDraw: false,
    ID: "viewForm",
    dataSource: mediaLibrary,
    width: "100%",
    fields: [
        { name: "title", title: "Title", type: "text", width: "*" },
        { name: "image", title: "image", editorType: "ViewFileItem", showFileInline:false,
            startRow: false, endRow: false
        }
    ]
});

isc.ListGrid.create({
    autoDraw: false,
    ID: "mediaListGrid",
    width: "100%",
    height: 224,
    autoFetchData: true,
    recordClick:"viewForm.editRecord(record)",
    dataSource: mediaLibrary
});

isc.VLayout.create({
    autoDraw: false,
    ID:"mainLayout",
    width:500,
    height:250,
    members:[viewForm, mediaListGrid]
});

isc.HStack.create({
    width:"100%",
    membersMargin: 10,
    members:[uploadForm, mainLayout]
});

Is there an issue or am I missing something?