DecSoft Soporte - Buttons or links inside Report's rows

Buttons or links inside Report's rows

¡Eche un vistazo a algunas de preguntas más frecuentes sobre nosotros y nuestros productos!

¡Eche un vistazo a nuestro canal de YouTube y suscríbase para recibir notificaciones sobre nuevos vídeos!

DecSoft HTML Compiler incluye un conveniente Compilador por línea de comandos para compilar sus apps desde la consola.

DecSoft App Builder incluye un conveniente Compilador por línea de comandos para compilar sus apps desde la consola.

DecSoft HTML Compiler es fácil de usar: personalize su proyecto y compile sus apps y sus juegos rápidamente.

Ahorre tiempo, recursos y dinero creando apps para Android, iOS y más con la misma base de código.

DecSoft NeoPlugins pone sus proyectos de VisualNeo en otro nivel con +1.000 nuevas acciones para sus apps.

Los NeoPlugins de DecSoft tienen versiones "designtime" y "runtime" para reducir el tamaño de sus apps.

DecSoft App Builder integra un asistente de Open AI para ayudarle mientras desarrolla sus apps.

Ahorre dinero comprando nuestros paquetes de NeoPlugins. ¡Cinco, Diez e incluso nuestra colección entera a un precio increíble!

Cree modernas apps y juegos HTML a otro nivel haciendo cosas que incluso las modernas apps y juegos HTML no pueden.

Compile, convierta sus modernas apps y juegos HTML en programas ejecutables sin dependencias para Microsoft Windows.

Diseñe para pantallas pequeñas y distribuya también (sin cambios) en dispositivos como tablets.

Cree apps y expanda sus capacidades usando el lenguaje más popular del mundo: Javascript.

Los plugins oficiales de Apache Cordova se incluyen de serie y hay cientos de ellos disponibles para su uso.

Cree apps multiplataforma con DecSoft App Builder, incluyendo Android e iOS, con la misma base de código.

Peter Bradstreet

Hi, I would like to add functionality to a report object so that in each row there are a couple of icons/buttons that carry out an action. For example, in the Agenda sample, is it possible to add a delete icon to the right of the data in each row that would delete that row by calling DeleteRecordCallback? I am just using this as an example to see if I can detect the click event on the icon rather than just on the row itself. Cheers, Pete

Peter Bradstreet

Actually, I found just what I needed in the Report17 sample:

<a ng-click="$parent.DeleteRecord(Record.ID)"><span class="far fa-trash-alt fa-lg"style="color:Tomato"></span></a>

Cheers, Pete

DecSoft

Hello Peter,

Yes; of course, it's possible. Take a look at the below sample that uses a bit of Javascript code to handle our "row button" click event:

<?xml version="1.0" encoding="utf-8"?>
<AppBuilder Version="2019.45">
  <App>
    <ID>com.appbuilder</ID>
    <Name>New App 1</Name>
    <ShortName>New App 1</ShortName>
    <Version>1.0.0</Version>
    <Width>320</Width>
    <Height>480</Height>
    <Description>Another App Builder app</Description>
    <AuthorName>App Builder</AuthorName>
    <AuthorUrl>https://www.decsoftutils.com/</AuthorUrl>
    <AuthorEmail>info@decsoftutils.com</AuthorEmail>
    <Created>2019-08-28T15:51:30.833</Created>
    <Modified>2019-08-28T16:00:24.913</Modified>
    <Metadata />
    <Webapp />
    <ProWebApp />
    <WebExtension />
    <Cordova>
      <General />
      <Plugins />
      <Electron />
      <Android />
      <IOS />
      <Windows />
      <Phonegap />
      <Platforms />
      <Splash />
      <Config />
      <Paths />
    </Cordova>
  </App>
  <Views>
    <View>
      <Name>Master</Name>
      <IsMaster>1</IsMaster>
      <Controls />
    </View>
    <View>
      <Name>View1</Name>
      <ShowEvent>
        <![CDATA[
StartJS

  // Fill our Report's Data variable
  window.App.RootScope.Report1.Data = [
    {"name": "Peter"},
    {"name": "David"},
    {"name": "John"}
  ];

  // Prepare our report row button click handler
  $('body').on('click', '.report-row-button', function (event) {
    alert('You press the record with name: ' + $(this).data('name'));
  });

EndJS]]>
      </ShowEvent>
      <Controls>
        <Control Role="7001">
          <Name>Report1</Name>
          <Top>8</Top>
          <Left>8</Left>
          <Width>304</Width>
          <Height>432</Height>
          <Loading>Loading...</Loading>
          <Html>
            <![CDATA[
<td>

 [Record.name]

 <div class="float-end">
  <button class="btn btn-sm btn-primary report-row-button" data-name="[Record.name]">Press me!</button>
 </div>
<td>]]>
          </Html>
        </Control>
      </Controls>
    </View>
  </Views>
  <Functions />
  <Files>
    <Styles />
    <Scripts />
    <Folders />
    <Images />
    <Others />
  </Files>
  <Generator>
    <Name>App Builder</Name>
    <Version>2019.45 (8/21/2019)</Version>
    <Email>mailto:info@decsoftutils.com</Email>
    <Website>https://www.decsoftutils.com/</Website>
    <Copyright>©2019 App Builder by DecSoft</Copyright>
  </Generator>
