Acteur Liste de reflets : commande

[Beetix]

Bonjour,

Est-il possible de commander les reflets depuis une liste (comme avec l'acteur Détail de reflet) ?

[WITNicolas]

Bonjour,
Il faudrait utiliser la Liste de Reflet et l'associer à l'acteur Detail de Reflet.
Dans la liaison, il faudra choisir dans INFORMATIONS / Reflet Selectionné:Chemin.

[Beetix]

Bonne nouvelle !
Effectivement, pour l'instant on utilise une liste statique de détails de reflets mais le chargement de la page est long.

[manufitoussiwit]

Pour vous inspirez voila un composite qui affiche la liste des reflets. On peut choisir un ensemble. Il marchera normalement de manière optimisée une fois que le Runtime sera compatible.

SYNAPPS-STUDIO-COMPOSITE|{"config":{"key":"reflect-list","name":"Liste de Reflets","properties":{"overflowY":"auto"},"additionalDefs":{"ensemble":{"type":"wos-path","label":"Ensemble","value":"","relativeToPath":":easy.Set"},"isVertical":{"type":"boolean","label":"Alignement vertical ?","value":true},"separatorColor":{"type":"color","label":"Couleur séparateur","value":"rgba(126, 126, 126, 1)"},"allowCommand":{"type":"boolean","label":"Commandable?","value":true},"withIcon":{"type":"boolean","label":"Avec icone?","value":true},"minimalHeight":{"type":"size","label":"Hauteur minimale","value":"auto","neutral":"auto"},"submitMode":{"type":"select","label":"Mode de validation","value":"action","options":"[\n  {\n    \"value\": \"action\",\n    \"text\": \"Boutons\"\n  },\n  {\n    \"value\": \"auto\",\n    \"text\": \"Auto\"\n  },\n  {\n    \"value\": \"manual\",\n    \"text\": \"Manuel\"\n  }\n]"},"refreshDelay":{"type":"number","label":"Délai de raffraichissement","value":30,"min":1,"unit":"s"},"autoRefresh":{"type":"boolean","label":"Rafraichissement automatique","value":true}}},"leadActor":{"type":"layout/stack","key":"stack1","properties":{"verticalAlignment":"expand","overflowX":"visible","overflowY":"visible"},"children":[{"type":"redy/data-source/reflect-requester","key":"requester","bindings":{"properties.autoRefreshDelay":"stage@properties.refreshDelay","properties.autoRefresh":"stage@properties.autoRefresh"}},{"type":"layout/stack","key":"root","additionalDefs":{"collection":{"type":"text","modifier":"render","label":"Ensemble"},"submitMode":{"type":"select","label":"Mode de validation","options":"[\n  {\n    \"value\": \"action\",\n    \"text\": \"Boutons\"\n  },\n  {\n    \"value\": \"auto\",\n    \"text\": \"Auto\"\n  }\n]"},"requesterKey":{"type":"actor","filterTypes":"redy/data-source/reflect-requester"}},"properties":{"verticalAlignment":"expand","overflowY":"visible","overflowX":"visible"},"additionals":{"requesterKey":"requester"},"bindings":{"additionals.collection":"stage@properties.ensemble","additionals.submitMode":"stage@properties.submitMode"},"events":{"onPostInit":["this._renderList = async () => {","  try {","    const collection = this.additionals.collection || undefined;","    await this.clearActors();","    const { reflects, count } = await this.dataStores.redy.searchReflects({ collection, take: 2000 });","    const setups = reflects.map((r, i) => ({","      type: 'redy/reflect-details',","      key: `${this.key}-details-${i + 1}`,","      properties: {","        requesterKey: this.additionals.requesterKey,","        isAutonomous: false,","        reflectPath: r.path,","        marginBottom: '0.5em',","        paddingTop: '0.5em',","        paddingBottom: '0.5em',","        paddingRight: '0.5em',","        paddingLeft: '0.5em',","        borderStyle: 'solid',","        borderWidth: '0 0 1px 0',","        submitMode: this.additionals.submitMode,","      },","      bindings: {","        \"properties.borderColor\": {","          sourceType: 'stage',","          path: 'properties.separatorColor',","        },","        \"properties.isVertical\": {","          sourceType: 'stage',","          path: 'properties.isVertical',","        },","        \"properties.allowCommand\": {","          sourceType: 'stage',","          path: 'properties.allowCommand',","        },","        \"properties.withIcon\": {","          sourceType: 'stage',","          path: 'properties.withIcon',","        },","        \"properties.minHeight\": {","          sourceType: 'stage',","          path: \"properties.minimalHeight\",","        },","        \"properties.backgroundColor\": {","          sourceType: 'relative',","          sourcePath: 'self',","          path: \"canSubmit\",","        },","      },","      events: {","        \"properties/backgroundColor/binding/onReadTransform\": ({ value }) => {","          return value ? 'red' : 'transparent';","        }","      }","    }));","    await this.addActors(setups);","    // await context.getActor('reflect-requester1').startOrRequest();","  } catch (e) {","    console.error(e);","  }","","}","","this._renderList(this.additionals.collection);"],"onPropertyChanged":["if (!this._renderList) return;","if (","  context.propertyPath === 'additionals.requesterKey'","  || context.propertyPath === 'additionals.collection'","  || context.propertyPath === 'additionals.submitMode'",") {","  this._renderList();","}"]}}]}}```

[Beetix]

Merci !
Je viens de tester le composite. Un bémol, quand la liste est trop longue le défilement vertical ne fonctionne pas de mon côté. J'ai essayé de modifier les propriétés de défilement à plusieurs niveaux mais en vain.

[manufitoussiwit]

Salut! je l'ai légèrement changé pour que le défilement soit reglable sur le composite. Par défaut, c'est en auto verticalement.

SYNAPPS-STUDIO-COMPOSITE|{"config":{"key":"reflect-list","name":"Liste de Reflets","properties":{"overflowY":"auto"},"additionalDefs":{"ensemble":{"type":"wos-path","label":"Ensemble","value":"","relativeToPath":":easy.Set"},"isVertical":{"type":"boolean","label":"Alignement vertical ?","value":true},"separatorColor":{"type":"color","label":"Couleur séparateur","value":"rgba(126, 126, 126, 1)"},"allowCommand":{"type":"boolean","label":"Commandable?","value":true},"withIcon":{"type":"boolean","label":"Avec icone?","value":true},"minimalHeight":{"type":"size","label":"Hauteur minimale","value":"auto","neutral":"auto"},"submitMode":{"type":"select","label":"Mode de validation","value":"action","options":"[\n  {\n    \"value\": \"action\",\n    \"text\": \"Boutons\"\n  },\n  {\n    \"value\": \"auto\",\n    \"text\": \"Auto\"\n  },\n  {\n    \"value\": \"manual\",\n    \"text\": \"Manuel\"\n  }\n]"},"refreshDelay":{"type":"number","label":"Délai de raffraichissement","value":30,"min":1,"unit":"s"},"autoRefresh":{"type":"boolean","label":"Rafraichissement automatique","value":true}}},"leadActor":{"type":"layout/stack","key":"stack1","properties":{"verticalAlignment":"expand","overflowX":"visible","overflowY":"visible"},"children":[{"type":"redy/data-source/reflect-requester","key":"requester","bindings":{"properties.autoRefreshDelay":"stage@properties.refreshDelay","properties.autoRefresh":"stage@properties.autoRefresh"}},{"type":"layout/stack","key":"root","additionalDefs":{"collection":{"type":"text","modifier":"render","label":"Ensemble"},"submitMode":{"type":"select","label":"Mode de validation","options":"[\n  {\n    \"value\": \"action\",\n    \"text\": \"Boutons\"\n  },\n  {\n    \"value\": \"auto\",\n    \"text\": \"Auto\"\n  }\n]"},"requesterKey":{"type":"actor","filterTypes":"redy/data-source/reflect-requester"}},"properties":{"verticalAlignment":"expand","overflowY":"visible","overflowX":"visible"},"additionals":{"requesterKey":"requester"},"bindings":{"additionals.collection":"stage@properties.ensemble","additionals.submitMode":"stage@properties.submitMode"},"events":{"onPostInit":["this._renderList = async () => {","  try {","    const collection = this.additionals.collection || undefined;","    await this.clearActors();","    const { reflects, count } = await this.dataStores.redy.searchReflects({ collection, take: 2000 });","    const setups = reflects.map((r, i) => ({","      type: 'redy/reflect-details',","      key: `${this.key}-details-${i + 1}`,","      properties: {","        requesterKey: this.additionals.requesterKey,","        isAutonomous: false,","        reflectPath: r.path,","        marginBottom: '0.5em',","        paddingTop: '0.5em',","        paddingBottom: '0.5em',","        paddingRight: '0.5em',","        paddingLeft: '0.5em',","        borderStyle: 'solid',","        borderWidth: '0 0 1px 0',","        submitMode: this.additionals.submitMode,","      },","      bindings: {","        \"properties.borderColor\": {","          sourceType: 'stage',","          path: 'properties.separatorColor',","        },","        \"properties.isVertical\": {","          sourceType: 'stage',","          path: 'properties.isVertical',","        },","        \"properties.allowCommand\": {","          sourceType: 'stage',","          path: 'properties.allowCommand',","        },","        \"properties.withIcon\": {","          sourceType: 'stage',","          path: 'properties.withIcon',","        },","        \"properties.minHeight\": {","          sourceType: 'stage',","          path: \"properties.minimalHeight\",","        },","        \"properties.backgroundColor\": {","          sourceType: 'relative',","          sourcePath: 'self',","          path: \"canSubmit\",","        },","      },","      events: {","        \"properties/backgroundColor/binding/onReadTransform\": ({ value }) => {","          return value ? 'red' : 'transparent';","        }","      }","    }));","    await this.addActors(setups);","    // await context.getActor('reflect-requester1').startOrRequest();","  } catch (e) {","    console.error(e);","  }","","}","","this._renderList(this.additionals.collection);"],"onPropertyChanged":["if (!this._renderList) return;","if (","  context.propertyPath === 'additionals.requesterKey'","  || context.propertyPath === 'additionals.collection'","  || context.propertyPath === 'additionals.submitMode'",") {","  this._renderList();","}"]}}]}}

[Beetix]

Effectivement avec hauteur en auto il dépasse de l'écran et n'affiche pas l’ascenseur. Merci