Struct array as a Web Property

From DataFlex Wiki
Revision as of 13:26, 25 July 2023 by Wil (talk | contribs) (Created page with "Complex web properties, such as structs and/or arrays, have been supported since DataFlex 18.1. The documentation on this however is extremely thin. It doesn't exist at the time of writing this, so you are left on your own on how-to figure out how that works. The usage of a struct requires that you serialize/deserialize the data against a matching javascript object, just like when you pass a parameter. Perhaps there's a better way, but I am not aware of that. What fo...")
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigationJump to search

Complex web properties, such as structs and/or arrays, have been supported since DataFlex 18.1.

The documentation on this however is extremely thin. It doesn't exist at the time of writing this, so you are left on your own on how-to figure out how that works.

The usage of a struct requires that you serialize/deserialize the data against a matching javascript object, just like when you pass a parameter. Perhaps there's a better way, but I am not aware of that.

What follows is a simple code example taken from the syncfusion library, to give you an idea on how this works.

On the DataFlex side:


Struct tCarouselItem
  String sImage
  String sAltText
  String sCaption
End_Struct


... snip ....

    
    Procedure Construct_Object
        Forward Send Construct_Object
        
        { WebProperty=Client }
        Property tCarouselItem[]  pCarouselItems

... snip ....

    //
    Procedure LoadImages
        tCarouselItem   CarouselItem
        tCarouselItem[] CarouselItems
        ... some code filling the array and putting that in array variable CarouselItems
        Send LoadData sData
        WebSet pCarouselItems to CarouselItems
    End_Procedure

So we can use a WebSet to transfer the data, just like with other properties.

On the javascript side:

//
// carousel data.
//
tActionCarouselItemFormat = {
        image : df.tString,
        altText : df.tString,
        caption : df.tString
    };

..snip...

sf.WebCarousel = function WebCarousel(sName, oParent) {
    // Forward send constructor
    sf.WebCarousel.base.constructor.call(this, sName, oParent);

    // Properties:
... snip ....
    this.prop(df.tString,"psSyncfusionLicense", "");
    this.prop(df.tAdv,"pCarouselItems", "");
..snip ...

   
    carouselItemsChanged : function() {
        let carousel=this._osfWebCarousel;
        let tData=null;
        let tItems=null;
        if(carousel){
            tData = this.pCarouselItems;
            tItems = df.sys.vt.deserialize(tData, [tActionCarouselItemFormat] );

On the javascript end after getting the advanced client property into a variable, you only have to deserialize it to get at the data.