</AppBuilder>

Another possible way is to use a "class" in our "row-button", and use the "RowClick" event of the Report control:

<?xml version="1.0" encoding="utf-8"?>
<AppBuilder Version="2019.45">
  <App>
    <ID>com.appbuilder</ID>
    <Name>New App 1</Name>
    <ShortName>New App 1</ShortName>
    <Version>1.0.0</Version>
    <Width>320</Width>
    <Height>480</Height>
    <Description>Another App Builder app</Description>
    <AuthorName>App Builder</AuthorName>
    <AuthorUrl>https://www.decsoftutils.com/</AuthorUrl>
    <AuthorEmail>info@decsoftutils.com</AuthorEmail>
    <Created>2019-08-28T15:51:30.833</Created>
    <Modified>2019-08-28T16:11:51.801</Modified>
    <Metadata />
    <Webapp />
    <ProWebApp />
    <WebExtension />
    <Cordova>
      <General />
      <Plugins />
      <Electron />
      <Android />
      <IOS />
      <Windows />
      <Phonegap />
      <Platforms />
      <Splash />
      <Config />
      <Paths />
    </Cordova>
  </App>
  <Views>
    <View>
      <Name>Master</Name>
      <IsMaster>1</IsMaster>
      <Controls />
    </View>
    <View>
      <Name>View1</Name>
      <ShowEvent>
        <![CDATA[
StartJS

  // Fill our Report's Data variable
  window.App.RootScope.Report1.Data = [
    {"name": "Peter"},
    {"name": "David"},
    {"name": "John"}
  ];

EndJS]]>
      </ShowEvent>
      <Controls>
        <Control Role="7001">
          <Name>Report1</Name>
          <Top>8</Top>
          <Left>8</Left>
          <Width>304</Width>
          <Height>432</Height>
          <Loading>Loading...</Loading>
          <Html>
            <![CDATA[
<td>

 [Record.name]

 <div class="float-end">
  <button class="btn btn-sm btn-primary row-button">Press me!</button>
 </div>
<td>]]>
          </Html>
          <RowClickEvent>
            <![CDATA[
StrSearch "[Report1.Event.target.className]" "row-button" "[Result]"
If "[Result]" "!=" "-1"
  Alert "" "You press the [Report1.Record.name] record!"
  Exit
EndIf
]]>
          </RowClickEvent>
        </Control>
      </Controls>
    </View>
  </Views>
  <Functions>
    <Function>
      <Name>rowButtonClick</Name>
      <Language>ABScript</Language>
      <Description></Description>
      <Arguments>
        <Argument>
          <Name>PressedRecord</Name>
          <Description>The pressed record</Description>
        </Argument>
      </Arguments>
      <Code>
        <![CDATA[
Alert "" "You pressed the record with the name: [PressedRecord.name]"]]>
      </Code>
    </Function>
  </Functions>
  <Files>
    <Styles />
    <Scripts />
    <Folders />
    <Images />
    <Others />
  </Files>
  <Generator>
    <Name>App Builder</Name>
    <Version>2019.45 (8/21/2019)</Version>
    <Email>mailto:info@decsoftutils.com</Email>
    <Website>https://www.decsoftutils.com/</Website>
    <Copyright>©2019 App Builder by DecSoft</Copyright>
  </Generator>
</AppBuilder>

Purchase one or more licenses of our products if they are useful to you!

Todo el mundo puede leer el foro de soporte de DecSoft para aprender del mismo, sin embargo, sólo los clientes de DecSoft pueden abrir nuevos hilos. Compre una o más licencias de productos de DecSoft y obtendrá este y otros beneficios.