Cómo resaltar con un borde el producto seleccionado en 'Add Collections to UI'

Existe forma de colocarle un borde a unos productos que me encuentro cargando en un Add collections to UI, osea pero que este borde solo marque la opcion o el producto que me encuentro seleccionando.

Si hay muchas maneras de hacerlo una más efectiva que otra.

Saludos, Andress Ortiz
QuickDev
Si deseas ayuda con tu app contactame.
WhatsApp: +593968643400

Lo que quiero saber es lo siguiente: ¿esto es una comunidad para ayudarnos entre todos o una página de soporte freelance de pago? Lo digo porque con frecuencia se comparten números de teléfono y, al final, intentan cobrar por el servicio. Cuando inicié aquí, fue gracias al excelente y muy útil curso que Yonathan subía con tanto esfuerzo. Esto era una comunidad, no un mercado.

Jonathan es el dueño de la plataforma; él recibe su sueldo (y obviamente las ganancias de Apphive). No es comparable con los usuarios que ofrecemos soporte extra: él ya cobra por la plataforma, nosotros solo cobramos cuando alguien quiere acompañamiento profesional.
Si no quieres pagarle a nadie, hay cientos de videos gratuitos que cubren lo básico, pero lo avanzado y pulido el desarrollo profesional es otra cosq. Si prefieres no buscar o no hacerlo tú mismo, toca invertir.

Ahora, la guía rápida para marcar con borde el producto seleccionado en un Add Collections to UI:

1. Variable para el ítem activo
Crea una variable de tipo app (global) llamada selectedItemId y déjala vacía al inicio.

2. Guarda el ID al tocar un producto
Dentro del contenedor del producto, en el evento On Click, agrega un Set app variable → selectedItemId = item.id (o la key que uses).

3. Condicional de estilo
En el Container Style del producto, donde defines el borde, usa:

Border width: 2
Border color:    if(item.id == selectedItemId) { #FF9800 } else { transparent }
Border radius:   8  (opcional, para esquinas redondeadas)

Así solo el ítem cuyo id coincida con selectedItemId se resaltará.

4. Refresco visual
Si el borde no cambia inmediatamente, añade un Update UI después de cambiar la variable, o asegúrate de que el contenedor se reconstruya (hay quienes usan un Refresh Repeat).

Con eso basta para tener la selección básica sin meterte a lógica compleja. ¿Quieres algo más pulido (animaciones, efecto sombra, persistencia en Firestore, etc.)? Ahí sí requiere más horas y pruebas… y para eso están los servicios pro. :wink:

Saludos, Andress Ortiz
GoQuickDev
Si deseas ayuda con tu app contactame.
WhatsApp: +593968643400

1 me gusta

Buenos días, @Jorge.
Ahora quedó un poco más claro y, de cierta forma, tienes razón. Disculpa por eso.
Por otro lado, implementé la solución que me compartiste y sí me funciona. Solo estoy un poco atorado en la parte de refrescar, para que el cambio en los bordes se aplique de inmediato.

Coloca toda esa función donde pusiste el Add collection UI en un appProcess así lo vuelves a llamar a cada momento generando un bucle colocándolo dentro del mismo cuando hacen el onClick hay varios tutoriales en Youtube referente a este.

Saludos, Andress Ortiz
GoQuickDev
Si deseas ayuda con tu app contactame.
WhatsApp: +593968643400

1 me gusta

¡Muchísimas gracias! Con estas opciones sí me funcionó.
Si alguien ve esto mas adelante y necesita una pequeña guía o video de cómo se hizo, solo avísenos. ¡Saludos!

1 me gusta