Power FX: Dynamically access an object property with a variable

I’m kind of new with Power Apps, and it’s been very difficult to find how to access an object property using a variable.

In a nutshell, here are to access it:

With(
  { tempData: ParseJSON(JSON(ThisItem, JSONFormat.IgnoreBinaryData & JSONFormat.IgnoreUnsupportedTypes)) },
  Concat(
    ForAll(
      ColumnArray As ColumnName,
      ColumnName.Value & "=>" & Column( tempData, ColumnName.Value ) & "<br>"
    ),
    Value
  )
)

I’m transforming my record ThisItem to an UntypedObject to make it work with Column(), using JSON and by removing the problematic properties (thanks to JSONFormat.IgnoreBinaryData & JSONFormat.IgnoreUnsupportedTypes).

Then I iterate my array (a.k.a ColumnArray) that contains the property I need, and I use Column( tempData, ColumnName.Value ) to extract the column from the record!

My use case: I defined a collection with a list of columns, then I have a Gallery in which I have an HTMLText component that must display the columns from ThisItem based on the collection I defined before.

So, in App screen, I defined my collection like that:

ClearCollect(ColumnArray,["ID", "Title", "Description", "Target_x0020_Start_x0020_Date", "AssignedTo"]);
ClearCollect(UserColumns, ["AssignedTo"]);

Then in my Gallery, I have an HTMLText object with the below content:

"<div style='display:grid;grid-template-columns: 100px 50px 1fr 1fr 100px 150px;gap: 0px;height:65px;max-height:65px;overflo:hidden'><div style='"&cssTdStyle&";display:flex;justify-content:center;'><button type='button'>Edit</button></div>" &
With(
  { tempData: ParseJSON(JSON(ThisItem, JSONFormat.IgnoreBinaryData & JSONFormat.IgnoreUnsupportedTypes)) },
  Concat(
    ForAll(
      ColumnArray As ColumnName,
      "<div style='"&cssTdStyle&"'>" &
  If(
    ColumnName.Value in UserColumns,
    Column( tempData, ColumnName.Value ).DisplayName,
    Column( tempData, ColumnName.Value )
  )
  & "</div>"
    ),
    Value
  )
)
& "</div>"

This way I can make my display dynamic, based on a list of columns (that can be populated using a Power Automate Flow). I’ll have to identify which columns are User type, or similar ones, in order to access to the next property (like .DisplayName).

Quoi voir à Singapour ?

Voici quelques recommandations de visites à Singapour :

  • Clarke Quay : placé au bord d’un canal, vous y trouverez plein de restaurants et bars, une sorte de food court avec de petits bâtiments colorés et qui est très animé, surtout le soir. Depuis ce port, il est possible de prendre un bateau qui vous emmènera sur une petite croisière jusqu’au Marina Bay Sands – il est recommandé de faire cette croisière en début de soirée afin de pouvoir assister au spectacle des fontaines (voir horaires sur le lien) de l’hôtel emblématique de Singapour. – prévoir environ 2 heures sur place (selon si vous mangez ou si vous faites la croisière)
  • Symbole de la ville, le Merlion est une grande fontaine représentant une créature mi-lion mi-sirène. Par ailleurs vous aurez un beau point de vue sur l’hôtel-bâteau Marina Bay Sands. – prévoir environ 15 minutes sur place (il peut être intéressant de marcher depuis Clarke Quay jusqu’à Merlion puis de continuer jusqu’à l’intérieur du Marina Bay Sands)
  • L’emblématique Gardens by the Bay, avec ses super-arbres, est un lieu à ne pas manquer. Vous pouvez vous promener gratuitement dans les grands jardins et aux pieds des super-arbres, par contre il faudra acheter des tickets (en vente également sur place) pour visiter le Flower Dome (un grand dôme dans lequel on trouve beaucoup d’espèces de plantes – pas très intéressant) et le Cloud Forest (un grand dôme avec une forêt équatoriale et des passerelles en hauteur – très sympa à faire), ainsi que pour monter en haut des super-arbres. – prévoir environ 3h sur place
  • À ne pas louper, il y a le Buddha Tooth Relic Temple qui est un très beau temple bouddhiste, qui s’illumine la nuit. L’entrée est gratuite pour le visiter. De là vous avez le Maxwell Food Centre avec un grand choix de nourriture locale, ainsi que le très coloré temple hindou Sri Mariamman Temple. Bien sûr, Chinatown s’étend tout autour avec de quoi faire quelques emplettes ! – les temples se visitent en une quinzaine de minutes, pour le reste, tout dépend à quel point vous souhaitez flâner
  • Si vous avez du temps, allez voir le peu connu Science Center Singapore qui regorge de très nombreuses expériences scientifiques et ludiques qui raviront petits et grands (palais des miroir, jeux vidéos, illusions d’optique, le Fire Tornado, etc.). – prévoir au moins 3 heures, selon si vous êtes curieux, avez des enfants, et comprenez bien l’anglais
  • Avant de repartir, pensez à arriver très tôt à l’aéroport afin de pouvoir profiter de l’incroyable centre commercial Jewel Changi qui jouxte les terminaux, avec son dôme, sa forêt tropical et sa chute d’eau complètement dingue ! Des boutiques par dizaines et même le dernier étage avec ses activités (payantes) pour occuper vos dernières heures. C’est clairement à voir pour vivre un moment inoubliable face à ces milliers de litres d’eau qui tombent du ciel, tandis que le monorail traverse le dôme… – prévoir au moins 1 heure pour admirer les beautés du lieu et explorer les différentes boutiques

