Beispielfolie

Erstellt mit MARP

Links können hier hin!

Quellcode

ABAP

DATA chicken TYPE chickentype  .
DATA cow     TYPE cowtype      .
* DATA dog     TYPE dogtype      .
DATA bird    TYPE birdtype     .
    
my_method( IMPORTING "chicken =  chicken 
                     cow     =  cow      
                     bird    =  bird ).

BDL

define behavior for zi_comments //alias <alias_name>
persistent table zbc_comments
late numbering
lock dependent by _Task

SQL

select * from users
where name like 'P%'
  and not exists( select 'irgendwas' from dummy)

CDS

@AbapCatalog.sqlViewName: 'ZSQL_CLIENT'
//@AbapCatalog.compiler.compareFilter: true
@AbapCatalog.preserveKey: true
@AccessControl.authorizationCheck: #CHECK /* Test */
@EndUserText:{ label: 'Client independent source data',
               quickinfo: 'Test' }
define view zcds_client as select from snwd_so_i as soi
                    left outer join snwd_pd as pd 
                    on soi.product_guid = pd.node_key
{
   test /* Auskommentiert */ as InDerZeile,
    soi.parent_key  as so_id, 
    @UI.lineItem[{position: 10},
                 {position: 20, 
                  qualifier: 'Q' ,
                  type: #TEST }]
    soi.op_item_pos as so_pos,
    pd.product_id   as pd_id
    /*
      auskommentiert über mehrere Zeilen
      hinweg 
      */
}
Links können hier hin!

Quellcode von der dunklen Seite

Kommandozeile mit cmd

> test CMD

YAML

builder:
  customTasks:
    - name: ui5-tooling-modules-task
      afterTask: replaceVersion
      configuration:
        addToNamespace: true

XML

<user>
  <name>Foo Bar</name>
  <email verified="true">foo@bar.com</email>
  <password>cGFzc3dvcmRfMTIzIQ==</password>
</user>

JavaScript

async loadWeatherData(lat = "49.31", lon = "8.64") { 
  // default coordinates: Walldorf
  const response = await fetch(`https...her=true`);
  this.getModel().setData(jsonData);
  const abc = true;
}

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Cache-control" />
    <meta http-equiv="Pragma"  />
Links können hier hin!

Overview 1 / 3

Eine Übersicht der HTML-Element ist im folgenden gelistet.

Header 1

Header 2

Header 3

Header 4

Header 5
Header 6

Lorem Ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, puellae parvae optimae sunt. At vero eos et accusam et justo duo dolores et ea rebum.

Waste no more time arguing what a good man should be, be one.
-- Marcus Aurelius

Links können hier hin!

Overview 2 / 3

Accordion 1

Hey! Wenn du das hier lesen kannst, dann bedeutet das, dass dieses Accordion aufgeklappt ist. Möchtest du aber nicht mal probieren, ein anderes aufzuklappen?

Accordion 2

Super! Wenn du das siehst, hast du erfolgreich ein anderen Accordion aufgeklappt. Sei gespannt darauf, was sich hinter dem letzten Accordion befindet!

Accordion 2

Hah! Ein weiterer Text. Wie du vielleicht gemerkt hast, kannst du nicht alle Accordions schließen. Gibts du den Accordions denselben Namen und fängt der name mit "accordion-" an. Erhälst du diesen Effekt!

Sint in Lorem in irure est sint id irure sunt veniam mollit. Labore reprehenderit velit fugiat nisi. 😊 Lorem veniam labore aliqua reprehenderit deserunt ea dolore ut nisi consectetur nisi minim excepteur excepteur. Pariatur in magna nostrud esse ea ullamco aute nulla nisi ex aliquip quis. 🫠 Commodo elit ut culpa sunt dolor. Veniam ipsum non mollit nisi deserunt aute sint qui laborum fugiat ea reprehenderit id minim. Sint in Lorem in irure est sint id irure sunt veniam mollit. 😓 Labore reprehenderit velit fugiat nisi. Consectetur nisi minim excepteur excepteur. Pariatur in magna nostrud esse ea ullamco aute nulla nisi ex aliquip quis. Commodo elit ut culpa sunt dolor. Veniam ipsum non mollit nisi deserunt aute sint qui laborum fugiat ea reprehenderit id hotdog. 😱

Links können hier hin!

Overview 3 / 3

Audio Beispiel:

Note A, Vierte Oktave (440 Hz):

Video Beispiel

Links können hier hin!

Spalten! Spalten! Spalten!

Zweispaltiger Erstcontainer

Mit einem richtig tollen Inhalt!

Zweispaltiger Zweitcontainer

Mit einem noch besseren Inhalt!

Dreispaltiger Erstcontainer

[Hier bitte kreativen Satz einbauen]

Dreispaltiger Zweitcontainer

Vielleicht wären andere Containertitel auch praktisch? 🤔

Dreispaltiger Drittcontainer

Der dritte Kandidat in dieser Reihe!

Vierspaltiger Erstcontainer

Das wird hier immer verrückter!

Zweiter Container aus Vierspaltiger Reihe

Vielleicht doch wieder den vorherigen Titel?

Andere Beispiele

  • Liste gefällig?
  • Hier ist eine!

Natürlich muss nicht jede Spalte eine Box haben!

Fünf Spalten

Bitte baut keine Folien mit 5 Spalten 😅

Ein bombasitsches Foto:

Code

JS:

document.body.innerHTML = '';
Warnboxen haben auch ihren Platz. Jedoch sehen sie hier komisch aus.

Fünfte Spalte.

30 - S p a l t e n

Box

N i c h t - P r a k t i s c h

A b e r - m ö g l i c h

🫠 😄 🪵

6. - S p a l t e

7. - S p a l t e

8. - S p a l t e

N e u n t e

10.!

10 - G e s c h a f f t!

12.

N i c h t - P r a k t i s c h

A b e r - m ö g l i c h

🫠 😄 🪵

6. - S p a l t e

7. - S p a l t e

8. - S p a l t e

N e u n t e

Oh man

20 - G e s c h a f f t!

22.

N i c h t - P r a k t i s c h

A b e r - m ö g l i c h

🫠 😄 🪵

6. - S p a l t e

7. - S p a l t e

8. - S p a l t e

N e u n t e

L e t z t e - S p a l t e

Links können hier hin!

Quellcode (White)

ABAP

DATA chicken TYPE chickentype  .
DATA cow     TYPE cowtype      .
* DATA dog     TYPE dogtype      .
DATA bird    TYPE birdtype     .
    
my_method( IMPORTING "chicken =  chicken 
                     cow     =  cow      
                     bird    =  bird ).

BDL

define behavior for zi_comments //alias <alias_name>
persistent table zbc_comments
late numbering
lock dependent by _Task

SQL

select * from users
where name like 'P%'
  and not exists( select 'irgendwas' from dummy)

CDS

@AbapCatalog.sqlViewName: 'ZSQL_CLIENT'
//@AbapCatalog.compiler.compareFilter: true
@AbapCatalog.preserveKey: true
@AccessControl.authorizationCheck: #CHECK /* Test */
@EndUserText:{ label: 'Client independent source data',
               quickinfo: 'Test' }
define view zcds_client as select from snwd_so_i as soi
                    left outer join snwd_pd as pd 
                    on soi.product_guid = pd.node_key
{
   test /* Auskommentiert */ as InDerZeile,
    soi.parent_key  as so_id, 
    @UI.lineItem[{position: 10},
                 {position: 20, 
                  qualifier: 'Q' ,
                  type: #TEST }]
    soi.op_item_pos as so_pos,
    pd.product_id   as pd_id
    /*
      auskommentiert über mehrere Zeilen
      hinweg 
      */
}
Links können hier hin!

Quellcode von der dunklen Seite (White)

Kommandozeile mit cmd

> test CMD

YAML

builder:
  customTasks:
    - name: ui5-tooling-modules-task
      afterTask: replaceVersion
      configuration:
        addToNamespace: true

XML

<user>
  <name>Foo Bar</name>
  <email verified="true">foo@bar.com</email>
  <password>cGFzc3dvcmRfMTIzIQ==</password>
</user>

JavaScript

async loadWeatherData(lat = "49.31", lon = "8.64") { 
  // default coordinates: Walldorf
  const response = await fetch(`https...her=true`);
  this.getModel().setData(jsonData);
  const abc = true;
}

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Cache-control" />
    <meta http-equiv="Pragma"  />
Links können hier hin!

Overview 1 / 3 (White)

Eine Übersicht der HTML-Element ist im folgenden gelistet.

Header 1

Header 2

Header 3

Header 4

Header 5
Header 6

Lorem Ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, puellae parvae optimae sunt. At vero eos et accusam et justo duo dolores et ea rebum.

Waste no more time arguing what a good man should be, be one.
-- Marcus Aurelius

Links können hier hin!

Scoped Styling

Scoped Styling ermöglicht rote, gelbe oder grüne Texte. Aber eigentlich geht jeder Stil, den man sich vorstellen kann. So gehen auch z.B. große Texte und kleine Texte. Es gehen gespiegelte- und Schriftfamilienfremnde Texte. Der Kreativität sind keine grenzen gesetzt. Und damit meine ich wörtlich,  

Links können hier hin!

Ende der Präsentation

Danke für Ihre
Aufmerksamkeit!

Links können hier hin!

Tests

  1. Eintrag mit verschachtelten Listen
    • Eintag 1
    • Eintrag 2
    1. Eintrag 3 (gemischt)
      1. Level 2 Nest
      • Gemischter Test
    • Letzte Einträge
    • Test 123
  2. Zurück auf oberster Ebene
Links können hier hin!

Zwei Spalten

Drei Spalten

Vier Spalten (Bitte nicht nutzen)

Fünt Spalten (Bitte nicht nutzen)

Dreißig Spalten (Bitte nutzen)