Allow members to create private lists from existing database?

Ask the community
, ,
3

Ok you mention a row-select-functionality, but i do not see that you use it!

So how to generate your wished function?

Your SETUP would/should be:

  1. 1xDatabase → Here you store your ITEMS/VALUES!
  2. 1xDataset —> connected to your DB & to your TABLE!
  3. 1x TABLE → this element is used to get the right data by —> CLICK!

Function:

  1. click on a ROW of the TABLE!
  2. getting DATA of the wished ROW out of the connected DB by a DATASET.
  3. The same way it also could be a REPEPERATER instead of a TABLE.
  4. Or you use the REPEATER as RESULT-OUTPUT, also possible!

EXAMPLE: (yes i have already a running example) :grin: take a look here…

https://russian-dima.wixsite.com/login-system/vnloginmgm

  1. Login by using one of the given predefined login-data.

989×53 4.71 KB

After you have logged in, you will be able to navigate to

  1. Navigate to BADGES…

452×712 70.1 KB

The Badge-Management-System will open…

1013×970 183 KB

  1. Click on → "Show Badge-Overview —> Badge-Overview will appear…

839×392 66.7 KB

Ok! Here we are! You have a table in front of you including some Badges generated by the BADGE-GENERATOR! But what does it has to do with your project?

  1. Click on one of the rows inside TABLE and take a look onto CONSOLE! You will find something like this one…

Do you already recognize similarity?

Now take a look onto the running CODE…

//--------------------------------------------------------------------------------
    $w('#table1').onRowSelect(async(event)=>{rowData=undefined;
        $w('#imgLoadingMembership, #grpMiniInfo').show('fade', {duration:350});
        let rowIndex = event.rowIndex; console.log("Row-Index: ", rowIndex); 
        let msbID = Number($w('#msbBadge').currentState.id); console.log("Current-State: ", msbID);
        rowData = event.rowData; console.log("Row-Data: ", rowData);
        badgeID = rowData.roleId; $w('#input0').value = badgeID;
        $w('#btnDeleteBadge, #btnEditBadge, #btnMembership').enable();  
        $w('#imgBadgeIcon'+msbID).show();
        $w('#imgPreview, #imgBadgeIcon'+msbID).src = rowData.icon.uri;
        $w('#boxBadgeColorWix, #boxBadgeEmblem'+msbID+', #boxBadgeIcon'+msbID).style.backgroundColor = rowData.backgroundColor;
        $w('#txtBadgeTitle, #txtBadgeTitle'+msbID).html=`<b><p style="color:${rowData.textColor};text-align:center; font-size:20px">${rowData.title}</p></b>`;
        //---------------------------------------
        generate_BadgeMemberlist(badgeID).then(async(memberlist)=>{console.log("Members: ", memberlist);
            $w('#txtMiniInfo').text = "loading data . . ."
            let memberListLength = await memberlist.badgeMembers.length;        console.log("Memberlist-Length: ", memberListLength);
            $w('#txtMemberships').text = String(memberListLength);
            $w('#imgLoadingMembership, #grpMiniInfo').hide('fade', {duration:350});
        });     
    });

Ok, surely not the best example → so let’s break the code down in pieces and inspect it a little bit…

$w.onReady(()=>{
	$w('#table1').onRowSelect((event)=>{console.log("EVENT: ", event);
		let rowIndex = event.rowIndex; console.log("Row-Index: ", rowIndex);
		let rowData = event.rowData; console.log("Row-Data: ", rowData); 
	});
});

With this 6-simple code-lines, you should be able to make your own project running!
Take a look onto CONSOLE and inspect the OUTPUT !
Do not forget to connect your TABLE with your wished DATABASE by a DATASET!
Paste the provided code onto your page and do some testings, while monitoring the OUTPUTS in CONSOLE!