Recevoir des alertes lors de la diffusion d’un programme

Trop souvent je loupe des émissions TV que j’aime bien (comme “Qui veut être mon associé ?”, “Rendez-vous en terre inconnue”, …). J’ai cherché un service sur le Net qui me permettrait de recevoir un email lorsque mon émission préférée était diffusée, mais je n’ai rien trouvé.

J’ai donc créé https://alerte-tv.kodono.info/ qui permet d’être tenu au courant lorsqu’un programme est diffusé à la télévision française.

Utiliser un VPN sur l’iPad via un serveur Debian

Je vais expliquer ici comment installer un serveur VPN WireGuard sur Debian et l’utiliser depuis un iPad.

1. Serveur Debian

Sur le serveur, on installe WireGuard avec apt install wireguard -y.

2. Générer la clé privée et publique du serveur

Pour cela, on va faire :

1
2
sudo wg genkey | sudo tee /etc/wireguard/server_private.key
sudo cat /etc/wireguard/server_private.key | sudo wg pubkey | sudo tee /etc/wireguard/server_public.key

On retrouvera nos clés dans les fichiers /etc/wireguard/server_private.key et /etc/wireguard/server_public.key

3. Générer la clé privée et publique du client

Sur le serveur Debian, on va générer des clés pour le client :

1
2
wg genkey | tee client_private.key
cat client_private.key | wg pubkey | tee client_public.key

On retrouvera nos clés dans les fichiers ./client_private.key et ./client_public.key

4. Configuration du serveur

On va entrer la configuration suivante dans le fichier /etc/wireguard/wg0.conf :

[Interface]
Address = 10.0.0.1/24
PostUp = iptables -t nat -A POSTROUTING -o eth0 -j MASQUERADE
PostDown = iptables -t nat -D POSTROUTING -o eth0 -j MASQUERADE
ListenPort = 51820
PrivateKey = PRIVATE_KEY_DU_SERVEUR

[Peer]
PublicKey = PUBLIC_KEY_DU_CLIENT
AllowedIPs = 10.0.0.2/32
PersistentKeepalive = 25

5. Activer le transfert IP sur le serveur

Éditer le fichier /etc/sysctl.conf afin d’avoir :

net.ipv4.ip_forward=1
net.ipv6.conf.all.forwarding=1

Et on applique les changements avec la commande sudo sysctl -p

6. Démarrage de WireGuard

Pour démarrer le serveur VPN on tape sudo systemctl start wg-quick@wg0

On peut voir le statut avec la commande sudo systemctl status wg-quick@wg0

7. Configuration du client

Sur notre client (ici un iPad), on installe l’application WireGuard depuis le App Store.

Ensuite, sur notre serveur, on va créer le fichier de configuration client.conf qui sera utilisé par le client, avec le contenu suivant :

[Interface]
PrivateKey = PRIVATE_KEY_DU_CLIENT
Address = 10.0.0.2/32
DNS = 8.8.8.8, 8.8.4.4 # on utilise les DNS de Google

[Peer]
PublicKey = PUBLIC_KEY_DU_SERVEUR
Endpoint = mon_serveur.debian.home:51820 # on indique l'IP/hostname de notre serveur VPN
AllowedIPs = 0.0.0.0/0, ::/0
PersistentKeepalive = 25

Afin de transmettre cette configuration à l’iPad, on peut générer un QR code. Pour cela on installe ce qu’il faut : sudo apt install qrencode, puis on génère avec qrencode -t ansiutf8 < client.conf

Sur l'iPad, on ouvre l'application WireGuard puis on ajoute un client en utilisant le QR Code généré.

8. Vérification

En activant le VPN sur l'iPad, on peut tester si tout fonctionne comme prévu en vérifiant l'adresse IP de l'iPad.
Sur le serveur, on peut utiliser la commande wg show pour voir un peu ce qu'il se passe.

Remove lazy loading for a custom SPFx webpart

SharePoint Online is doing lazy loading when we hit a page with webparts. If you created a SPFx webpart, and if it’s not visible right after the page load, then it will only be loaded once the user scrolls to it…

