Swipes to Backendless UI elements

[Evgeniy_Volkov]

Hello,

I’m creating a mobile app for iPhone(IOS) with Backendless no-code UI functionality. And I would like to add swipes as events to my list of Cards in scrollable container. I was searching for it in Backendless documentation but failed to find anything. That seems to me a bit strange because swipes are often used in modern mobile apps.
Could you please advise if it’s possible to implement swipes with the existing Backendless UI functionality?
If not, I guess it’s possible to do it with Custom Code. I have some small coding experience but I can’t create it at once without support. I would very appreciate if anyone could share a short tutorial on how swipes could be implemented in Backendless.

Thank you!

[Dima (Dima Vak)]

Hello @Evgeniy_Volkov

Unfortunately we don’t provide such event out of the box, but you right, you could implement it with Custom Code.

Here is example of code

function handleStart(e) {
  console.log('touchstart', e)
}

function handleEnd(e) {
  console.log('touchend', e)
}

function handleCancel(e) {
  console.log('touchcancel', e)
}

function handleMove(e) {
  pageData.coordsString = `${e.touches[0].pageX} : ${e.touches[0].pageY}`
  console.log('touchmove', e)
}

function startup() {
  document.body.addEventListener('touchstart', handleStart);
  document.body.addEventListener('touchend', handleEnd);
  document.body.addEventListener('touchcancel', handleCancel);
  document.body.addEventListener('touchmove', handleMove);
}


startup()

And demo

Also you could read an documentation about this event here

Regards, Dima

[Evgeniy_Volkov]

Great, thank you for the solution!

[Nicolas_REMY]

Hi,

Also interested in setting up swipe capability for some blocks.
I couldn’t access the demo, it seems it’s not working.
Could you please clarify where the proposed code would have to be added ?

Thanks.

[Alex_Klein]

Demo not working, would love to see it

[Alex_Klein]

Also interested in setting up custom event listeners using JS.
But the demo linked above is not working… and could you please clarify where the proposed code would have to be added ? Thank you

[stanislaw.grin]

Hi @Alex_Klein,

here is a new demo: click to open.

and could you please clarify where the proposed code would have to be added ?

I have put it in the On Page Enter handler:

function handleStart(e) {
  console.log('touchstart', e)
  pageData.event = 'touch start'
}

function handleEnd(e) {
  console.log('touchend', e)
  pageData.event = 'touch end'
}

function handleCancel(e) {
  console.log('touchcancel', e)
  pageData.event = 'touch cancel'
}

function handleMove(e) {
  pageData.coordinates = `${e.touches[0].pageX} : ${e.touches[0].pageY}`
  pageData.event = 'touch move'
  console.log('touchmove', e)
}

function startup() {
  document.body.addEventListener('touchstart', handleStart);
  document.body.addEventListener('touchend', handleEnd);
  document.body.addEventListener('touchcancel', handleCancel);
  document.body.addEventListener('touchmove', handleMove);
}

startup()

The input value was bound to the coordinates variable from PageData, and the event label to the event variable of PageData.

Regards,
Stanislaw

[Nicolas_REMY]

Hi,

Is there any chance that we may see a swipeable repeater as a future UI component ?

I have tried to understand this reply, but unless I’m mistaken, the demo does not seem to produce anything.

In case you’re wondering what I’m looking for, it’s this kind of thing :

Thanks.

[Dima (Dima Vak)]

How about to use overflow: auto; for block that contain this items?

[Nicolas_REMY]

Hi @Dima ,

Thank you for your reply. Indeed, with overflow: auto; I manage to get something that looks like the capture above. But it does not behave like a swipeable component, in particular there is no snapping to a specific position.

I have tried the proposed code, but I don’t see what it adds to the overflow: auto; container.

[Dima (Dima Vak)]

In that case, I do not understand what you try to achieve. Could you share interactive examples in the video, or even better at some other site?