To remove this behavior, and load the webpart as soon as possible, you must declare your webpart as a dynamic data source.

Here is the minimal code example (in pure JS, not in TS):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
import { DisplayMode } from '@microsoft/sp-core-library';
 
export default class HtmlViewerWebPart extends BaseClientSideWebPart {
  constructor() {
    super();
    // the below is used by the dynamic data source to avoid lazy loading
    this._sourceId = 'my_webpart';
  }
 
  onInit() {
    // to avoid lazy loading of the webpart, we register it as a dynamic data source
    // we only need to do it during the Edit of the page
    if (this.isPageInEditMode() && this.context.dynamicDataSourceManager) {
      this.context.dynamicDataSourceManager.initializeSource(this);
      console.log('Dynamic Data Source initialized to avoid lazy loading.');
    }
     
    return Promise.resolve();
  }
 
  isPageInEditMode() {
    return this.displayMode === DisplayMode.Edit;
  }
 
  // we need to declare this method because it's used by the data source to avoid lazy loading
  getPropertyDefinitions() {
    return []
  }
 
  // we need to declare this method because it's used by the data source to avoid lazy loading
  getPropertyValue(propertyId) {
    return propertyId;
  }
}

Then, edit the page, which will trigger the dynamic data source registration, and publish it.

Determine an element `height` and `width` in CSS only and reuse it within another CSS rule

I found this technic on https://frontendmasters.com/blog/how-to-get-the-width-height-of-any-element-in-only-css/ – it only works on modern browsers (mainly Chrome and Edge)

Let’s define the properties:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
@property --_x {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --_y {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --w {
  syntax: "<integer>";
  inherits: true;
  initial-value: 0;
}
@property --h {
  syntax: "<integer>";
  inherits: true;
  initial-value: 0;
}

Then, let’s find an element that is a common parent for both the element where we’ll calculate the height/width, and the element that will use this height/width, and we apply some CSS:

1
2
3
4
5
6
7
8
.parent {
  timeline-scope: --cx,--cy;
  --w:calc(1/(1 - var(--_x)));
  --h:calc(1/(1 - var(--_y)));
  animation: x linear,y linear;
  animation-timeline: --cx,--cy !important;
  animation-range: entry 100% exit 100%;
}

We finish up with some additional CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.get-dimension {
  overflow: hidden;
  position: relative;
}
.get-dimension:before {
  content:"";
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  aspect-ratio: 1;
  view-timeline: --cx inline,--cy block;
}
@keyframes x {to{--_x:1}}
@keyframes y {to{--_y:1}}

And finally, we can use --w and --h in the other element:

1
2
3
4
.apply-dimension {
  height: calc(var(--h)*1px);
  width: calc(var(--w)*1px);
}

Here is a demo:

How to remove an account / leave an organization in MS Teams?

If in the top right corner of MS Teams, when you click on your profile picture, you see other organizations/accounts and you want to delete them:

  1. Go to the MS Teams Settings by clicking on the three dots next to your profile picture
  2. Go to Accounts and orgs
  3. Turn off or leave the org/account that is problematic

Investir dans des actions en bourse

J’ai regardé la vidéo de Nas Daily : https://www.instagram.com/reel/DAlPq4IO_Jh/

Et voici ce que je retiens :

  • Préférer les entreprises qui sont là depuis longtemps, ou qu’on sait qu’elles vont être là pour encore 10 ans
  • Préférer les entreprises dont le dirigeant est aussi le fondateur, et que vous appréciez (des services que vous utilisez, des restaurants où vous allez, etc)
  • On peut regarder les entreprises du S&P 500 ou CAC 40 qui sont une bonne référence
  • Le “nombre magique” pour le PE Raio (Price/Earning Ratio) doit être entre 20 et 30
  • Les dividendes que reversent l’entreprise aux actionnaires
  • Il ne faut pas faire beaucoup de transactions, mais plutôt investir sur la longueur (plusieurs années)
  • Pour plus de simplicités, on peut aussi acheter “un groupe d’actions” dit “ETF” (sur l’application Sumeria on les trouve sous le nom de “Top 40 French Stocks” pour le CAC 40 et “Top 500 US Stocks” pour le S&P 500)

Faire des enregistrements récurrents avec OQEE

J’ai créé un service en ligne qui permet de simplifier les enregistrements avec OQEE : https://eeqo.kodono.info

Il vous faudra être connecté au réseau de votre Freebox afin d’être reconnu. Ensuite, l’interface est simple à utiliser et vous permet d’enregistrement plusieurs programmes à la suite d’un coup, et créer un enregistrement récurrent sur au moins les prochains 10 jours. Vous pouvez recevoir un email à la fin de la période pour réactiver l’enregistrement.