{"built":"2026-09-05T21:53:30.381Z","areas":[{"area":"docs","label":"Documentation","count":165},{"area":"samples","repo":"samples","label":"Samples","count":104},{"area":"samples","repo":"samples-controls","label":"Controls","count":636},{"area":"samples","repo":"samples-stack","label":"Stack","count":32}],"entries":[{"area":"docs","group":"Getting Started","title":"In a Nutshell","text":"Build UI5 Apps Purely in ABAP","headings":[["Background","background"],["Why abap2UI5?","why-abap2ui5"],["How It Works","how-it-works"],["Overview","overview"],["Architecture","architecture"],["Performance","performance"],["Security","security"],["System Footprint","system-footprint"],["Transparency","transparency"],["Where It Fits","where-it-fits"],["Compatibility","compatibility"],["ABAP Cloud","abap-cloud"],["Clean Core","clean-core"],["System Support","system-support"],["UI5 Versions","ui5-versions"],["Enterprise Ready","enterprise-ready"],["Production Usage","production-usage"],["Licensing","licensing"],["Launchpad Integration","launchpad-integration"],["Installation","installation"],["Tooling","tooling"],["Community","community"],["Support","support"],["Contribution","contribution"],["Sponsor","sponsor"],["In Production Elsewhere","in-production-elsewhere"]],"terms":"nutshell build ui5 apps purely abap abap2ui5 open source framework brings simplicity classic development modern selection screens alv grids let working uis few lines web class zcl_my_app definition public section interfaces z2ui5_if_app protected private endclass implementation method main client message_box_display hello world endmethod first app ready single parameter passed explained get_started hello_world page finished looks like because screen table dialog built form above invoices editing row tutorials walkthrough preview.png tutorial grows exactly ten steps complete run browser takes production under unit tests background since launching grown small side project community driven used developers worldwide absorbs frontend complexity focus business logic existing skills see getting started guide quickstart step setup sample next watch action why traditional needs javascript expertise deployment odata service cuts out those complexities use best needed broad compatibility legacy systems cloud environments extend beyond rap cases cover free style custom flows non cds data prototype fast iterate rapidly ships abapgit https abapgit.org installation across separate works shell renders builds xml view sends already embedded every user interaction comes back fresh call sits between nothing survives server clicks deliberate inherits if_serializable_object state travels roundtrip restored runs again request new session holding left stateless makes scale need pinned enqueue rfc connection stateful mode cookbook expert_more statefulness exists outside sap pattern name html over wire idea behind htmx hotwire phoenix liveview applies overview architecture thin approach processing handling stay backend design simplifies configuration cache clearing headaches keeps sensitive safely performance focuses rendering via while handles unlike calls embeds directly views cutting network roundtrips speeding response measure tune security secure stays receives expose endpoints delivers users access raw services database queries external tools authentication icf node job system content policy default authorization yours whatever still arrives check program endpoint csp setting checks footprint essentially classes draft core minimal optional add ons provide extra functionality resources addons ecosystem around layout variants maintenance charts transparency code lives publicly github discuss features issues openly publish technical blog posts explain key concepts ship fixes quickly always understand confirm behavior where fits worklists forms crud dashboards kind thing otherwise write report freestyle deliberately everything three poor fit knowing front saves heavily interactive real time collaborative offline complex behaviour hold application teams work strictly separately point means team stack advanced insights many scenarios uses released apis making strong extensions syntax sql eml inside clean relying upgrade stable line principles investment safe through future upgrades support standard btp environment premise netweaver 7.02 later below 7.50 pull branch instead generated automatically downporting versions itself loaded bootstrap bootstraps openui5 cdn exit points sapui5 version delivered without internet 1.71 oldest supported release change tested against 2.x well ui5_versions distributions bootstrapping ui5_bootstrapping choosing enterprise combines capabilities shaped smoothly 4hana usage transport updates versioned releases listed notes changelog deprecations way replaces licensing technically license organization mit licensed commercial launchpad integration embed fiori launchpads tiles zone websites easy import set http communication start building hand opens ways try playground live demo anything installed full instructions tooling none required adt enough worth minutes linter reconstructs reports extension vscode mcp mcp_server lets assistant look result last novelty language verify unusually suited being written developing workflow offers issue join slack channel get help options contribution contributions welcome whether fix bugs improve docs helps thrive learn involved sponsor volunteers maintain company benefits please consider sponsoring read sponsorship opportunities elsewhere companies workshops projects case named who_uses scenario","url":"https://abap2ui5.github.io/docs/get_started/about.html"},{"area":"docs","group":"Getting Started","title":"Quickstart","text":"Pull abap2UI5 with abapGit. (New to abapGit? Install it first — see abapGit; it's the one-time tool used to pull abap2UI5 into your system.) For anything beyond a first look, pull a release rather than main — see Prod...","headings":[["1. Install the Framework via abapGit","1-install-the-framework-via-abapgit"],["2. Set Up HTTP Handler and Service","2-set-up-http-handler-and-service"],["3. First Launch","3-first-launch"],["Next Steps","next-steps"]],"terms":"quickstart install framework via abapgit pull abap2ui5 https github.com abapgit.org new first see technical tools time tool used system anything beyond look release releases rather main productive usage configuration productive_usage why repository installation screen get_started image.png details abap cloud btp environment public use eclipse adt mass activate pulled objects afterwards s4_public_cloud page walks through screenshot including link choices cannot changed later environments image 4.png everything need http endpoint create next serves ui5 frontend itself separate deploy scenarios additional app needed check out information here set handler service package define class tab standard systems netweaver premise private code group zcl_my_abap2ui5_http_handler definition section interfaces if_http_extension endclass implementation method handle_request z2ui5_cl_ui5_http_handler run server endmethod if_http_service_extension req request res response transaction sicf enter list node creation dialog user attachments assets b76d9459 79be 40e1 a00e b4e8cbbab9d4 assignment 5.png follow sap tutorial developers.sap.com tutorials service.html img width alt creating src ecbd1505 47e4 504fa91c8162 tip security talks giving full control over accessibility authentication aspects language versions above place distinction matters apps independent free choose whether build compatibility whichever runs launch open browser right click test url looks like host port your_service startup where button launcher c8962298 068d 4efb a853 c44a9b9cda56 press verify bundled confirm works should now whole verified something else instead shows icf error plain never reached activated path matches logon prompt did expect job exactly data access controlled appears stays white console f12 bootstrap problem blocked cdn logs without internet must serve themselves bootstrapping setup ui5_bootstrapping steps installed hello world hello_world smallest exist start line","url":"https://abap2ui5.github.io/docs/get_started/quickstart.html"},{"area":"docs","group":"Getting Started","title":"Hello World","text":"Just copy the following class into your system:","headings":[["Starting an App by URL","starting-an-app-by-url"],["A Real Screen, an Event and Data Exchange","a-real-screen-an-event-and-data-exchange"],["Jump into the Code","jump-into-the-code"],["Next: Build Something","next-build-something"],["Working Samples","working-samples"]],"terms":"hello world copy following class system abap zcl_app_hello_world definition public section interfaces z2ui5_if_app protected private endclass implementation method main client message_box_display endmethod open abap2ui5 startup page browser quickstart get_started first launch ends enter name input field complete app frontend project odata service starting url convenience around parameter use now app_start appended starts directly https host port sap your_service form bookmark launchpad tile every sample catalogue pages say start mean exactly launching reports exist framework could instantiate typo activated yet anything goes wrong point renders empty binding update error view roundtrip catalogued symptom cause fix common failures cookbook troubleshooting common_failures tip naming apps customer namespace z2ui5 prefix reserved samples real screen event data exchange message box second still everything travelling ways zcl_app_hello_screen type string check_on_navigated z2ui5_cl_ui5_view_builder factory ele mvc xmlns sap.m sap.ui.core.mvc shell title tag value bind button text press say_hello view_display stringify elseif check_on_event message_toast_display endif toast greets three things happening none needed code had write yourself ui5 xml built ties attribute user types next sends back catches jump ctrl f12 running developer tools tabs source rendered model request response pair log place look something render way expected opened showing image 2.png build want explained rather shown walkthrough tutorials takes these classes apart grows concept per step views events lists tables selection popups run generated scripts link samples.mjs edit working github.com blob samples.md describes single pull repository abapgit abapgit.org basics smallest z2ui5_cl_smp_app_493 src z2ui5_cl_smp_app_493.clas.abap end","url":"https://abap2ui5.github.io/docs/get_started/hello_world.html"},{"area":"docs","group":"Getting Started","title":"Developing with AI","text":"abap2UI5 is well suited to being written by an AI assistant, and the reason is structural:","headings":[["Paste the essentials","paste-the-essentials"],["Point it at the right index","point-it-at-the-right-index"],["Put the conventions in the repository","put-the-conventions-in-the-repository"],["Give it the gates","give-it-the-gates"],["Give it the loop","give-it-the-loop"],["From the editor","from-the-editor"],["Next Steps","next-steps"]],"terms":"developing abap2ui5 well suited being written assistant reason structural app abap class source code nothing else service generate odata artifacts frontend project manifest deployment pipeline exactly file agent write thing writes runs whole text view logic state data flow live language never keep backend javascript step because second half drift hundreds working examples learn three sample catalogues hold complete tested apps per pattern every linted rendered somebody already built value help tree navigation between question real answer instead guess result checked without sap system linter advanced reconstructs ui5 out builds reports verify work stops handing render everything below turns those properties setup rising order effort start top level useful paste essentials zero version web access ahead task writing read https abap2ui5.github.io docs llms.txt follow pages need shape implementing z2ui5_if_app enters main dispatches client check_on_navigated display branch true first check_on_event time check_on_init build z2ui5_cl_ui5_view_builder verbs ele tag end stringify bind bidirectional user edited comes back roundtrip fresh session survives server except itself serialized building something scratch check whether exists catalogue lists words search github.com samples blob samples.md done npx src reads needs point right index files describe machine different questions map prose chapter site line covers llms full.txt fetch interface guessing signature guide ships framework short free give cheapest page either today rather recalls put conventions repository tells agents.md automatically anybody remembering anything template working_off_stack lifecycle builder binding events gates run calling claude settings.json allowlist npm stopping ask cannot hand means matters here chain names exist release target bindings loop mcp mcp_server checks development still works cursor add yes tools answers snippet trust capabilities express feature verified capability validate_view seconds against config deploy_app local sandbox compile build_backend run_app transpile node boot headless errors screenshot pitfalls defects green catch abapgit import activation oldest set levelled validating views small checkout minute browser measured tens minutes stop where levels tool meant used editor extension vscode registers window copilot mode speaking separate configuration abap2ui5.mcp.reposroot folder holding checkouts passes paths through adds deliberately configured systems list classes over adt get while credential prompt stays ordinary dialog sees next steps off stack assumes tooling get_started human side","url":"https://abap2ui5.github.io/docs/get_started/ai.html"},{"area":"docs","group":"Getting Started","title":"What's Next?","text":"You've installed abap2UI5 and built your first app.","headings":[["Sample Apps","sample-apps"],["Tooling","tooling"],["Development","development"],["Configuration","configuration"],["Add-ons","add-ons"],["Real-World Use","real-world-use"]],"terms":"next installed abap2ui5 built first app here pick direction fits goals sample apps hundreds working fastest way learn read already write live three repositories page searches https abap2ui5.github.io samples start path smallest runs files devices custom css idea per tooling optional worth ten minutes project template advanced working_off_stack checks wired linter finds broken views without system extension vscode code mcp server mcp_server lets agent build look see get_started building assistant writes development handle events share data work tables cookbook view definition walks through patterns need everyday life cycle event_navigation life_cycle configuration going set security performance tuning launchpad integration guide setup add ons extend community layout handling charts table maintenance resources addons real world use ready scenarios companies running uses who_uses","url":"https://abap2ui5.github.io/docs/get_started/next.html"},{"area":"docs","group":"Tutorial","title":"Walkthrough","text":"Learn abap2UI5 by building something. The Walkthrough grows a small invoice app from a single message box into a complete application, one concept per step: the app class and its lifecycle, views written in ABAP, even...","headings":[["Preview","preview"],["Steps","steps"],["What You Should Know","what-you-should-know"],["After the Tutorial","after-the-tutorial"]],"terms":"walkthrough learn abap2ui5 building something grows small invoice app single message box complete application concept per step class lifecycle views written abap events data binding lists tables selection screen popups takes finished out playground production under unit tests runnable whole stands point fragment press run button code start browser copy system launch like see quickstart get_started depends anything outside jump straight interested preview table invoices form above dialog editing row tutorials preview.png last few hundred lines frontend project odata service steps smallest possible method first view render ui5 built entirely event behind input field whose value reaches server itself list show internal react click know was edit reading asks swap real columns cells actions structure refactor apps use transport order authorization url users test runtime involved should prior experience needed tutorial introduces every appears basic classes methods assumed hello world hello_world page worth starts where picks works without installation simply begin keep cheat sheet cookbook cheat_sheet open while work through recurring construct syntax popup calls definition covers topic again reference chapter three catalogues tested continue samples https abap2ui5.github.io pattern along guided learning path controls demo kit rebuilt searchable control stack integration technology rap websocket","url":"https://abap2ui5.github.io/docs/tutorials/walkthrough/"},{"area":"docs","group":"Tutorial","title":"Step 1: The App Class","text":"Every abap2UI5 app is one ABAP class implementing the interface z2ui5_if_app.","headings":[["What Just Happened","what-just-happened"],["The Interface","the-interface"],["Working Samples","working-samples"]],"terms":"step app class every abap2ui5 abap implementing interface z2ui5_if_app single method main framework calls parameter client api smallest exist zcl_app_walkthrough definition public section interfaces protected private endclass implementation message_box_display hello world endmethod press run example under code starts right here browser system instead copy open startup page see quickstart get_started enter name happened project odata service frontend artifact follows thin model renders while logic state data stay server runs roundtrip again user interaction now call shows message box tutorials walkthrough tell apart whole displaying views messages reacting events binding everything tutorial goes through object contract between methods importing type ref z2ui5_if_client endinterface real declares few attributes manages ignore next replace ui5 view samples start generated scripts link samples.mjs edit working complete apps sample catalogue https github.com blob samples.md use describes pull repository abapgit abapgit.org app_start basics z2ui5_cl_smp_app_493 src z2ui5_cl_smp_app_493.clas.abap end","url":"https://abap2ui5.github.io/docs/tutorials/walkthrough/step-1.html"},{"area":"docs","group":"Tutorial","title":"Step 2: A First View","text":"A message box is not much of a UI. UI5 apps describe their screens as XML views — and in abap2UI5 you write that view in ABAP, with z2ui5_cl_ui5_view_builder:","headings":[["The Four Verbs","the-four-verbs"]],"terms":"step first view message box much ui5 apps describe screens xml views abap2ui5 write abap z2ui5_cl_ui5_view_builder class zcl_app_walkthrough definition public section interfaces z2ui5_if_app protected private endclass implementation method main data factory ele mvc xmlns sap.m sap.ui.core.mvc shell page title walkthrough tag text hello world client view_display stringify endmethod four verbs writing control per call builder list controls look every property aggregation available because never knew name add descend container stay leaf set attribute chain points end ascend parent single rule applies currently attributes follow gets child root declarations written hand exactly real renders sends browser indentation mirrors tree sits inside makes readable builds full layout rules cookbook want see produced press ctrl f12 running app open tab developer tools get_started hello_world jump code show generated model payload roundtrip next button lifecycle","url":"https://abap2ui5.github.io/docs/tutorials/walkthrough/step-2.html"},{"area":"docs","group":"Tutorial","title":"Step 3: Events","text":"The framework calls main on every roundtrip ","headings":[["The Lifecycle","the-lifecycle"],["Working Samples","working-samples"]],"terms":"step events framework calls main every roundtrip initial start again user interaction soon app reacts input tell those apart job falls lifecycle checks becomes dispatcher abap class zcl_app_walkthrough definition public section interfaces z2ui5_if_app protected private endclass implementation method client check_on_navigated data view z2ui5_cl_ui5_view_builder factory ele mvc xmlns sap.m sap.ui.core.mvc shell page title walkthrough tag text hello world button say press event say_hello view_display stringify elseif check_on_event message_toast_display abap2ui5 endif endmethod browser http clicks toast true draw screen first whenever navigates back later branch displays triggered argument names wires returns handler sends name chose check phase chain cleanly dispatches full picture life cycle cookbook event_navigation life_cycle next leaves reaches without single line transfer code samples generated scripts link samples.mjs edit working complete apps sample catalogue https github.com blob samples.md use describes pull repository abapgit abapgit.org app_start basics iii init navigated z2ui5_cl_smp_app_495 src z2ui5_cl_smp_app_495.clas.abap views roundtrips z2ui5_cl_smp_app_004 z2ui5_cl_smp_app_004.clas.abap end","url":"https://abap2ui5.github.io/docs/tutorials/walkthrough/step-3.html"},{"area":"docs","group":"Tutorial","title":"Step 4: Data Binding","text":"So far the app only talks. Now the user answers: an input field replaces the text, and whatever is typed into it arrives in your class — without a single line of transfer code:","headings":[["How the Value Travels","how-the-value-travels"],["Working Samples","working-samples"]],"terms":"step data binding far app talks now user answers input field replaces text whatever typed arrives class without single line transfer code abap zcl_app_walkthrough definition public section interfaces z2ui5_if_app recipient type string protected private endclass implementation method main client check_on_navigated world view z2ui5_cl_ui5_view_builder factory ele mvc xmlns sap.m sap.ui.core.mvc shell page title walkthrough tag value bind button say hello press event say_hello view_display stringify elseif check_on_event message_toast_display endif endmethod travels attribute model every roundtrip framework serializes whole instance draft server restores next keeps state session handling attributes must reaches dynamically fails binding_error everything else may stay serialized either way full rules cookbook connects property fires browser sends current screen along time branch runs already holds toast greets name directions wrote moves internal table list samples start generated scripts link samples.mjs edit working complete apps sample catalogue https github.com abap2ui5 blob samples.md use describes pull repository abapgit abapgit.org app_start basics z2ui5_cl_smp_app_494 src z2ui5_cl_smp_app_494.clas.abap end","url":"https://abap2ui5.github.io/docs/tutorials/walkthrough/step-4.html"},{"area":"docs","group":"Tutorial","title":"Step 5: List Binding","text":"An app that greets is nice; an app that shows data is useful.","headings":[["One Template, Many Rows","one-template-many-rows"],["Working Samples","working-samples"]],"terms":"step list binding app greets nice shows data useful invoice starts here internal table invoices bound ui5 row template repeated per line abap class zcl_app_walkthrough definition public section interfaces z2ui5_if_app types begin ty_s_invoice product type string supplier quantity end t_invoices standard empty key protected private endclass implementation method main client check_on_navigated value pineapple acme milk green growers canned beans corner deli salad bread view z2ui5_cl_ui5_view_builder factory ele mvc xmlns sap.m sap.ui.core.mvc shell page title walkthrough headertext items bind tag standardlistitem description info view_display stringify endif endmethod many rows binds like did aggregation call tutorials behind clones once inside plain path relative framework maps field names uppercase initialized branch right real where select runs tutorial keeps demo stays self contained tables sap.m.table columns cells exactly way cookbook model variant next learn react click samples start generated scripts link samples.mjs edit working complete apps sample catalogue https github.com abap2ui5 blob samples.md use describes single pull repository abapgit abapgit.org app_start highlight events z2ui5_cl_smp_app_048 src z2ui5_cl_smp_app_048.clas.abap","url":"https://abap2ui5.github.io/docs/tutorials/walkthrough/step-5.html"},{"area":"docs","group":"Tutorial","title":"Step 6: Row Events","text":"A list of five rows raises a question Step 3 did not have: which row was clicked? The event stays the same ","headings":[["Events With Arguments","events-with-arguments"],["Working Samples","working-samples"]],"terms":"step row events list five rows raises question tutorials walkthrough did was clicked event stays new argument carries abap class zcl_app_walkthrough definition public section interfaces z2ui5_if_app types begin ty_s_invoice product type string supplier quantity end data t_invoices standard table empty key protected private endclass implementation method main client check_on_navigated value pineapple acme milk green growers canned beans corner deli salad bread view z2ui5_cl_ui5_view_builder factory ele mvc xmlns sap.m sap.ui.core.mvc shell page title headertext invoices items bind tag standardlistitem description info active press val show_invoice t_arg view_display stringify elseif check_on_event s_invoice get_event_arg optional message_toast_display endif endmethod arguments makes whole clickable gives feedback handler sits template every fires rides syntax resolved per browser clone name server returns read finds state still filled branch earlier roundtrip framework restored serialization doing job directions like handled purely under backend cookbook event_navigation toast modest way show invoice next real dialog samples start generated scripts link samples.mjs edit working complete apps sample catalogue https github.com abap2ui5 blob samples.md use describes single pull repository abapgit abapgit.org app_start extra z2ui5_cl_smp_app_167 src z2ui5_cl_smp_app_167.clas.abap","url":"https://abap2ui5.github.io/docs/tutorials/walkthrough/step-6.html"},{"area":"docs","group":"Tutorial","title":"Step 7: Popups","text":"Clicking a row now opens a dialog to edit the invoice's quantity.","headings":[["What Is New","what-is-new"],["Working Samples","working-samples"]],"terms":"step popups clicking row now opens dialog edit invoice quantity popup built builder verbs view root element changes core fragmentdefinition instead mvc handed popup_display while main stays untouched behind abap class zcl_app_walkthrough definition public section interfaces z2ui5_if_app types begin ty_s_invoice product type string supplier end data t_invoices standard table empty key s_edit protected private endclass implementation method client check_on_navigated value pineapple acme milk green growers canned beans corner deli salad bread z2ui5_cl_ui5_view_builder factory ele xmlns sap.m sap.ui.core.mvc shell page title walkthrough list headertext invoices items bind tag standardlistitem description info active press event val t_arg view_display stringify elseif check_on_event get_event_arg optional sap.ui.core content label text input buttons button cancel save emphasized popup_destroy message_toast_display updated endif endmethod new model handler copies clicked binds time arrives attribute already holds show close never rebuilt waits refresh call nothing else every roundtrip changed bound pushes browser itself updates popovers message boxes covered under popover cookbook popup_popover app complete last separates structure real apps use samples start generated scripts link samples.mjs working sample catalogue https github.com abap2ui5 blob samples.md describes single pull repository abapgit abapgit.org app_start ways open z2ui5_cl_smp_app_012 src z2ui5_cl_smp_app_012.clas.abap","url":"https://abap2ui5.github.io/docs/tutorials/walkthrough/step-7.html"},{"area":"docs","group":"Tutorial","title":"Step 8: Selection Screen","text":"Real apps rarely show all the data at once.","headings":[["What Is New","what-is-new"],["Working Samples","working-samples"]],"terms":"step selection screen real apps rarely show data once ask first top result below button between adds form way app reads invoice record gains delivery date select abap class zcl_app_walkthrough definition public section interfaces z2ui5_if_app types begin ty_s_invoice product type string supplier quantity delivery_date end s_search date_from date_to t_invoices standard table empty key protected private endclass implementation method main client check_on_navigated view z2ui5_cl_ui5_view_builder factory ele mvc xmlns sap.m sap.ui.core.mvc sap.ui.layout.form page shell title walkthrough simpleform editable true content tag label text input value bind datepicker valueformat yyyy read invoices press event emphasized list headertext items standardlistitem description info view_display stringify elseif check_on_event demo system replace e.g zinvoice where like pineapple acme milk green growers canned beans corner deli salad bread initial contains drop rows whose match delete endif endmethod new second statement chain split holds root filled shape abap2ui5 use part see cookbook needs namespace declared next aggregation written lays out field pairs itself grid widths picker shows user locale hands attribute format asked here comparison sorts correctly handler nothing else branch already exists browser changed every roundtrip bound pushes model point three clause abstract database layer reading writing stays plain makes easy plug code becomes samples start generated scripts link samples.mjs edit working complete sample catalogue https github.com blob samples.md describes single pull repository abapgit abapgit.org app_start cells add z2ui5_cl_smp_app_011 src z2ui5_cl_smp_app_011.clas.abap","url":"https://abap2ui5.github.io/docs/tutorials/walkthrough/step-8.html"},{"area":"docs","group":"Tutorial","title":"Step 9: Tables","text":"A list shows three fields per row. A table shows columns — with headers, with a cell per field, and with room for a row action. This step swaps sap.m.List for sap.m.Table and puts the edit button from Step 7 back, now...","headings":[["Columns and Cells","columns-and-cells"],["Working Samples","working-samples"]],"terms":"step tables list shows three fields per row table columns headers cell field room action swaps sap.m.list sap.m.table puts edit button tutorials walkthrough back now column abap class zcl_app_walkthrough definition public section interfaces z2ui5_if_app types begin ty_s_invoice product type string supplier quantity delivery_date end data t_invoices standard empty key s_edit protected private endclass implementation method main client check_on_navigated value pineapple acme milk green growers canned beans corner deli salad bread view z2ui5_cl_ui5_view_builder factory ele mvc xmlns sap.m sap.ui.core.mvc tab shell page title headertext invoices items bind tag text delivery date width columnlistitem cells icon sap tooltip press event val t_arg view_display stringify elseif check_on_event get_event_arg optional popup fragmentdefinition core sap.ui.core dialog content label datepicker valueformat yyyy buttons cancel save emphasized popup_display popup_destroy message_toast_display updated endif endmethod aggregations holds header control template whose hold line third lands under whatever contains ascends been given chain standing inside alone closes steps out next becomes sibling rather child split again goes variable filled statements single work ascend six levels between last first fifth fixed carries defined gets several hundred icons ui5 font ships reader screen instead everything else unchanged binds writes internal without rebuilding remains putting shape real app samples start generated scripts link samples.mjs working complete apps sample catalogue https github.com abap2ui5 blob samples.md use describes pull repository abapgit abapgit.org app_start full example sap.ui.table z2ui5_cl_smp_app_070 src z2ui5_cl_smp_app_070.clas.abap","url":"https://abap2ui5.github.io/docs/tutorials/walkthrough/step-9.html"},{"area":"docs","group":"Tutorial","title":"Step 10: App Structure","text":"Everything so far lived in one main method, and by now that method does five different jobs.","headings":[["What It Does","what-it-does"],["The Class","the-class"],["The Structure","the-structure"],["What to Take Away","what-to-take-away"],["Where to Go From Here","where-to-go-from-here"],["Working Samples","working-samples"]],"terms":"step app structure everything far lived main method now five different jobs real apps framework sample catalogues separate phases methods changes behavior puts code where reader expects assembles every part tutorial complete selection screen supplier delivery date range tutorials walkthrough read fetch matching invoices button press result table columns cells row action popup edit post write change back refresh class abap zcl_app_walkthrough definition public section interfaces z2ui5_if_app types begin ty_s_invoice product type string quantity delivery_date end data s_search date_from date_to t_invoices standard empty key s_edit protected client ref z2ui5_if_client on_event view_display popup_edit_display data_read data_update private endclass implementation check_on_navigated elseif check_on_event endif endmethod get_event holds name passed event get_event_arg returns extra argument attached via t_arg case value optional save popup_destroy message_toast_display updated cancel endcase view z2ui5_cl_ui5_view_builder factory ele mvc xmlns sap.m sap.ui.core.mvc form sap.ui.layout.form page shell title navbuttonpress event_nav_app_leave shownavbutton check_app_prev_stack simpleform editable true content tag label text input bind datepicker valueformat yyyy emphasized tab headertext items column width columnlistitem icon sap tooltip val stringify fragmentdefinition core sap.ui.core dialog buttons popup_display demo system replace select e.g zinvoice like between pineapple acme milk green growers canned beans corner deli salad bread initial contains drop rows whose match delete persist update set pure dispatcher stashes attribute handler use without passing around routes roundtrip phase decides dispatch shapes fine life cycle cookbook event_navigation life_cycle compares chain small second level once state stays else attributes serialized browser visible model bound nothing reference per operation build touch database grows those seams along places ever appears somewhere give navigation shown was called another see inner_app take away controller whole rebuilt reading saving opening closing need fresh popups builder root instead while place writing plain abap2ui5 abstract layer makes easy plug existing here built last steps out playground production transport order authorization url users start unit tests pays off testable beyond topic chapter helps expert_more value_help https abap2ui5.github.io samples tested nearly pattern generated scripts link samples.mjs working catalogue github.com blob samples.md describes single pull repository abapgit abapgit.org app_start full example sap.ui.table z2ui5_cl_smp_app_070 src z2ui5_cl_smp_app_070.clas.abap add z2ui5_cl_smp_app_011 z2ui5_cl_smp_app_011.clas.abap","url":"https://abap2ui5.github.io/docs/tutorials/walkthrough/step-10.html"},{"area":"docs","group":"Tutorial","title":"Step 11: From Playground to Production","text":"The app from Step 10 is finished — and so far it has run in the playground, or in your development system against demo data. This step takes it to the system your users work on. Unlike the ten steps before it, there i...","headings":[["Make the Data Real","make-the-data-real"],["Pin the Framework","pin-the-framework"],["Transport, in Order","transport-in-order"],["Decide Who May Do What","decide-who-may-do-what"],["Give Users a Way In","give-users-a-way-in"],["What to Take Away","what-to-take-away"]],"terms":"step playground production app tutorials walkthrough finished far run development system against demo data takes users work unlike ten steps nothing new build here everything needs already configuration chapter follows those chapters order invoice meets framework installation done yet comes first quickstart get_started end path including verify make real separated seams purpose where pays off time data_read data_update methods touch carries statement comment replace value table select printed above memory update method changes view events popup never knew was fake caution class leaves machine tables exist every reach dependency example compiles fine syntax error without pin travels through landscape underneath should hold still while fixed stable version instead release https github.com abap2ui5 releases rather tracking main deliberately productive usage productive_usage explains policy notes resources changelog list change deprecations page names way out replaces apps want decoupled points renaming feature advanced second independently versioned transport ships abap objects process ordering rule spelled http service target activate needed adjust ui5 bootstrap source setup ui5_bootstrapping load somewhere else internet access serves itself confirm hello world arrives check exists something fails know layer failed broken decide may different questions answered places security map authentication gets icf node job exactly logon procedure visibility created defaults content response headers csrf protection post configure authorization stays yours makes concrete whoever reaches press read invoices open edit dialog save runs between shows put handler gating classes user start authority top reading writing separate protects operation level sure cannot navigation another give sicf need url host port sap your_service app_start zcl_app_walkthrough bookmark intranet link tile says launching looks like per fiori launchpad private cloud premise chain public s4_public_cloud phone added home screen mobile_start web take away making touched move bottom failure code write wrapper around live keeps safe next unit tests structure plain","url":"https://abap2ui5.github.io/docs/tutorials/walkthrough/step-11.html"},{"area":"docs","group":"Tutorial","title":"Step 12: Unit Tests","text":"The app is in production since Step 11, and changes will keep coming ","headings":[["The Class Under Test","the-class-under-test"],["The Test Class","the-test-class"],["Why This Worked","why-this-worked"],["What to Take Away","what-to-take-away"]],"terms":"step unit tests app production since tutorials walkthrough changes keep coming new filter second editable field next framework release lets transport leave confidence thing every abap project adds point little abap2ui5 gets way methods worth testing plain test class could written ever hearing under unchanged printed here full stands zcl_app_walkthrough definition public section interfaces z2ui5_if_app types begin ty_s_invoice product type string supplier quantity delivery_date end data s_search date_from date_to t_invoices standard table empty key s_edit protected client ref z2ui5_if_client on_event view_display popup_edit_display data_read data_update private endclass implementation method main check_on_navigated elseif check_on_event endif endmethod get_event holds name passed event get_event_arg returns extra argument attached via t_arg case read edit value optional save popup_destroy message_toast_display updated cancel endcase view z2ui5_cl_ui5_view_builder factory ele mvc xmlns sap.m sap.ui.core.mvc form sap.ui.layout.form page shell title navbuttonpress event_nav_app_leave shownavbutton check_app_prev_stack simpleform selection true content tag label text input bind delivery date datepicker valueformat yyyy button invoices press emphasized tab headertext items columns column width columnlistitem cells icon sap tooltip val stringify popup fragmentdefinition core sap.ui.core dialog buttons popup_display demo system replace select e.g zinvoice where like between pineapple acme milk green growers canned beans corner deli salad bread initial contains drop rows whose match delete persist change update set live always classes include adt nothing specific ltcl_walkthrough deferred local friends final risk level harmless duration short read_filters_by_supplier read_filters_by_date update_writes_back cut cl_abap_unit_assert assert_equals act lines exp msg expected exactly loop ls_invoice assert_true xsdbool lies endloop run ctrl shift f10 three different seams fills screen backing structure attribute calls counts result was pressed built enters through binds checks property row rather count plays workflow without fill bindings call check becomes real grows double database layer seam already place why worked never mock dispatcher handler take parameter logic reachable single object payoff opens model above let anyway making everyone skip fails activate even linter stays quiet attributes natural interface serializes assert deliberately cover whether aggregation question answer exists advanced reconstructs builder chain validates against ui5 tooling get_started shows runs these away testable because runtime http mocks directly pattern missing activation error style issue views checked together grown message box tested cookbook covers topic again reference chapter sample catalogues https abap2ui5.github.io samples continue","url":"https://abap2ui5.github.io/docs/tutorials/walkthrough/step-12.html"},{"area":"docs","group":"Tutorial","title":"Cheat Sheet","text":"A one-page recap of the rules that decide whether an abap2UI5 app works or misbehaves in a way that is hard to debug.","headings":[["Next Steps","next-steps"]],"terms":"cheat sheet page recap rules decide whether abap2ui5 app works misbehaves way hard debug row links recipe explains full read checklist introduction rule why matters implement z2ui5_if_app put everything single main method entry point framework calls initial load every user interaction life cycle cookbook event_navigation life_cycle dispatch elseif chain over check_on_init check_on_navigated check_on_event check answers phase separate blocks let branches run roundtrip always call view_display branch called returns via nav_app_leave browser still shows view without display left stale blank screen navigation inner_app declare attribute bind public section binding dynamic assign cannot reach protected private fails binding_error model keep state attributes local variables between events instance serialized draft server back survive visibility locals data declarations open cursors locks statefulness expert_more respect ui5 aggregation even though builder enforce lets nest anything inside mismatch surfaces broken rendering rather syntax error definition never use deprecated control renders today vanishes next upgrade xml passed through unchanged nothing stops linter advanced reports against release system runs take ready made dialog popups add building confirm select file download ranges pdf dozen versioned https github.com addons backtick string literals project wide convention samples documentation keeps abap handling consistent warning flag boolean takes either expression converts form whenever value comes out tag button text save enabled abap_false false written verbatim abap_true arrives empty neither true expects wrong literal belongs unquoted variable yields reason convert hand visible xsdbool lines mt_item steps common failures troubleshooting common_failures symptoms usual causes","url":"https://abap2ui5.github.io/docs/cookbook/cheat_sheet.html"},{"area":"docs","group":"Cookbook","title":"Definition","text":"abap2UI5 uses SAP UI5 on the frontend without modification.","headings":[["Sending a View","sending-a-view"],["The View Builder","the-view-builder"],["Where to Look for Controls","where-to-look-for-controls"],["Choosing a Control","choosing-a-control"],["Next Steps","next-steps"],["Working Samples","working-samples"]],"terms":"definition abap2ui5 uses sap ui5 https sapui5.hana.ondemand.com frontend without modification whatever abap code sends browser standard xml view write freestyle project consequence everything sdk works directly control property namespace demo kit available copy paste class renders sending simplest case build string ship client z2ui5_cl_sample_view_xml public section interfaces z2ui5_if_app protected private endclass implementation method main view_display mvc xmlns sap.m core sap.ui.core sap.ui.core.mvc displayblock true height shell page title text endmethod swap framework doesn care builder writing raw hand quickly turns cumbersome ships z2ui5_cl_ui5_view_builder produces chaining call per shape chain stringify tree z2ui5_cl_sample_view_builder data factory ele tag classes produce exact press run either comes use whichever prefer strings fine handful lines scales better real apps four verbs catalogue controls behind add descend container stay leaf set attribute pointing end ascend parent exactly rule applies child added always follows receive attributes first descends closed stays leaves needs none final may left out entirely root matter where stopped declarations written invent because knows names express every aggregation including those released was name pass verbatim camelcase element like carries content under default columns inside sap.ui.table.table boolean instead false flag reaches conversion editable mv_edit_mode visible xsdbool mt_item tips working views extension advanced vscode gives completion hover whole api checks while type linter rebuilds reports unknown properties enum values since violations system involved see samples repository get_started next sample ready made examples adapt warning respect rules intentionally permissive lets nest never knew itself defines specific aggregations e.g sap.m.page headercontent footer accepts certain types often particular interface base combining way violates these lead broken rendering missing layout glitches runtime errors console subtle bugs show devices themes check confirm exposes accept valid want compiler cannot catch mistakes pure concerns catches large part deploy rest verified against look used documentation reference anything visual interactive events find docs done separate catalog learn thing warn deprecated passed through until removes already happened once belize went 1.136 nothing stops question tool rather remember member library release runs ui5.sap.com current list trap worth knowing exists twice avatar resolves sap.m.avatar sap.f.avatar 1.73 avatargroup avatargroupitem round really live sap.f need prefix libraries half sap.ui.commons button label dialog panel namesake copied old tutorial drag been dead 1.38 along still render something choosing table below covers choices come almost app starting point diving notes tabular sorting sap.m.table responsive supports growing p13n choice business flat icons avatars sap.m.list standardlistitem lighter needed hierarchical sap.m.tree sap.ui.table.treetable treetable shows fixed form labels inputs sap.ui.layout.form.simpleform time auto layouts fields responsively custom grid sap.ui.layout.form.form simpleform flexible enough wrap sap.m.shell frame collapsible header sap.f.dynamicpage object pages analytics screens action toolbar sap.f.semantic.semanticpage adds semantic actions edit delete share vertical horizontal stack sap.m.vbox sap.m.hbox quick tabs sap.m.icontabbar icontabfilter tab single select dropdown sap.m.select items sap.m.combobox combobox allows typing filtering multi sap.m.multicombobox pills appear field date input sap.m.datepicker sap.m.timepicker sap.m.datetimepicker formatter binding mapping cookbook model status indicator sap.m.objectstatus colored icon state modal sap.m.dialog fragmentdefinition popup popup_popover fit simpler over switch richer variant concrete requirement justifies steps static walks sharing between logic start generated scripts link samples.mjs complete github.com blob samples.md describes pull abapgit abapgit.org app_start basics hello world smallest z2ui5_cl_smp_app_493 src z2ui5_cl_smp_app_493.clas.abap css z2ui5_cl_smp_app_050 z2ui5_cl_smp_app_050.clas.abap flexbox z2ui5_cl_smp_app_255 z2ui5_cl_smp_app_255.clas.abap","url":"https://abap2ui5.github.io/docs/cookbook/view/definition.html"},{"area":"docs","group":"Cookbook","title":"Nested Views","text":"A nested view in abap2UI5 is a separate XML view fragment that you inject into a placeholder inside another view.","headings":[["The Basic Pattern","the-basic-pattern"],["nest_view_display Parameters","nest-view-display-parameters"],["Independent Re-rendering","independent-re-rendering"],["Master-Detail with FlexibleColumnLayout","master-detail-with-flexiblecolumnlayout"],["Refreshing After Data Changes","refreshing-after-data-changes"],["Two Levels of Nesting","two-levels-of-nesting"],["When to Use Nested Views (and When Not To)","when-to-use-nested-views-and-when-not-to"],["Tips","tips"],["Working Samples","working-samples"]],"terms":"nested views view abap2ui5 separate xml fragment inject placeholder inside another main stays screen rendered later refreshed independently standard pattern master detail screens side panels tab content anywhere want part update without rebuilding whole page know sapui5 https sapui5.hana.ondemand.com sdk topic df8c9c3d6f2a4d728ba7d6f4cb6c6d35 mvc xmlview viewname goal split managed pieces wiring done abap runtime instead referencing static file build tell client plug named slot basic ingredients needed anchor control inserted nest_view_display call builds ships class z2ui5_cl_sample_nest definition public section interfaces z2ui5_if_app data mv_input_nest type string protected private endclass implementation method z2ui5_cl_ui5_view_builder factory ele xmlns sap.m sap.ui.core.mvc shell title test tag button text render press event nest built like input value bind check_on_navigated view_display stringify endif case get val target method_insert addcontent ui5 mutator method_destroy removeallcontent clears first message_toast_display endcase endmethod happens paints sits user clicks calls appears rendering itself run exactly where typing pressing proves halves share model toast reads back bound full everything z2ui5_cl_smp_app_065 parameters parameter meaning produced called add e.g optional removes previous inserting new plain methods pick whichever exposes choice depends aggregation typical vbox generic flexiblecolumnlayout addmidcolumnpage removeallmidcolumnpages addendcolumnpage removeallendcolumnpages addbegincolumnpage removeallbegincolumnpages always pass going replaced over lifetime app otherwise consecutive stack fragments top old ones independent point changed three cover common needs replaces recreated lost nest_view_destroy frontend touching matching view_destroy second nest2_view_display nest2_view_destroy rule thumb layout different controls columns sections flag flipped row added table nothing framework compares pushes difference every shows between options single per real world use list left right sap.f.flexiblecolumnlayout container nests middle column z2ui5_cl_sample_nest_fcl types begin ty_s_row selected abap_bool end t_tab empty key t_tab2 mv_layout onecolumn ref z2ui5_if_client view_display_master view_display_detail abap_true check_on_init order check_on_event selchange ls_row item twocolumnsmidexpanded sap.f begincolumnpages mode singleselectmaster items selectionchange standardlistitem fcl slides was sent above details demo easy leave out sap.m.list defaults none selectable never fires click error under well true once instance help sub returning raises alone branch keeps showing whatever see life cycle cookbook event_navigation life_cycle hits check navigated init editable events close simply reaches response transitions rebuilt samples z2ui5_cl_smp_app_097 sap.ui.table.table sort filter actions z2ui5_cl_smp_app_098 navigation opens refreshing changes lives regardless binding writes root pushed hand sends values roundtrip delete ls_arg handler gone next had ask levels nesting host useful flows level view_display_detail_detail mv_title works targets typically walks through selects action navigates switches threecolumnsendexpanded situation approach visual rates piece drill down canonical panel toggles open closed intact building helper still composition nodes replacing nav_app_call starting keep take parent node children reach clear areas need pay ceremony don tips must unique byid find duplicate ids break lookup provide forgetting causes accumulate initial handlers sites change did push automatic isn again large apps look z2ui5_cl_smp_app_104 loads renders advanced start simpler form z2ui5_cl_smp_app_176 runnable examples covering variation generated scripts link samples.mjs edit working complete sample catalogue github.com blob samples.md describes pull repository abapgit abapgit.org app_start example src z2ui5_cl_smp_app_065.clas.abap embed z2ui5_cl_smp_app_104.clas.abap z2ui5_cl_smp_app_097.clas.abap z2ui5_cl_smp_app_098.clas.abap dynamic z2ui5_cl_smp_app_176.clas.abap","url":"https://abap2ui5.github.io/docs/cookbook/view/nested_views.html"},{"area":"docs","group":"Cookbook","title":"XML Templating","text":"XML Templating is a UI5 preprocessor feature, not an abap2UI5 invention.","headings":[["How It Works","how-it-works"],["template:repeat — Loops","template-repeat-loops"],["The Whole Thing, Runnable","the-whole-thing-runnable"],["template:if / template:then / template:else — Conditionals","template-if-template-then-template-else-conditionals"],["Re-rendering","re-rendering"],["Templating vs ABAP-side Composition","templating-vs-abap-side-composition"],["Tips","tips"],["Working Samples","working-samples"]],"terms":"xml templating ui5 preprocessor feature abap2ui5 invention runtime understands small set instructions template namespace repeat else expands plain control tree created exposes these through fluent builder drive expansion abap data see official references underlying mechanics https sapui5.hana.ondemand.com sdk topic 5ee619fc1370463ea674ee04b65ed83b 512e545ba66f4214ba0de1eb56f319e1 fc185952184c48618ef46306a1517f8c works happens once view instantiation against json model walks evaluates instruction replaces resulting built expanded normal binding takes over timing consequences build time internal table produces fixed number controls renders changes driving existing stays pick change must rebuild view_display templated fragment nest_view_display rendering below wires every variable bind client reachable inside templates via prefix path mt_layout mv_flag engine distinct default used bindings like mt_data loops clones children per row bound list use structure e.g columns depends value fname name merge false visible true date age ele items var column mergeduplicates tag text end columnlistitem cells objectidentifier notes snippet drives loop alias body here headers element needs nothing beyond itself declared root read ends literal string expression daf6852a04b44d118963968a1239d2c0 constructs another becomes standard pattern tables outer builds inner cell right field template_repeat accepts optional attributes startindex length plus extras sorters filters full sample z2ui5_cl_smp_app_173 whole thing runnable fragments above halves press run happen three rows wired class z2ui5_cl_sample_templating definition public section interfaces z2ui5_if_app types begin ty_s_layout type ty_s_row empty key protected private endclass implementation method main check_on_navigated alice bob cleo z2ui5_cl_ui5_view_builder factory mvc xmlns sap.m sap.ui.core.mvc http schemas.sap.com sapui5 extension sap.ui.core.template page title stringify endif endmethod flip gone entirely merely hidden conditionals keeps drops accordingly pair get branch switch test icon core src sap accept color green decline red argument follows rules fine treated boolean convenience richer conditions mv_count elseif supported extra call different attribute point moment without waiting because runs rebuilt take effect strategies simplest apps user toggles flag render again case event change_flag ships endcase fires new flows swaps stable shell screen nested piece z2ui5_cl_smp_app_176 separates inserted val method_insert addcontent targets appends refresh handler left untouched side composition demo dynamic views based part actually situation approach whether exists decided around simpler involved comes computed calling reusable should expand metadata logic layer where driven pass app flow covers cases easier debug reach want live closer patterns mapping style onto tips always registers resolves prefer deeper paths readable lets nest repeats names collisions need expressions concatenate strings assembled update forgot single samples start generated scripts link samples.mjs edit working complete catalogue github.com blob samples.md describes pull repository abapgit abapgit.org app_start dynamically z2ui5_cl_smp_app_173.clas.abap content z2ui5_cl_smp_app_176.clas.abap","url":"https://abap2ui5.github.io/docs/cookbook/view/xml_templating.html"},{"area":"docs","group":"Cookbook","title":"Binding","text":"In abap2UI5 you share data between your ABAP code and the UI5 frontend with client->_bind( ).","headings":[["Displaying Data","displaying-data"],["Editing Data","editing-data"],["Binding to Structures","binding-to-structures"],["Data-Type Mapping","data-type-mapping"],["Working Samples","working-samples"]],"terms":"binding abap2ui5 share data between abap code ui5 frontend client bind works directions value changed editable control framework writes back attribute next event handler runs paths user actually edited transported delta read costs nothing way displaying display e.g text syncs class zcl_app_hello_world definition public section interfaces z2ui5_if_app name type string protected private endclass implementation method main view z2ui5_cl_ui5_view_builder factory ele mvc xmlns sap.m sap.ui.core.mvc page title hello world tag view_display stringify endmethod tables trees nested structures see cookbook model editing input already synced changes enter button post press case get message_box_display return endcase warning bound attributes must resolves outside controller via dynamic assign sees passing local variable silent finds reference raises binding_error found please check values reaches browser shown error compiler cannot catch call takes runtime says exactly wrong always declare resembles pai pbo logic where lived global variables life cycle lifecycle pitfalls event_navigation life_cycle structure refer field directly component selector generates path per upper joined types begin ts_order customer material quantity end edit_row follow rule recursively address city internal use row context item mapping system cross serialized json controls table below travels wire pairs need explicit formatter linked sections show full pattern typical notes length without int8 number returned inputs cast integer decimals decfloat16 decfloat34 sap.ui.model.type.float currency travel written 1234.56 rounding through binary float locale formatting needs prefer monetary avoid drift digits sap.ui.model.odata.type.string isdigitsequence true constraint leading zeros render literally digit sequence char yyyymmdd datepicker sap.ui.model.type.date iso date required hhmmss timepicker sap.ui.model.type.time time abap_bool false checkbox switch maps boolean expression needed flag typed instead timestamp timestampl packed datetimepicker side conversion built reads split convert yyyymmddhhmmss utclong like 21t14 00z formatter.datecreateobject arrives shape new parses formatters ships xstring base64 encoded image fileuploader pdf_viewer auto encode cl_web_http_utility encode_x_base64 cl_http_utility if_http_utility older releases pdf device_capabilities upload download upload_download object individual fields struct array list tree looks fix almost build parts using abap_true inject raw val amount sap.ui.model.type.currency example formatoptions constraints variants samples start generated scripts link samples.mjs edit working complete apps sample catalogue https github.com blob samples.md describes single pull repository abapgit abapgit.org app_start basics z2ui5_cl_smp_app_494 src z2ui5_cl_smp_app_494.clas.abap decimal z2ui5_cl_smp_app_047 z2ui5_cl_smp_app_047.clas.abap includes z2ui5_cl_smp_app_166 z2ui5_cl_smp_app_166.clas.abap cell tab_index z2ui5_cl_smp_app_144 z2ui5_cl_smp_app_144.clas.abap rtti z2ui5_cl_smp_app_061 z2ui5_cl_smp_app_061.clas.abap","url":"https://abap2ui5.github.io/docs/cookbook/model/binding.html"},{"area":"docs","group":"Cookbook","title":"Expression Binding","text":"Expression Binding lets you compute values directly in XML views with JavaScript-like expressions.","headings":[["Calculate the Maximum Value on the Frontend","calculate-the-maximum-value-on-the-frontend"],["Conditionally Set Input Field Editability","conditionally-set-input-field-editability"],["Working Samples","working-samples"]],"terms":"expression binding lets compute values directly xml views javascript like expressions especially handy abap2ui5 since cuts server roundtrips moving calculations logical conditions string operations frontend syntax marks ui5 inside use operators strict equality math.max reference model properties followed path note operator abap needs because these evaluate browser calculate maximum value inputs type integer validation third input uses concatenation produces runtime code result client bind val input31 abap_true raw full input32 class z2ui5_cl_demo_app_max_val definition public section interfaces z2ui5_if_app data protected private endclass implementation method main view z2ui5_cl_ui5_view_builder factory ele mvc xmlns sap.m sap.ui.core.mvc shell page tag label text max first validates resolves sap.ui.model.type.integer computed enabled abap_false view_display stringify endmethod conditionally set field editability property quantity product becomes editable equals exactly z2ui5_cl_demo_editable options see sample z2ui5_cl_smp_app_027 docs https sapui5.hana.ondemand.com sdk topic daf6852a04b44d118963968a1239d2c0 samples start generated scripts link samples.mjs edit working complete apps catalogue github.com blob samples.md describes single pull repository abapgit abapgit.org app_start types composite parts src z2ui5_cl_smp_app_027.clas.abap end","url":"https://abap2ui5.github.io/docs/cookbook/model/expression_binding.html"},{"area":"docs","group":"Cookbook","title":"Formatter","text":"You can format values like currencies, numerics, dates, or booleans directly on the frontend with UI5 type formatters.","headings":[["Currency","currency"],["Digit Sequence","digit-sequence"],["Date","date"],["Time","time"],["Boolean","boolean"],["Timestamp","timestamp"],["The formatters abap2UI5 ships","the-formatters-abap2ui5-ships"],["Full Worked Example","full-worked-example"],["Working Samples","working-samples"]],"terms":"formatter format values like currencies numerics dates booleans directly frontend ui5 type formatters types use special json based binding syntax these key elements parts lists model paths used input e.g amount currency sap.ui.model.type.currency formatoptions optional settings control output constraints applied user parsed back note abap inside string templates escape curly braces because normally denotes embedded expression path abap_true parameter bind returns raw rather full embed array single entry unquoted quotes around yours write backtick delimiter written here survives answers error renders nothing example code client val produces runtime text sections below show pattern needs minimum makes value display parse correctly runnable apps read variants see samples repository https github.com abap2ui5 length decimals plain works worked entries combines locale aware tag common showmeasure false hides symbol shownumber shows preservedecimals trims trailing zeros currencycode iso style short long compact 123m million dollars notation demonstrates app digit sequence sent leading included without render literally odata isdigitsequence true numeric sap.ui.model.odata.type.string strips pads date character yyyymmdd datepicker accepts via mv_date default case explicit sap.ui.model.type.date source matches wire yyyy source.pattern side outer sees time hhmmss sap.ui.model.type.time timepicker mv_time boolean abap_bool travel way framework serializes converts attribute straight directions work checkbox selected mv_flag table row template thing relative warning decides mapping keyed abap_boolean xsdboolean flag xfeld become declared looks identical debugger travels bound stays unchecked problem disappears fix wrong tool twice over compares against cannot box flip even comparison held tip view different question above put xml visible stringified reads non empty abap_false builder linter rule unconverted advanced catches timestamp timestampl packed numbers built practical approaches split break separate fields sending recombine event simplest anyway send convert yyyymmddhhmmss sap.ui.model.type.datetime datetimepicker mv_ts_string conversion happens ts_string helper moves verbatim custom third option neither fits ships covers property cover wants javascript object datepicker.datevalue planningcalendarappointment.startdate physically carry small curated module public contract z2ui5 published z2ui5.formatter global releases core require load once root name datevalue formatter.dateabapdatetodateobject takes dateabapdatetodateobject midnight local dateabapdatetimetodateobject may omitted datecreateobject anything constructor parses utclong expandinlineicons formatted carrying icon sap placeholders theme glyphs inlined messagestrip initial yields null never invalid matters sounds truthy fails much later sap.ui.unified calendar throws every rendered day whole down means field instead grows through pull requests goes required z2ui5_cl_smp_app_457 z2ui5_cl_smp_app_456 planningcalendar class patterns variant listed under z2ui5_cl_smp_app_067 definition section interfaces z2ui5_if_app data check_initialized protected private endclass implementation method main 123456789.123 usd endif get nav_app_leave get_app s_draft id_prev_app_stack button roundtrip point edited server come again message_toast_display endcase z2ui5_cl_ui5_view_builder factory ele mvc xmlns sap.m sap.ui.core.mvc form sap.ui.layout.form shell page title navbuttonpress shownavbutton xsdbool simpleform editable content label documentation link sdk.openui5.org api href press end remove formatting tells treat resolves 23methods formatvalue view_display stringify endmethod copy sample start generated scripts samples.mjs edit working complete catalogue blob samples.md describes abapgit abapgit.org app_start amounts src z2ui5_cl_smp_app_067.clas.abap strings dats tims z2ui5_cl_smp_app_450 z2ui5_cl_smp_app_450.clas.abap z2ui5_cl_smp_app_457.clas.abap objects z2ui5_cl_smp_app_456.clas.abap inline icons z2ui5_cl_smp_app_466 z2ui5_cl_smp_app_466.clas.abap compute z2ui5_cl_smp_app_453 z2ui5_cl_smp_app_453.clas.abap","url":"https://abap2ui5.github.io/docs/cookbook/model/formatter.html"},{"area":"docs","group":"Cookbook","title":"Tables","text":"This section walks through rendering tabular and nested data in views.","headings":[["Basic Table","basic-table"],["Editable","editable"],["Nested Structures","nested-structures"],["Working Samples","working-samples"]],"terms":"tables section walks through rendering tabular nested data views basic table example below binds simple ui5 control abap class z2ui5_cl_sample_tab definition public interfaces z2ui5_if_app types begin ty_row count type value string descr end mt_itab standard empty key protected private endclass implementation method main client check_on_navigated times insert index red description enddo view z2ui5_cl_ui5_view_builder factory ele mvc xmlns sap.m sap.ui.core.mvc page items bind columns column tag text columnlistitem cells view_display stringify endif endmethod editable make use cell controls e.g input binding structures structure component path z2ui5_cl_sample_nested_struc ty_s_tab product s_details create_date create_by 01.01.2023 peter chair 25.10.2022 frank sofa 12.03.2024 george created abap2ui5lint disable next line unknown linter defect fixed abap2ui5 0.2.0 inside row was dropped delete pin bump correct goes samples start generated scripts link samples.mjs edit working complete apps sample catalogue https github.com blob samples.md describes single pull repository abapgit abapgit.org app_start add rows z2ui5_cl_smp_app_011 src z2ui5_cl_smp_app_011.clas.abap selection modes multi select z2ui5_cl_smp_app_019 z2ui5_cl_smp_app_019.clas.abap large growing scrollcontainer z2ui5_cl_smp_app_006 z2ui5_cl_smp_app_006.clas.abap filter backend z2ui5_cl_smp_app_045 z2ui5_cl_smp_app_045.clas.abap search searchfield z2ui5_cl_smp_app_053 z2ui5_cl_smp_app_053.clas.abap live parallel requests z2ui5_cl_smp_app_059 z2ui5_cl_smp_app_059.clas.abap full sap.ui.table z2ui5_cl_smp_app_070 z2ui5_cl_smp_app_070.clas.abap events level z2ui5_cl_smp_app_160 z2ui5_cl_smp_app_160.clas.abap keep filters refresh z2ui5_cl_smp_app_143 z2ui5_cl_smp_app_143.clas.abap drag drop z2ui5_cl_smp_app_459 z2ui5_cl_smp_app_459.clas.abap","url":"https://abap2ui5.github.io/docs/cookbook/model/tables.html"},{"area":"docs","group":"Cookbook","title":"Trees","text":"For hierarchical data, abap2UI5 uses nested ABAP structures to represent tree levels.","headings":[["Tree","tree"],["Working Samples","working-samples"]],"terms":"trees hierarchical data abap2ui5 uses nested abap structures represent tree levels level holds table child nodes ui5 traverses build expandable control define type hierarchy where node contains next class z2ui5_cl_sample_tree definition public section interfaces z2ui5_if_app types begin ty_prodh_node_level3 is_selected abap_bool text string prodh end ty_prodh_node_level2 standard default key ty_prodh_node_level1 ty_prodh_nodes prodh_nodes protected private endclass implementation method main value machines pumps pump paints gloss paint view z2ui5_cl_ui5_view_builder factory ele mvc xmlns sap.m sap.ui.core.mvc page items client bind tag standardtreeitem selected title view_display stringify endmethod field example above follows name locate sub must match across anything choose note binds editable user selection synced back display needs cells samples start generated scripts link samples.mjs edit working complete apps sample catalogue https github.com blob samples.md use describes single pull repository abapgit abapgit.org app_start sap.m.tree z2ui5_cl_smp_app_460 src z2ui5_cl_smp_app_460.clas.abap drag drop z2ui5_cl_smp_app_461 z2ui5_cl_smp_app_461.clas.abap inside dialog z2ui5_cl_smp_app_462 z2ui5_cl_smp_app_462.clas.abap customtreeitem z2ui5_cl_smp_app_463 z2ui5_cl_smp_app_463.clas.abap","url":"https://abap2ui5.github.io/docs/cookbook/model/trees.html"},{"area":"docs","group":"Cookbook","title":"Device Model","text":"abap2UI5 offers two ways to access device information: directly in the view via the UI5 device model (frontend), or in ABAP logic via client->get( )-s_device (backend).","headings":[["Frontend","frontend"],["Backend","backend"],["Both Together","both-together"],["Working Samples","working-samples"]],"terms":"device model abap2ui5 offers ways access information directly view via ui5 frontend abap logic client get s_device backend default binds under name use standard binding syntax show properties roundtrip needed tag input description resize width value parameters see docs https sapui5.hana.ondemand.com sdk api sap.ui.device need e.g adapt behavior based browser screen size read custom control extra event shipped every data system desktop phone tablet orientation landscape portrait chrome brw_version version win mac ios android os_version current viewport height touch support pointer retina together press run top half reads straight bottom taken class z2ui5_cl_sample_device definition public section interfaces z2ui5_if_app mv_system type string mv_browser mv_size protected private endclass implementation method main check_on_navigated z2ui5_cl_ui5_view_builder factory ele mvc xmlns sap.m sap.ui.core.mvc form sap.ui.layout.form page title simpleform editable abap_true content label text end bind view_display stringify endif endmethod updates window resized snapshot built samples start generated scripts link samples.mjs edit working complete apps sample catalogue github.com blob samples.md describes single pull repository abapgit abapgit.org app_start z2ui5_cl_smp_app_445 src z2ui5_cl_smp_app_445.clas.abap","url":"https://abap2ui5.github.io/docs/cookbook/model/device_model.html"},{"area":"docs","group":"Cookbook","title":"Size Limit","text":"Every UI5 JSON model has a built-in upper limit on the number of items it will expose to a list binding.","headings":[["Set the Limit","set-the-limit"],["Reset the Limit","reset-the-limit"],["Complete Example","complete-example"],["Other Views","other-views"],["Working Samples","working-samples"]],"terms":"size limit every ui5 json model built upper number items expose list binding default bind combobox table aggregation contains entries first rendered rest silently dropped design decision documented under sap.ui.model.model setsizelimit https sapui5.hana.ondemand.com sdk api 23methods abap2ui5 exposes setting through client event set_size_limit raise reset per view directly abap set trigger controller follow_up_action argument new second key use constants cs_view main nested nested2 popup popover stay type safe underlying values nest nest2 val z2ui5_if_client cs_event t_arg value call bound accepts remembered across roundtrips once raised stays effect until leave app restore omit pass complete example snippet below shows filled without raising dropdown stop item small form lets user adjust runtime class z2ui5_cl_sample_size_limit definition public section interfaces z2ui5_if_app types begin ty_s_combo string text end data t_combo standard empty mv_size_limit mv_combo_number protected private endclass implementation method case get update_limit conv message_toast_display updated return update_model times insert index enddo endcase z2ui5_cl_ui5_view_builder factory ele mvc xmlns sap.m sap.ui.core.mvc core sap.ui.core sap.ui.layout.form page title demo simpleform settings editable abap_true content tag label input button update press view_display stringify endmethod views applies popups popovers swap warning share control tree inherit propagation lands shared largest three wins raises resetting changes nothing while still asks back tip high actually need large bindings increase memory consumption frontend slow down rendering datasets prefer server side pattern odata growing paging filtering instead pushing everything runnable sample see z2ui5_cl_smp_app_071 samples repository github.com start generated scripts link samples.mjs edit working apps catalogue blob samples.md describes single pull abapgit abapgit.org app_start tables src z2ui5_cl_smp_app_071.clas.abap","url":"https://abap2ui5.github.io/docs/cookbook/model/size_limit.html"},{"area":"docs","group":"Cookbook","title":"Life Cycle","text":"Every request enters the main method. CASE abap_true dispatches between initialization, navigation returns, and user events using client->check_on_init( ) , client->check_on_event( EVENT_NAME ) , and client->check_on_...","headings":[["Lifecycle Pitfalls","lifecycle-pitfalls"],["Bound Attributes Must Be Public","bound-attributes-must-be-public"],["The View Is Only Sent When You Call view_display","the-view-is-only-sent-when-you-call-view-display"],["Returning From a Sub-App Hits check_on_navigated, Not check_on_init","returning-from-a-sub-app-hits-check-on-navigated-not-check-on-init"],["check_on_event Fires Once Per Roundtrip","check-on-event-fires-once-per-roundtrip"],["Working Samples","working-samples"]],"terms":"life cycle every request enters main method case abap_true dispatches between initialization navigation returns user events using client check_on_init check_on_event event_name check_on_navigated branch either work inline tiny apps calls named handler typical structure always abap class z2ui5_cl_demo_app_001 definition public section interfaces z2ui5_if_app state binding works see lifecycle pitfalls below data value type string protected ref z2ui5_if_client methods view_display on_post private endclass implementation world time setup first screen back sub app help hand view post endcase endmethod z2ui5_cl_ui5_view_builder factory ele mvc xmlns sap.m sap.ui.core.mvc page title tag input bind button text press event stringify message_toast_display received whether dispatch above equivalent elseif chain hello get_started hello_world steps walkthrough tutorials matter taste counts three things make recommended shape store use without passing around name rather generic get second level gets many extracted form fine alternative last step uses display per called should rebuild must return comes through handlers mutate reuse existing inside popup toast skip sent call alphabetical order means instance never run path raises navigated flag well exclusive where matching wins putting swallows roundtrip init runs directly branches entirely shows variant full version multiple persistence follow pattern amount code differs few details easy miss produce bugs look like framework issues actually mistakes none enforced compiler unreported runtime bound attributes anything passed live binds via dynamic assign cannot reported fails binding_error attribute found helper variables appear stay rationale cookbook model abap2ui5 render automatically again frontend keeps previous tree updated serialized common leaving alone needs change different controls bindings new dialog rebuilding sending wasteful cause visible flicker lost scroll position focus returning hits exactly once fire control nav_app_call fullscreen closed nav_app_leave signalled trips build under wrong blank open_popup left neither nor matches looking stale empty nothing reports response simply carries browser showing whatever was covers strictly along closing bookmarked draft being restored react drop correct rebuilt reserve repeat loading initial setting defaults keep sample top specific general come fork whose four lines saying says rule thumb needed show belongs fires http single clicks buttons quick succession independent invocations batched consequences assume ordering within ran separate process been released since across lives serializes whole stores server row z2ui5_t_01 expires hours default survives visibility reach alive unbound working therefore bloated makes serialize survive serializer write local open cursors acquired locks references classes serializable sessions need surviving side resources statefulness expert_more samples start generated scripts link samples.mjs edit complete catalogue https github.com blob samples.md describes pull repository abapgit abapgit.org app_start basics iii z2ui5_cl_smp_app_495 src z2ui5_cl_smp_app_495.clas.abap views roundtrips z2ui5_cl_smp_app_004 z2ui5_cl_smp_app_004.clas.abap end","url":"https://abap2ui5.github.io/docs/cookbook/event_navigation/life_cycle.html"},{"area":"docs","group":"Cookbook","title":"Backend","text":"UI5 control properties can both display data and fire events.","headings":[["Basic","basic"],["Source","source"],["Parameters","parameters"],["Event","event"],["Model Properties","model-properties"],["Working Samples","working-samples"]],"terms":"backend ui5 control properties display data fire events run logic event fires use client method basic example press property button assign result my_event_name matching read details get abap z2ui5_if_app main view z2ui5_cl_ui5_view_builder factory ele mvc xmlns sap.m sap.ui.core.mvc page tag text post button_post view_display stringify case message_box_display was pressed endcase endmethod needs t_arg parameter add extra info three prefixes available source fired e.g returns parameters defined element object itself sid type like note unlike written without wrapper leading see section below docs handler arguments https openui5.hana.ondemand.com topic b0fb4de7364f4bcbb053a99aa645affe sample z2ui5_cl_smp_app_167 send syntax reads here returning label val value get_event_arg out map builds qualified mainview button_id specific attribute name because directly references warning public released attributes avoid compatibility issues future versions model bound class z2ui5_cl_app_hello_world definition interfaces string protected private endclass implementation input bind tip demo reading easier framework updates automatically samples start generated scripts link samples.mjs edit working complete apps catalogue github.com abap2ui5 blob samples.md describes single pull repository abapgit abapgit.org app_start src z2ui5_cl_smp_app_167.clas.abap objects facetfilter z2ui5_cl_smp_app_197 z2ui5_cl_smp_app_197.clas.abap end","url":"https://abap2ui5.github.io/docs/cookbook/event_navigation/backend.html"},{"area":"docs","group":"Cookbook","title":"Frontend","text":"If you don't want to handle the event in the backend, fire actions directly on the frontend.","headings":[["The two positions","the-two-positions"],["The frontend events","the-frontend-events"],["Calling control methods on the frontend","calling-control-methods-on-the-frontend"],["Element-binding a view slot: bind_element","element-binding-a-view-slot-bind-element"],["The view parameter","the-view-parameter"],["Raw JavaScript","raw-javascript"],["Why It Is a Security Risk","why-it-is-a-security-risk"],["Safer Alternatives","safer-alternatives"],["How It Works (If You Still Need It)","how-it-works-if-you-still-need-it"],["Embedding JavaScript Directly in an XML View","embedding-javascript-directly-in-an-xml-view"],["Working Samples","working-samples"]],"terms":"frontend don want handle event backend fire actions directly difference between styles client causes roundtrip runs main method follow_up_action action browser call positions position decides either way val t_arg view learn attribute result string consumed value wired control user presses never hears click abap tag button text reload press cs_event location_reload takes arguments needs passed positionally here statement scheduled instead once response arrives i.e work done follow name finish handler thing case get save message_toast_display saved set_title invoice mv_id endcase neither form special events available everything table below pick happen z2ui5_if_client carries constants begin framework popup_close type popover_close set_size_limit set_odata_model cross_app_nav_to_ext cross_app_nav_to_prev_app clipboard_copy set_title_launchpad set_favicon set_focus scroll_to scroll_into_view start_timer keyboard_set_mode keyboard_shortcut open_new_tab system_logout download_b64_file urlhelper store_data play_audio calls positional control_by_id control_global binding_call bind_element smart controls sap.ui.comp smart_variant_init filter_bar_variant_init url app state hash family named ui5 sap core routing hashchanger hash_set set_push_state hash_replace hash_back hash_attach_changed hash_routing set_nav_routing app_state_set_active set_app_state_active end these pages cookbook browser_interaction keyboard_shortcuts binds key combinations event_navigation navigation puts fragment under router expert_more smart_controls wire variant management dedicated interaction title device capabilities device_capabilities upload_download carry argument list example open new tab involved z2ui5_if_app data z2ui5_cl_ui5_view_builder factory ele mvc xmlns sap.m sap.ui.core.mvc page https github.com abap2ui5 view_display stringify endmethod calling methods fixed built operate global object binding whole slot empty filled ones keeps params resolved message_toast message_box busy_indicator theming popup invisible_message formatting aggregation e.g filter path operator value1 value2 sort descending group index bind element row see public callable long denylist break invariants destroying views rendering detaching handlers blocked ordinary setters toggles setvisible toggleby enablepostbutton simply small set additionally cased typed remain strict whitelists listed objects three those less obvious rest setwithinarea confines every window 1.89 releases again announce reads out screen reader without 1.78 mode setcustomcurrencies addcustomcurrency register currency codes standard sap.ui.model.type.currency know 1.120 replaces registration add adds code toggle messagepopover anchored pressing msgpopover source identical processing advance wizard step wiz setnextstep step2 popover bound equivalent ocontrol.bindelement relative bindings category nested aggregations resolve against selected detail copied t_product cs_view parameter selects z2ui5_cl_smp_app_470 samples repository complete looked separate default scopes lookup omit pass across scoped hosted living inside lives navcon parameters selectedkey warning migrated used second entry now importing injects itself older examples still longer extra shifts fails drop use ignores always resolves above raw javascript expression myfunction applies content plain becomes anything containing syntax verbatim recommended strongly discouraged injecting arbitrary introduces serious security risks fully understand consequences alternative why risk custom works sending where injected dom html script executed pattern essentially self inflicted cross site scripting xss vector breaks several assumptions normally protects bypasses output encoding escapes model prevent injection sidesteps protection entirely executes full privileges origin read cookies session tokens access send anywhere dynamic dangerous part input database values translations non static sources attacker execute policy csp effective defenses typically forbids inline scripts forces weaken disable removing hard audit assembled strings covered linters analysis review tools catch patterns sandboxing network isolation boundary safer alternatives reaching consider interactions already apis build proper advanced extensibility custom_control defined interface reviewable clipboard focus scrolling timer handling url_handling similar need accept decide anyway idea function later fires definition renders check_on_navigated sap.ui.core travels builder literal markup written console.log hello world custom_js endif danger inject untrusted must ensure hardcoded concatenate translatable texts doing turns feature direct vulnerability embedding xml considerations apply embedded prefer look hand craft produces placed namespace alongside regular stringified ends looking like http www.w3.org xhtml parses render time globally triggered via ideally replaced exactly shown approaches ship described unless genuinely start generated link samples.mjs edit working apps sample catalogue blob samples.md describes single class pull abapgit abapgit.org app_start preventdefault z2ui5_cl_smp_app_472 src z2ui5_cl_smp_app_472.clas.abap z2ui5_cl_smp_app_470.clas.abap expand panel setexpanded z2ui5_cl_smp_app_448 z2ui5_cl_smp_app_448.clas.abap switch navcontainer z2ui5_cl_smp_app_088 z2ui5_cl_smp_app_088.clas.abap steps z2ui5_cl_smp_app_202 z2ui5_cl_smp_app_202.clas.abap pdf viewer z2ui5_cl_smp_app_449 z2ui5_cl_smp_app_449.clas.abap z2ui5_cl_smp_app_465 z2ui5_cl_smp_app_465.clas.abap","url":"https://abap2ui5.github.io/docs/cookbook/event_navigation/frontend.html"},{"area":"docs","group":"Cookbook","title":"Inner App","text":"Navigation inside one abap2UI5 deployment: switching screens within a class, and calling one of your app classes from another.","headings":[["Within One Class","within-one-class"],["Between App Classes","between-app-classes"],["The Whole Stack in One Class","the-whole-stack-in-one-class"],["Working Samples","working-samples"]],"terms":"inner app navigation inside abap2ui5 deployment switching screens within class calling classes another everything here runs through backend stack never leaves page launchpad hear navigating between fiori apps different mechanism cross cookbook event_navigation cross_app single abap pack logic keeping reasonable size better practice splitting functionality multiple interacting lets build reusable popups work contexts use attributes track current state switch views needed flag enum like string step number decides view view_display builds event handlers move along keeps involved call return nothing unwind reach whenever share data over internal table branches method z2ui5_if_app main lo_app new z2ui5_cl_new_app client nav_app_call endmethod framework newly called previous nav_app_leave read cast check_on_navigated lo_called_app get_app_prev message_box_display input made mv_input endif warning display took screen browser still shows restore automatically again branch survived roundtrip serialization must rendered see life cycle life_cycle returning sub hits check navigated init instance works differently starts given without pushing onto navigate forward while discarding tip sounds familiar echoes classic leave behavior whole calls itself runnable piece press run walk down back z2ui5_cl_sample_stack definition public section interfaces mv_level type mv_note protected private endclass implementation coming above left lo_prev bound level z2ui5_cl_ui5_view_builder factory ele mvc xmlns sap.m sap.ui.core.mvc title tag text bind button deeper caller enabled check_app_prev_stack stringify elseif check_on_event lo_next greys out bottom drops user default enable hash routing follow_up_action cs_event hash_routing couple buttons make bookmarkable samples start generated scripts link samples.mjs edit working complete sample catalogue https github.com blob samples.md describes pull repository abapgit abapgit.org app_start z2ui5_cl_smp_app_024 src z2ui5_cl_smp_app_024.clas.abap events z2ui5_cl_smp_app_488 z2ui5_cl_smp_app_488.clas.abap loss protection leaving z2ui5_cl_smp_app_279 z2ui5_cl_smp_app_279.clas.abap end","url":"https://abap2ui5.github.io/docs/cookbook/event_navigation/navigation/inner_app.html"},{"area":"docs","group":"Cookbook","title":"Cross App","text":"Navigation out of your app and into another Fiori app, and back.","headings":[["Am I in a Launchpad?","am-i-in-a-launchpad"],["Navigating to Another App","navigating-to-another-app"],["Arriving From Another App","arriving-from-another-app"],["Setting the Shell Title","setting-the-shell-title"]],"terms":"cross app navigation out another fiori back launchpad abap2ui5 goes through flp shell history button contract keep working inner cookbook event_navigation inner_app direction calling classes never leaves page hears applies inside served navigate see configuration gets first place client get check_launchpad_active answers guards everything abap abap_true available endif navigating fire cross_app_nav_to_ext target intent semantic object action exactly optionally parameters route backend roundtrip lose track where user tag text press follow_up_action val cs_event t_arg value semanticobject z2ui5_cl_lp_sample_04 display bind nav_params second argument carries binding structure rather writing values string means read model time whatever entered came cross_app_nav_to_prev_app ordinary frontend events work positions every event wired control above statement main should follow arriving mapping start url arrive name pairs data lt_params t_comp_params lv_product product optional check_on_init branch describe instance change over life setting title bar write point z2ui5_if_client set_title_launchpad invoice set_title writes browser tab instead browser_interaction usually want calls","url":"https://abap2ui5.github.io/docs/cookbook/event_navigation/navigation/cross_app.html"},{"area":"docs","group":"Cookbook","title":"Hash","text":"The URL hash is one string, and in abap2UI5 exactly one thing may own it at a time.","headings":[["Framework routing","framework-routing"],["Enabling routing","enabling-routing"],["Routing modes","routing-modes"],["Navigating by route","navigating-by-route"],["App-owned routing","app-owned-routing"],["Stepping back","stepping-back"],["Which One to Pick","which-one-to-pick"],["Working Samples","working-samples"]],"terms":"hash url string abap2ui5 exactly thing may time three candidates picking between page owner turned reads framework router cs_event hash_routing app class route per stack hash_attach_changed whatever write hash_set detail state naming client app_state_set_active current see cookbook event_navigation navigation app_state additive writes second takes first meaning away decide once tip names follow ui5 everything touches fragment named sap core routing hashchanger sethash hash_replace replacehash attachhashchanged hash_back onnavback pattern nav keeps real apps carries default leaves untouched browser back forward buttons navigate instead moving based style mirrors running bookmarkable drive server side enabling enable follow_up_action typically launcher check_on_init branch abap method z2ui5_if_app main empty t_arg means cs_nav_mode keep view_display endif endmethod mode belongs like manifest remembers sends whenever frontend still hold load restore hop call enough called nav_app_call inherits caller leak lands never asked turns tracking off again leaving routed plain longer stale draft address bar enabled another pushes new history entry equivalent navto button returns calling modes decides much therefore reload bookmark restores behavior feature fresh starts clean instance preserved input exact restored user falling start expired always restart val value left advanced saved during pressing including every bound changed since last render traveled backend triggering event warning expiry routes carry draft_exp_time_in_hours exits extensibility user_exits falls enters through check_on_navigated restoring loads runs true stays false already exists everywhere else view life cycle life_cycle returning sub hits check navigated init renders answers without showing previous screen press onto appears nothing applies reachable pages ever entered via navigating separate z2ui5_cl_new_app owned gives several screens list wizard flexiblecolumnlayout wants those while switching inside rather restarting anything gets semantics register name registration dies switch assert hash_changed owns whole alone code pushed step take abap_true skips consumed change did itself manual edit deep link fires registered now stands rides along request case get_event routematched show get s_config check_detail others abap_false endcase because arrives cold shared read follows simply boot why works extra stepping guards way recommended hand fallback navbuttonpress normally window.history.go resulting round trips somebody opened directly fall out entirely written replace was listener suffix predates original appended being amp doing registering makes reach complete example sample z2ui5_cl_smp_app_499 table below uses pick question should nav_app_leave become walk plus neither claims prefer fine grained states samples generated scripts samples.mjs working catalogue https github.com blob samples.md use describes single pull repository abapgit abapgit.org app_start z2ui5_cl_smp_app_468 src z2ui5_cl_smp_app_468.clas.abap z2ui5_cl_smp_app_480 z2ui5_cl_smp_app_480.clas.abap z2ui5_cl_smp_app_499.clas.abap end","url":"https://abap2ui5.github.io/docs/cookbook/event_navigation/navigation/hash.html"},{"area":"docs","group":"Cookbook","title":"App State","text":"A link that restores an app exactly as it stands ","headings":[["A Complete App","a-complete-app"],["Handing the Link to Somebody","handing-the-link-to-somebody"],["What the Link Restores","what-the-link-restores"],["Bookmarking","bookmarking"],["App State or a Route?","app-state-or-a-route"],["Working Samples","working-samples"]],"terms":"app state link restores exactly stands every value user typed row selected tab opened was thing standard ui5 sap xapp client app_state_set_active puts current url advanced roundtrip abap method z2ui5_if_app main check_on_navigated view_display endif endmethod carries reload bookmark pasted somebody else browser comes back abap_false switches tracking off again example z2ui5 app_start z2ui5_cl_smp_app_004 024251849e5a1edfb1dae2c97c8ce8c2 nothing extra stored draft framework already persists between roundtrips statefulness cookbook expert_more describes container where keep hash server side key pointing cost changes limit lifetime once expires draft_exp_time_in_hours exits extensibility user_exits four hours default longer anything complete class z2ui5_cl_sample_app_state definition public section interfaces data mv_quantity type string protected private endclass implementation view z2ui5_cl_ui5_view_builder factory ele mvc xmlns sap.m sap.ui.core.mvc page tag label text quantity input bind button post press event button_post stringify case get message_toast_display updated adjusted endcase something watch address bar advances screen written handing app_state_get_href returns absolute composed backend owns copy show select mail render code z2ui5_cl_sample_share abap_true shell share check_on_event follow_up_action val z2ui5_if_client cs_event clipboard_copy t_arg clipboard copied launchpad safe survives recipient opening fiori lands instead home tip costs usually want calls normal useful shape whatever saved worth sharing shown well sends first request loads see sender saw values selection because holds carry read outside itself runs restore list refreshed rather frozen authorizations grants did warning restored enters through true check_on_init stays false instance existed made display branch opens showing covers start condition rule everywhere life cycle event_navigation life_cycle returning sub hits check navigated init claims writes routing three use per navigation bookmarking works keeps behind configurable time older service https github.com abap2ui5 blob src z2ui5_cl_ui5_srv_draft.clas.abap source exit route answer different questions difference mode fresh started clean stack left owned inside names exact follows reach meant handed samples generated scripts samples.mjs edit working apps sample catalogue samples.md single pull repository abapgit abapgit.org z2ui5_cl_smp_app_498 z2ui5_cl_smp_app_498.clas.abap end","url":"https://abap2ui5.github.io/docs/cookbook/event_navigation/navigation/app_state.html"},{"area":"docs","group":"Cookbook","title":"Exception","text":"An exception that escapes your main method is not caught anywhere near your app.","headings":[["What Happens When One Escapes","what-happens-when-one-escapes"],["Handling It Yourself","handling-it-yourself"],["When It Is Not an Exception at All","when-it-is-not-an-exception-at-all"],["Working Samples","working-samples"]],"terms":"exception escapes main method caught anywhere near app abap2ui5 lets travel exactly top level catch z2ui5_cl_ui5_http_handler everything framework errors happens knowing path page behaviour whether came out code wrong name url roundtrip ends http view displayed model pushed unless sticky database work rolled back response body sap error handler puts whole chain entry class message source position attributes because diagnostic survives nothing else records browser shows fatal overlay reads application please restart short preview offers details copy full text refresh logout start over drawn raw dom rather ui5 controls still appears failure left core itself unusable continue design carried next state failed screen longer matches anything server user restarts draft bookmarked comes where was dump reaches way instead strips down carries assert raise new cx_sy_itab_line_not_found look nearly identical front differ much detail arrives abap z2ui5_if_app uncaught endmethod warning default meant turned off rtti ddic names positions system context developer needs production should hand hardened installation switches exit advanced extensibility user_exits set check_hide_error_details set_config_http_post becomes bare internal while stays handling yourself above fallback reaching means lost predict division zero conversion locked object service better shown costs z2ui5_cl_sample_exception definition public section interfaces protected private endclass implementation client check_on_navigated data z2ui5_cl_ui5_view_builder factory ele mvc xmlns sap.m sap.ui.core.mvc title tag button divide press event view_display stringify elseif check_on_event try lv_val cx_root message_box_display endtry endif takes directly see cookbook translation_messages bapiret root bapi return table carry difference things worth catching even cannot inside loop bad row cost ninety nine write since between building displaying leaves previous explanation large failures raises binding typo control know aggregation rejects child succeeds valid simply empty half rendered showing stale value applies those common troubleshooting common_failures run linter written defect eml specific reported transactional behavior cx_abap_behv cx_abap_lock_failure defensive patterns eml_cds_sql samples generated scripts link samples.mjs edit working complete apps sample catalogue https github.com blob samples.md use describes single pull repository abapgit abapgit.org app_start messagebox bapiret2 z2ui5_cl_smp_app_008 src z2ui5_cl_smp_app_008.clas.abap popup z2ui5_cl_smp_app_464 z2ui5_cl_smp_app_464.clas.abap end","url":"https://abap2ui5.github.io/docs/cookbook/event_navigation/exception.html"},{"area":"docs","group":"Cookbook","title":"Popup","text":"UI5 offers popups that overlay specific parts of the view.","headings":[["General","general"],["Flow Logic","flow-logic"],["Separated App","separated-app"],["Working Samples","working-samples"]],"terms":"popup ui5 offers popups overlay specific parts view section walks through building abap2ui5 general show call client popup_display instead view_display abap method z2ui5_if_app main data z2ui5_cl_ui5_view_builder factory ele fragmentdefinition core xmlns sap.m sap.ui.core dialog title info tag text information shown stringify endmethod flow logic typical shows normal opens finally closes structure like check_on_navigated mvc sap.ui.core.mvc page button rendering background press event popup_open endif case get close popup_close popup_destroy endcase lifecycle renders xml changed needs neither framework pushes delta already rendered response separated app cleaner source layout put class via navigation cookbook event_navigation inner_app ordinary displays slot ends handing control back z2ui5_cl_sample_confirm definition public interfaces mv_question type string mv_confirmed abap_bool protected private endclass implementation abap_true please confirm bind buttons cancel check_on_event nav_app_leave abap_false caller sets question hands instance nav_app_call reads answer off returns delete new entry lo_prev cast get_app_prev bound delete_entry things carry whole pattern attribute reaches nothing passed events ready made set these select ranges file download dozen add https github.com addons versioned handle multiple stacked note time frontend keep stack backend display previous needed see z2ui5_cl_smp_app_161 samples start generated scripts link samples.mjs edit working complete apps sample catalogue blob samples.md use describes single pull repository abapgit abapgit.org app_start ways open z2ui5_cl_smp_app_012 src z2ui5_cl_smp_app_012.clas.abap value help suggestions z2ui5_cl_smp_app_009 z2ui5_cl_smp_app_009.clas.abap inside z2ui5_cl_smp_app_161.clas.abap navigate between dialogs navcontainer z2ui5_cl_smp_app_170 z2ui5_cl_smp_app_170.clas.abap element binding selected row z2ui5_cl_smp_app_470 z2ui5_cl_smp_app_470.clas.abap end","url":"https://abap2ui5.github.io/docs/cookbook/popup_popover/popup.html"},{"area":"docs","group":"Cookbook","title":"Popover","text":"To show a popover, call client->popover_display and pass the ID of the control the popover should attach to:","headings":[["Working Samples","working-samples"]],"terms":"popover show call client popover_display pass control should attach abap class z2ui5_cl_sample_popover definition public section interfaces z2ui5_if_app protected private endclass implementation method main check_on_navigated data view z2ui5_cl_ui5_view_builder factory ele mvc xmlns sap.m sap.ui.core.mvc shell page title example tag button test text display press event popover_open view_display stringify endif case get fragmentdefinition core sap.ui.core placement left my_id close popover_close xml by_id popover_destroy endcase endmethod like popups picks changed values framework compares model pushes difference open without rendering handler changes nothing else samples start generated scripts link samples.mjs edit working complete apps sample catalogue https github.com abap2ui5 blob samples.md use describes single pull repository abapgit abapgit.org app_start basic z2ui5_cl_smp_app_026 src z2ui5_cl_smp_app_026.clas.abap table row z2ui5_cl_smp_app_052 z2ui5_cl_smp_app_052.clas.abap select list z2ui5_cl_smp_app_081 z2ui5_cl_smp_app_081.clas.abap quickview contact card z2ui5_cl_smp_app_109 z2ui5_cl_smp_app_109.clas.abap toggle toggleby z2ui5_cl_smp_app_465 z2ui5_cl_smp_app_465.clas.abap together build z2ui5_cl_smp_app_490 z2ui5_cl_smp_app_490.clas.abap end","url":"https://abap2ui5.github.io/docs/cookbook/popup_popover/popover.html"},{"area":"docs","group":"Cookbook","title":"Message","text":"Showing messages is an everyday task for ABAP developers.","headings":[["Message Toast","message-toast"],["Message Box","message-box"],["SY, BAPIRET, CX_ROOT","sy-bapiret-cx-root"],["All of Them in One App","all-of-them-in-one-app"],["More Than One Message at a Time","more-than-one-message-at-a-time"],["Working Samples","working-samples"]],"terms":"message showing messages everyday task abap developers functions below cover common cases toast brief notifications like success confirmations use method z2ui5_if_app main client message_toast_display endmethod box user needs acknowledge show must close message_box_display error change type text bapiret cx_root pass structures objects variables straight these net number data lv_dummy lt_bapiret standard table bapiret2 call function bapi_user_get_detail exporting username uname tables return try lv_val catch endtry framework accepts inputs structure shows app fragments above press run see whole family single class z2ui5_cl_sample_message definition public section interfaces protected private endclass implementation check_on_navigated view z2ui5_cl_ui5_view_builder factory ele mvc xmlns sap.m sap.ui.core.mvc page title tag button event exception exc view_display stringify elseif check_on_event endif time takes set bapi log result validation flattens lines logging sources reads something richer list sortable severities long texts build take ready made dialog popups add https github.com abap2ui5 addons tip improvements evolve open issue hit errors incompatibilities submit extend samples start generated scripts link samples.mjs edit working complete apps sample catalogue blob samples.md describes pull repository abapgit abapgit.org app_start messagetoast duration z2ui5_cl_smp_app_381 src z2ui5_cl_smp_app_381.clas.abap messagebox types custom actions z2ui5_cl_smp_app_382 z2ui5_cl_smp_app_382.clas.abap z2ui5_cl_smp_app_008 z2ui5_cl_smp_app_008.clas.abap messageview messagepopover z2ui5_cl_smp_app_452 z2ui5_cl_smp_app_452.clas.abap model messagemanager z2ui5_cl_smp_app_467 z2ui5_cl_smp_app_467.clas.abap url policy z2ui5_cl_smp_app_474 z2ui5_cl_smp_app_474.clas.abap end","url":"https://abap2ui5.github.io/docs/cookbook/translation_messages/message.html"},{"area":"docs","group":"Cookbook","title":"Logging","text":"Logging is critical for business processes.","headings":[["BAL Tables","bal-tables"],["ABAP Cloud","abap-cloud"],["abap-logger","abap-logger"],["BAL Logs","bal-logs"]],"terms":"logging critical business processes abap systems standard tool application log bal available premise cloud environments alike abap2ui5 use like classic show hand straight client message_box_display method takes message source string table cl_bali_log bapiret2 exception anything plain goes through framework mapper flattens lines box shows every example below call different argument see sources tables function modules over bal_t_msgr structure msgno number within class msgid while msgnumber sequence z2ui5_if_app main data lt_bal value z001 msgty time_stmp endmethod object way lo_log create lo_msg cl_bali_message_setter severity if_bali_constants c_severity_status demo_log variable_1 username add_item lo_bapi create_from_bapiret2 type message_v1 dummy logger open project https github.com simplifies work logs pairs well zcl_logger_factory create_log desc error success unlike classes carry detail timestamps reads examples above tip something richer list sortable severities long texts either build view yourself internal cookbook model take ready made dialog popups add addons","url":"https://abap2ui5.github.io/docs/cookbook/translation_messages/logging.html"},{"area":"docs","group":"Cookbook","title":"Translation","text":"Standard UI5 apps handle translations with i18n files stored as frontend artifacts.","headings":[["Text Element","text-element"],["Messages","messages"],["Data Element","data-element"]],"terms":"translation standard ui5 apps handle translations i18n files stored frontend artifacts since abap2ui5 live entirely abap backend use built tools instead text elements message classes data element descriptions translate messages show different languages without code changes method z2ui5_if_app main lv_msg_translated translatable english client message_box_display endmethod unify handling making multi language maintenance simpler net type number read short medium long dd04t helper class below reads programmatically uses approaches backward compatibility first tries classic ddic introspection via cl_abap_elemdescr get_ddic_field available releases fails e.g cloud restricts apis falls back xco library xco_cp_abap_dictionary dynamic calls call keep compiling even systems installed group ls_product_label lcl_help get_data_element_text product definition create public section types begin ty_s_data_element_text header string end methods importing i_data_element_name returning value result endclass implementation ddic_ref ref data_element object content reptext scrtext_s scrtext_m scrtext_l exists abap_bool data_element_name try cl_abap_typedescr describe_by_name t100 struct_desrc cast cl_abap_structdescr dfies assign field symbol assert subrc exporting p_name receiving p_descr_ref lo_typedescr exceptions others return endif data_descr cl_abap_datadescr p_flddescr not_found no_ddic_type corresponding catch cx_root iv_name ro_data_element if_xco_ad_data_element rv_exists abap_false ro_content if_xco_dtel_content get_heading_field_label rs_heading_field_label get_short_field_label rs_short_field_label get_medium_field_label rs_medium_field_label get_long_field_label rs_long_field_label endtry","url":"https://abap2ui5.github.io/docs/cookbook/translation_messages/translation_i18n.html"},{"area":"docs","group":"Cookbook","title":"Title","text":"Set the text the browser shows in the tab and window title bar.","headings":[["Standalone","standalone"],["Launchpad","launchpad"],["Working Samples","working-samples"]],"terms":"title set text browser shows tab window bar running app place decided page abap2ui5 generates always carries says while ui5 boots speak first roundtrip whatever last standalone change example reflect current record call set_title frontend event backend abap class z2ui5_cl_sample_title definition public section interfaces z2ui5_if_app protected private endclass implementation method main case abap_true client check_on_init data view z2ui5_cl_ui5_view_builder factory ele mvc xmlns sap.m sap.ui.core.mvc tag button press rename view_display stringify check_on_event follow_up_action val cs_event t_arg value invoice endcase endmethod launchpad runs inside sap fiori shell use dedicated set_title_launchpad instead forwards shelluiservice rather setting document.title samples start generated scripts link samples.mjs edit working complete apps sample catalogue https github.com blob samples.md describes single pull repository abapgit abapgit.org app_start z2ui5_cl_smp_app_125 src z2ui5_cl_smp_app_125.clas.abap favicon z2ui5_cl_smp_app_491 z2ui5_cl_smp_app_491.clas.abap end","url":"https://abap2ui5.github.io/docs/cookbook/browser_interaction/title.html"},{"area":"docs","group":"Cookbook","title":"Focus","text":"Read which control currently holds the focus from the backend, or move the focus from the backend to a specific field ","headings":[["Read the Current Focus","read-the-current-focus"],["Set the Focus","set-the-focus"],["Basic Usage","basic-usage"],["Selection Range","selection-range"],["Barcode Scanning","barcode-scanning"],["Working Samples","working-samples"]],"terms":"focus read control currently holds backend move specific field work without custom current client get s_focus tells where caret sits inside useful action depends user was editing abap data focused selection_start start chars selection_end end set input set_focus frontend event pass target first argument framework moves cursor next roundtrip guided entry barcode scanning flow logic basic usage processing call follow_up_action cs_event value bindings inputs omitted here keep clear see cookbook device_capabilities barcode_scanning form bound class z2ui5_cl_sample_focus definition public section interfaces z2ui5_if_app protected private endclass implementation method main check_on_navigated view z2ui5_cl_ui5_view_builder factory ele mvc xmlns sap.m sap.ui.core.mvc sap.ui.layout.form page simpleform content tag label text id1 submit one_enter id2 two_enter view_display stringify elseif check_on_event val t_arg endif endmethod presses enter fires second pattern works chain fields selection range position pre select offsets additional arguments scanner devices emulate keyboard combine capture scans right automatically barcode_scanning.md full walkthrough samples generated scripts link samples.mjs edit working complete apps sample catalogue https github.com abap2ui5 blob samples.md use describes single pull repository abapgit abapgit.org app_start z2ui5_cl_smp_app_133 src z2ui5_cl_smp_app_133.clas.abap jump z2ui5_cl_smp_app_189 z2ui5_cl_smp_app_189.clas.abap table cell column row z2ui5_cl_smp_app_421 z2ui5_cl_smp_app_421.clas.abap","url":"https://abap2ui5.github.io/docs/cookbook/browser_interaction/focus.html"},{"area":"docs","group":"Cookbook","title":"Scrolling","text":"Read the current scroll positions from the backend, or scroll a control programmatically from the backend with two frontend events:","headings":[["Read the Scroll Position","read-the-scroll-position"],["Scroll to a Position","scroll-to-a-position"],["Scroll an Element into View","scroll-an-element-into-view"],["Working Samples","working-samples"]],"terms":"scrolling read current scroll positions backend control programmatically frontend events cs_event scroll_to container specific pixel position scroll_into_view bring viewport wherever surrounding currently sits useful jump top buttons restoring navigation revealing row search client get s_scroll reports page open dialogs moment event was fired exposes scrollable element offsets pixels main nest nest2 first second nested views cookbook view nested_views popup popover abap data main_y nest_y nest2_y popup_y popover_y pass vertical optionally horizontal behavior auto smooth instant class z2ui5_cl_sample_scrolling definition public section interfaces z2ui5_if_app protected private endclass implementation method check_on_navigated z2ui5_cl_ui5_view_builder factory ele mvc xmlns sap.m sap.ui.core.mvc id_page footer overflowtoolbar tag button text press scroll_top bottom scroll_bottom view_display stringify return endif case follow_up_action val t_arg value endcase endmethod arguments scrolltop scrollleft optional reveal e.g use target id_row_42 additional mirror browser scrollintoview options block start center end nearest inline samples generated scripts link samples.mjs edit working complete apps sample catalogue https github.com abap2ui5 blob samples.md describes single pull repository abapgit abapgit.org app_start z2ui5_cl_smp_app_362 src z2ui5_cl_smp_app_362.clas.abap z2ui5_cl_smp_app_363 z2ui5_cl_smp_app_363.clas.abap","url":"https://abap2ui5.github.io/docs/cookbook/browser_interaction/scrolling.html"},{"area":"docs","group":"Cookbook","title":"Timer","text":"Fire a backend event after a delay with the start_timer frontend event.","headings":[["Periodic Refresh","periodic-refresh"],["One-Shot Timer","one-shot-timer"],["Replacing a Pending Timer","replacing-a-pending-timer"],["Working Samples","working-samples"]],"terms":"timer fire backend event delay start_timer frontend handy dashboards status monitors case needs delayed periodic update without user interaction pass name milliseconds abap client follow_up_action val cs_event t_arg value refresh seconds browser triggers roundtrip handle via check_on_event like get repeating simply arm end handler class z2ui5_cl_sample_timer definition public section interfaces z2ui5_if_app data counter type protected private endclass implementation method main abap_true check_on_init view z2ui5_cl_ui5_view_builder factory ele mvc xmlns sap.m sap.ui.core.mvc page title abap2ui5 tag text bind view_display stringify tick endcase endmethod increments every stop loop don shot single call fires once perfect deferred action opening new tab short button_open_new_tab fire_open_tab open_new_tab https www.google.com search replacing pending time calling again previous replaces useful debounce e.g auto saving input field last keystroke warning causes full use sensible intervals avoid heavy server load samples start generated scripts link samples.mjs edit working complete apps sample catalogue github.com blob samples.md describes pull repository abapgit abapgit.org app_start progress indicator during z2ui5_cl_smp_app_064 src z2ui5_cl_smp_app_064.clas.abap z2ui5_cl_smp_app_028 z2ui5_cl_smp_app_028.clas.abap","url":"https://abap2ui5.github.io/docs/cookbook/browser_interaction/timer.html"},{"area":"docs","group":"Cookbook","title":"Clipboard","text":"Copy arbitrary text to the user's clipboard with the frontend event client->cs_event-clipboard_copy.","headings":[["Copy the App State URL","copy-the-app-state-url"],["Working Samples","working-samples"]],"terms":"clipboard copy arbitrary text user frontend event client cs_event clipboard_copy travels first t_arg entry passed browser navigator.clipboard.writetext api performs entirely abap class z2ui5_cl_sample_clipboard definition public section interfaces z2ui5_if_app data mv_text type string protected private endclass implementation method main case abap_true check_on_init hello abap2ui5 view z2ui5_cl_ui5_view_builder factory ele mvc xmlns sap.m sap.ui.core.mvc page tag input value bind button press view_display stringify check_on_event follow_up_action val message_toast_display copied endcase endmethod app state url share current instead custom compose link app_state_get_href hand action see event_navigation navigation app_state.md warning requires https localhost plain http call silently ignored samples start generated scripts samples.mjs edit working complete apps sample catalogue github.com blob samples.md use describes single pull repository abapgit abapgit.org app_start z2ui5_cl_smp_app_325 src z2ui5_cl_smp_app_325.clas.abap local session storage z2ui5_cl_smp_app_327 z2ui5_cl_smp_app_327.clas.abap end","url":"https://abap2ui5.github.io/docs/cookbook/browser_interaction/clipboard.html"},{"area":"docs","group":"Cookbook","title":"URL Handling","text":"Working with URLs is common — reading parameters from the current URL, opening links in new tabs, or managing browser history.","headings":[["Read URL Parameters","read-url-parameters"],["Open a New Tab","open-a-new-tab"],["Browser History","browser-history"],["All Three in One App","all-three-in-one-app"],["Working Samples","working-samples"]],"terms":"url handling working urls common reading parameters current opening links new tabs managing browser history read query via config object abap data lv_search client get s_config search open tab frontend event lv_url https www.abap2ui5.org follow_up_action val cs_event open_new_tab t_arg value hash_set ui5 hashchanger sethash writes pushed entry backend state inside app becomes bookmarkable back button steps through states detail three things hash should use decision see navigation cookbook event_navigation covers framework routing twin hash_replace without hash_back stepping tip register listener whole used above appends registers hash_attach_changed owns outright call way router forward round tripping running owned section class z2ui5_cl_sample_url definition public interfaces z2ui5_if_app mv_search type string protected private endclass implementation method main check_on_navigated view z2ui5_cl_ui5_view_builder factory ele mvc xmlns sap.m sap.ui.core.mvc page title tag label text was started bind abap2ui5.org press push view_display stringify elseif check_on_event message_toast_display now step take endif endmethod carries roundtrip sits attribute runs because decides samples start generated scripts link samples.mjs edit complete apps sample catalogue github.com abap2ui5 blob samples.md describes single pull repository abapgit abapgit.org app_start z2ui5_cl_smp_app_073 src z2ui5_cl_smp_app_073.clas.abap mail phone sms z2ui5_cl_smp_app_316 z2ui5_cl_smp_app_316.clas.abap reload z2ui5_cl_smp_app_492 z2ui5_cl_smp_app_492.clas.abap end","url":"https://abap2ui5.github.io/docs/cookbook/browser_interaction/url_handling.html"},{"area":"docs","group":"Cookbook","title":"Soft Keyboard","text":"For UI5 input fields, the soft keyboard pops up automatically when an input receives focus.","headings":[["Hide Soft Keyboard","hide-soft-keyboard"],["Working Samples","working-samples"]],"terms":"soft keyboard hide ui5 input fields pops automatically receives focus sometimes example warehouses small devices used mainly barcode scanning don want behavior keyboard_set_mode frontend event sets html inputmode attribute pass control desired mode none hides text numeric decimal tel etc restore matching layout abap class z2ui5_cl_sample_softkeyb definition public section interfaces z2ui5_if_app data type string protected private endclass implementation method main client check_on_navigated view z2ui5_cl_ui5_view_builder factory ele mvc xmlns sap.m sap.ui.core.mvc form sap.ui.layout.form shell page title abap2ui5 softkeyboard off navbuttonpress back shownavbutton check_app_prev_stack simpleform editable abap_true content tag label zinput value bind valuehelprequest call_keyboard showvaluehelp view_display stringify return endif case get follow_up_action val cs_event t_arg nav_app_leave endcase endmethod enable fire different samples start generated scripts link samples.mjs edit working complete apps sample catalogue https github.com blob samples.md use describes single pull repository abapgit abapgit.org app_start mobile z2ui5_cl_smp_app_352 src z2ui5_cl_smp_app_352.clas.abap end","url":"https://abap2ui5.github.io/docs/cookbook/browser_interaction/soft_keyboard.html"},{"area":"docs","group":"Cookbook","title":"Keyboard Shortcuts","text":"The keyboard_shortcut frontend event binds a key combination to a named backend event ","headings":[["Registering a Shortcut","registering-a-shortcut"],["Behavior","behavior"],["Working Samples","working-samples"]],"terms":"keyboard shortcuts keyboard_shortcut frontend event binds key combination named backend declarative equivalent sap.ui.core.commandexecution shortcut needs controller method therefore place less abap2ui5 app binding pure data name fires registering t_arg positional abap class z2ui5_cl_sample_shortcut definition public section interfaces z2ui5_if_app protected private endclass implementation main client check_on_navigated follow_up_action val cs_event value ctrl save delete view z2ui5_cl_ui5_view_builder factory ele mvc xmlns sap.m sap.ui.core.mvc page title tag text press view_display stringify elseif check_on_event message_toast_display saved via deleted endif endmethod pressing exactly like button browser default suppressed behavior spelling follows ui5 convention shift common aliases normalized cmd command meta control esc escape return enter registration keypress match per again rebinds need unregister first sending empty lifetime registry lives survives every roundtrip until left navigating another starts set works without write call where result consumed attribute identical see positions cookbook event_navigation tip demo samples repository https github.com complete example controlling soft mobile devices browser_interaction soft_keyboard start generated scripts link samples.mjs edit working apps sample catalogue blob samples.md use describes single pull abapgit abapgit.org app_start z2ui5_cl_smp_app_471 src z2ui5_cl_smp_app_471.clas.abap end","url":"https://abap2ui5.github.io/docs/cookbook/browser_interaction/keyboard_shortcuts.html"},{"area":"docs","group":"Cookbook","title":"Info","text":"abap2UI5 ships the current frontend state with every roundtrip.","headings":[["Device","device"],["UI5","ui5"],["Focus","focus"],["Scroll","scroll"],["Working Samples","working-samples"]],"terms":"info abap2ui5 ships current frontend state every roundtrip read client get custom control extra event needed relevant sub structures s_device s_ui5 s_focus s_scroll device reading information via see model device_model.md ui5 runtime framework details versions configuration ui5_versions.md focus browser_interaction focus.md scroll positions scrolling scrolling.md samples start generated scripts link samples.mjs edit working complete apps sample catalogue https github.com blob main samples.md use page describes single class pull repository abapgit abapgit.org app_start version theme browser z2ui5_cl_smp_app_122 src z2ui5_cl_smp_app_122.clas.abap phone tablet desktop z2ui5_cl_smp_app_445 z2ui5_cl_smp_app_445.clas.abap end","url":"https://abap2ui5.github.io/docs/cookbook/device_capabilities/info.html"},{"area":"docs","group":"Cookbook","title":"Camera","text":"abap2UI5 offers a custom control for taking photos directly from the device's camera.","headings":[["Working Samples","working-samples"]],"terms":"camera abap2ui5 offers custom control taking photos directly device returns image base64 encoded string ready backend processing minimal example based sample z2ui5_cl_smp_app_306 abap class definition public section interfaces z2ui5_if_app data mv_picture_base type protected private endclass implementation method main client check_on_navigated view z2ui5_cl_ui5_view_builder factory ele mvc xmlns sap.m sap.ui.core.mvc z2ui5 z2ui5.cc shell page title picture tag camerapicture value bind onphoto event capture view_display stringify endif get process here endmethod tip browser restrictions access relies permissions security settings browsers need https display permission prompt watch warnings while testing samples start generated scripts link samples.mjs edit working complete apps catalogue github.com blob samples.md use describes single pull repository abapgit abapgit.org app_start take src z2ui5_cl_smp_app_306.clas.abap end","url":"https://abap2ui5.github.io/docs/cookbook/device_capabilities/camera.html"},{"area":"docs","group":"Cookbook","title":"Geolocation","text":"abap2UI5 offers a custom control for reading geolocation data from the user's device ","headings":[["Working Samples","working-samples"]],"terms":"geolocation abap2ui5 offers custom control reading data user device longitude latitude altitude speed accuracy values handy logistics apps field service tools scenario where location matters fires finished event once browser resolves position binding writes every value back abap attributes see z2ui5_cl_smp_app_120 class z2ui5_cl_sample_geolocation definition public section interfaces z2ui5_if_app type string altitudeaccuracy protected private endclass implementation method main view z2ui5_cl_ui5_view_builder factory ele mvc xmlns sap.m sap.ui.core.mvc z2ui5 z2ui5.cc shell page title tag client post bind itself draws nothing reads bound show list headertext items displaylistitem label view_display stringify case get process here endcase endmethod tip permissions needs grant permission serve http endpoint over https since browsers block non secure origins samples start generated scripts link samples.mjs edit working complete sample catalogue github.com blob samples.md use describes single pull repository abapgit abapgit.org app_start src z2ui5_cl_smp_app_120.clas.abap end","url":"https://abap2ui5.github.io/docs/cookbook/device_capabilities/geolocation.html"},{"area":"docs","group":"Cookbook","title":"Barcode Scanning","text":"Barcode scanning is common in enterprise apps.","headings":[["Scanning","scanning"],["Focus Handling","focus-handling"],["Play Sounds","play-sounds"],["Render Barcodes","render-barcodes"]],"terms":"barcode scanning common enterprise apps abap2ui5 scan barcodes handle focus transitions play sounds user feedback display section walks through need get started since ui5 version 1.102 sap.ndc.barcodescannerbutton control part library making easy use like example below shows basic behavior customize handling once event fires abap method z2ui5_if_app main data view z2ui5_cl_ui5_view_builder factory ele mvc xmlns sap.m sap.ui.core.mvc ndc sap.ndc page tag barcodescannerbutton dialogtitle scanner scansuccess client val scan_success t_arg value parameters text format view_display stringify lv_input get_event_arg lv_format custom processing message_box_display finished endif endmethod tip versions feature works framework openui5 devices emulate keyboard case add input field move backend scanned flows typed moves next enter key press firing set_focus frontend class z2ui5_cl_sample_focus definition public interfaces type string protected private endclass implementation check_on_navigated form sap.ui.layout.form simpleform content label id1 bind submit one_enter id2 two_enter return follow_up_action cs_event endcase audio handy scenarios fire play_audio url sound file wav sap mime repository mime_demo bam.wav z2ui5_cl_sample_sound company_code vbox inputapp number placeholder company code check_input button check initial error empty else clear complete sample see z2ui5_cl_smps_app_487 samples stack https github.com render bwip ships libraries ons resources addons details","url":"https://abap2ui5.github.io/docs/cookbook/device_capabilities/barcode_scanning.html"},{"area":"docs","group":"Cookbook","title":"Audio","text":"Audio feedback is handy in some scenarios.","headings":[["Play Sounds","play-sounds"]],"terms":"audio play sounds feedback handy scenarios fire play_audio frontend event url sound file example wav sap mime repository public abap mime_demo bam.wav below typical input validation beep user submits empty company code app plays alert shows error message filled simply accepted cleared class z2ui5_cl_sample_sound definition section interfaces z2ui5_if_app data company_code type string protected private endclass implementation method main client check_on_navigated view z2ui5_cl_ui5_view_builder factory ele mvc xmlns sap.m sap.ui.core.mvc page vbox tag inputapp value bind number placeholder submit check_input button text check press view_display stringify return endif get initial follow_up_action val cs_event t_arg message_box_display else clear endmethod complete sample see z2ui5_cl_smps_app_487 samples stack https github.com abap2ui5","url":"https://abap2ui5.github.io/docs/cookbook/device_capabilities/audio.html"},{"area":"docs","group":"Cookbook","title":"Upload, Download","text":"abap2UI5 handles file uploads and downloads by sending base64-encoded data over the binding.","headings":[["Upload","upload"],["Download","download"],["Working Samples","working-samples"]],"terms":"upload download abap2ui5 handles file uploads downloads sending base64 encoded data over binding abap class z2ui5_cl_sample_upload definition public section interfaces z2ui5_if_app mv_path type string mv_value protected private endclass implementation method main view z2ui5_cl_ui5_view_builder factory ele mvc xmlns sap.m sap.ui.core.mvc z2ui5 z2ui5.cc page tag fileuploader value client bind path placeholder filepath here event view_display stringify case get process message_box_display uploaded endcase endmethod see z2ui5_cl_smp_app_186 button text open popup press button_download lv_name default_file_name.jpg lv_content image png kyb3x3 u992bee7tca00yfsffekfy nuzftjw0lrvjrxrcdiaapllw dve5iwrytt2udlfedwc1 9klp vbbpodh 6tklxbeai9tl0taewpd mzzqdry0aco jq12ryohqqoyoo8rdwjru qxkjwtfi8xxt58bdquwqs9qc f3nnd68ghcu1yioep pqn1pgrabkj6bus96cutrzmydtl tvuirw1m3n0edl0vrpceysqdxn jsqpsrhmqugexeay4yk4wxwcy5v 9scqomovufthatyty8qyqwz kdurkomwxnkr2eeqvkc m8r h6rysub3ekokry6f yukarn979jc s8g0et n3vn3ktqwbq428m9 8k0p 1aihf36pccel6ehocaucrxkzxxws3xkd2vc trbg9o5elc17mmwubd2nkhukza26ba2 d3p mncfwg59owveyhkzgn jdr8dekbod7y ljejgz0sosxvtvbc6rhirr2reny1oxd6pjsq gqjk8vwfymhrwbzw umpfirwhb2i7ih8cihfxikd 3omk5tcdv1t 2nnu5sxxpdfnx hunhvt3 zmdz8usxc3ddahbj1ghj as08fwts7kt1hbtmyn29vdwaw wbwlvoj3uad1wi duh7qei66pfyurj4ik9is hglfbkbfr3cnzm7chluwldwmprtcohx4hutlocqj lycu follow_up_action val cs_event download_b64_file t_arg samples start generated scripts link samples.mjs edit working complete apps sample catalogue https github.com blob samples.md use describes single pull repository abapgit abapgit.org app_start backend z2ui5_cl_smp_app_074 src z2ui5_cl_smp_app_074.clas.abap browser z2ui5_cl_smp_app_186.clas.abap end","url":"https://abap2ui5.github.io/docs/cookbook/device_capabilities/upload_download.html"},{"area":"docs","group":"Cookbook","title":"PDF","text":"Render a PDF directly in your app — for printouts from Adobe Forms, SmartForms, archived documents from the Content Server, or anything else that produces an xstring.","headings":[["Show It in Your Own View","show-it-in-your-own-view"],["Download Instead of Display","download-instead-of-display"],["Working Samples","working-samples"]],"terms":"pdf render directly app printouts adobe forms smartforms archived documents content server anything else produces xstring show view sap.m.pdfviewer renders document inline takes data application base64 uri whole job get bytes bind result press run below real page viewer something abap class z2ui5_cl_sample_pdf definition public section interfaces z2ui5_if_app mv_pdf type string protected private endclass implementation method main client check_on_navigated encoded lv_base64 cl_web_http_utility encode_x_base64 lv_xstring where comes cl_fp_function_module get_pdf otf conversion smartform select archive uia pia cguxic9cyxnlrm9udcavsgvsdmv0awnhid4 z2ui5_cl_ui5_view_builder factory ele mvc xmlns sap.m sap.ui.core.mvc title invoice tag pdfviewer source height 600px view_display stringify endif endmethod leave off opens dialog instead sitting control property apart travels model large roundtrip past few megabytes offer download display rather rendering ready made bar buttons popups add https github.com abap2ui5 addons carries let user save use file upload_download.md pattern follow_up_action val cs_event download_b64_file t_arg value invoice_4711.pdf tip older releases without cl_http_utility if_http_utility samples start generated scripts link samples.mjs edit working complete apps sample catalogue blob samples.md describes single pull repository abapgit abapgit.org app_start open z2ui5_cl_smp_app_449 src z2ui5_cl_smp_app_449.clas.abap end","url":"https://abap2ui5.github.io/docs/cookbook/device_capabilities/pdf.html"},{"area":"docs","group":"Cookbook","title":"Spreadsheet","text":"abap2UI5 works with the XLSX APIs on your ABAP system to upload and download spreadsheets, converting between XLSX files and internal tables as needed.","headings":[["Upload","upload"],["Download","download"],["abap2xlsx","abap2xlsx"],["UI5 Control","ui5-control"]],"terms":"spreadsheet abap2ui5 works xlsx apis abap system upload download spreadsheets converting between files internal tables needed convert uploaded table code group playground run button calls lcl_help class local abapgit file z2ui5_cl_sample_upload definition public section interfaces z2ui5_if_app data mv_path type string mv_value protected private endclass implementation method main view z2ui5_cl_ui5_view_builder factory ele mvc xmlns sap.m sap.ui.core.mvc z2ui5 z2ui5.cc page tag fileuploader value client bind path placeholder filepath here event view_display stringify get lr_itab itab_get_by_xlsx further process itab message_box_display endif endmethod helper converts uploader returns uri e.g application base64 payload first split extract raw cl_fdt_xl_spreadsheet brfplus framework parses binary worksheet dynamic methods importing val returning result ref lv_dummy lv_data lv_xdata cl_web_http_utility decode_x_base64 lo_excel new document_name test xdocument if_fdt_doc_spreadsheet get_worksheet_names worksheet_names lt_worksheets get_itab_from_worksheet frontend text open popup press types begin ty_row count descr end ty_tab standard empty key lt_tab red description lv_file xlsx_get_by_itab follow_up_action cs_event download_b64_file t_arg test.xlsx downloadable uses cl_salv_table derive field catalog structure cl_salv_bs_lex exports xstring finally encoded wrapped browser trigger lt_data symbols tab assign try exporting list_display abap_false r_salv_table lo_salv changing t_table lt_fcat cl_salv_controller_metadata get_lvc_fieldcatalog r_columns get_columns r_aggregations get_aggregations catch cx_salv_msg return endtry export_from_result_data_table is_format if_salv_bs_lex_format mc_format_xlsx ir_result_data_table cl_salv_ex_util factory_result_data_table r_data t_fieldcatalog er_result_file lv_xstring encode_x_base64 vnd.openxmlformats officedocument.spreadsheetml.sheet tip cloud snippets above aren compatible make replace functions xco_cp_xlsx abap2xlsx instead api change releases consider source project https github.com offers reusable common operations runs entirely within stack example below zcx_excel get_text error final create raising zcl_excel lo_writer zif_excel_writer lo_worksheet zcl_excel_worksheet lt_field_catalog zexcel_t_fieldcatalog ls_table_settings zexcel_s_table_settings creates active sheet object get_active_worksheet set_title zcl_excel_common get_fieldcatalog ip_table table_style zcl_excel_table builtinstyle_medium5 bind_table is_table_settings it_field_catalog freeze_panes ip_num_rows zcl_excel_writer_2007 write_file ui5 control export directly sap sap.ui.export.spreadsheet content extra logic use see add ons resources addons complete sample custom coding effort may higher based approach shown","url":"https://abap2ui5.github.io/docs/cookbook/device_capabilities/spreadsheet.html"},{"area":"docs","group":"Cookbook","title":"Lock","text":"In classic SAP GUI, a transaction like VA02 calls ENQUEUE_EVVBAK and the lock lives as long as the dialog session.","headings":[["1. No Locking","1-no-locking"],["2. Lock at Save","2-lock-at-save"],["3. Optimistic Check","3-optimistic-check"],["4. Combined (recommended default)","4-combined-recommended-default"],["5. Stateful Session","5-stateful-session"],["6. Soft Lock","6-soft-lock"],["7. RAP Drafts","7-rap-drafts"],["8. Lock-Manager Add-on","8-lock-manager-add-on"],["Overview","overview"]],"terms":"lock classic sap gui transaction like va02 calls enqueue_evvbak lives long dialog session web apps different roundtrip fresh abap default set gone next locking abap2ui5 means picking deliberate strategy questions phase question edit happens while user thinking typing save moment hit patterns below combine ways examples use sales order header table vbak standard enqueue object evvbak shapes apply full source pattern included collapsible block end every section minimal starting point edits saves conflict check last wins silently fine personal sandboxes throwaway demos rarely want production details summary code z2ui5_cl_sample_lock_1 playground run button selects browser database scenario naive editing simplest possible change internal tools where ever touches record class definition public interfaces z2ui5_if_app data vbeln type value auart ernam erdat protected client ref z2ui5_if_client methods on_init on_event_save view_display data_read private endclass implementation method main check_on_navigated elseif check_on_event endif endmethod select single don demo update commit work message_toast_display saved view z2ui5_cl_ui5_view_builder factory ele mvc xmlns sap.m sap.ui.core.mvc form sap.ui.layout.form shell page title navbuttonpress event_nav_app_leave shownavbutton check_app_prev_stack simpleform editable abap_true content tag label text input enabled abap_false bind created conv string press event stringify hold thinks acquire write release short call function exporting mode_vbak mandt exceptions foreign_lock system_failure others subrc message_box_display locked another return dequeue_evvbak exists milliseconds scales parallel still race timestamps line second overwrites first z2ui5_cl_sample_lock_2 module application server quick low chance users hitting stateless cannot already optimistic read remember timestamp reject shifted meantime idea http etag aedat upd_tmstmp token_aedat token_aezet now_aedat now_aezet changed please reload through held during many concurrent catches conflicts even outside app se16 batch jobs rfc pick column always updates writes anyone bypassing misses real z2ui5_cl_sample_lock_3 odata odata.etag time silent problem costs almost nothing bugs current_aedat current_aezet been since opened refresh get stamp field now datum combined recommended plus safest sensible serializes everyone else z2ui5_cl_sample_lock_4 should why writers interleave slipped via path job between currently being try again stateful behaviour switch init survives subsequent roundtrips stays alive set_session_stateful nav_app_leave open entry visible sm12 navigate wait exit explicitly warning active pins process sessions traffic pair explicit otherwise leaked blocks future until times out z2ui5_cl_sample_lock_5 persistent opens screen leave keeps back office few immediately see opening cost high on_event_cancel lock_acquire lock_release cancel soft row custom marking enforced kernel respects feedback alice layer top guard schema z2ui5_sample_01 example description key vbeln_va username syuname locked_at timestampl started closing without pressing leaves behind add cleanup deletes entries older say minutes uses matching z2ui5_cl_sample_lock_6 advisory layered required create se11 delivery locked_by on_event_release soft_lock_acquire returning abap_bool soft_lock_release fills someone holds renders case s_existing uname s_new modify delete could cond initial status rap drafts modern releases draft business objects manage exclusive owner released covers usually handling eml_cds_sql draft_handling.md manager community https github.com addons wraps logic reusable including stale message install resources addons.md instead writing boilerplate yourself overview external best fit yes partial window contention feel underlying managed skip start unless these tips balance needed need platform concepts trade offs statefulness statefulness.md","url":"https://abap2ui5.github.io/docs/cookbook/expert_more/lock.html"},{"area":"docs","group":"Cookbook","title":"Statefulness","text":"By default, abap2UI5 runs stateless like any other UI5 freestyle app, with only REST calls to the ABAP backend.","headings":[["Stateless (default)","stateless-default"],["Stateful Sessions","stateful-sessions"],["When to Use It","when-to-use-it"],["Trade-offs","trade-offs"]],"terms":"statefulness default abap2ui5 runs stateless like ui5 freestyle app rest calls abap backend roundtrip starts fresh session executes controller serializes state back client tears work process down again nothing server survives between clicks exactly makes runtime scale small set cases where sticky needed classic gui style locking heavy bound resources rfc connections must stay open run stateful mode phase happens request browser sends draft model delta never leaves free picks reads instance row response view new returned written released pinned enqueue held get parameters survive recommended productive apps sessions private premise systems switch running handles every subsequent user globals locks events check_on_navigated set_session_stateful endif release explicitly exit abap_false see z2ui5_cl_smps_app_485 z2ui5_cl_smps_app_486 samples stack repository https github.com complete examples use useful need sap interactions lock.md hold resource expensive e.g destination long selection cached internal table cannot derived cheaply migrating legacy dynpro flow want semantics during transition everything else especially anything facing busy system stick optimistic checks check soft lock instead trade offs warning pins per active lifetime handful dialog processes few dozen idle enough starve everyone sparingly low traffic always pair explicit path otherwise leaked blocks future users until times out rules thumb wire cancel save handlers happy keep short place park indefinitely public cloud btp hosted scenarios support design day readiness matters","url":"https://abap2ui5.github.io/docs/cookbook/expert_more/statefulness.html"},{"area":"docs","group":"Cookbook","title":"WebSocket","text":"Stateless roundtrips are fine for click-driven UIs, but some scenarios need the server to push ","headings":[["Server Side","server-side"],["Client Side","client-side"],["When to Reach For It","when-to-reach-for-it"]],"terms":"websocket stateless roundtrips fine click driven uis scenarios need server push news feed job status indicator chat abap2ui5 special api use sap standard stack messages rendered view via custom javascript building blocks layer purpose apc application channel sapc exposes endpoint over http amc messaging samc system pub sub abap code broadcast opens socket dispatches incoming once channels configured commit work fires publish reaches every connected browser within milliseconds polling timer side class extending cl_apc_wsp_ext_stateless_base binds consumer client connects forwarded broadcasting liner anywhere data lo_producer cl_amc_channel_manager create_message_producer i_application_id z2ui5_sample i_channel_id news_feed send i_message new order arrived full reference implementation lives samples repository https github.com z2ui5_cl_smps_app_489_ws handler z2ui5_cl_smps_app_489 consuming app raw cookbook event_navigation frontend embedded connection stays open across normal update model trigger toast fire event pull fresh backend const wss window.location.host ws.onmessage sap.m.messagetoast.show e.data reach websockets cost permanent per user comparable stateful session resource terms really matters live dashboards monitoring screens multi collaboration shared editing long running background jobs reporting refresh few seconds browser_interaction timer.md cheaper simpler warning available platform check release notes cloud public btp environment designing around","url":"https://abap2ui5.github.io/docs/cookbook/expert_more/websocket.html"},{"area":"docs","group":"Cookbook","title":"Logout","text":"A logout button isn't a single action. Depending on how an abap2UI5 app was started, the user may have one, two, or three SAP sessions open at the same time, and each lives in a different place. abap2UI5 ships a built...","headings":[["The Logout Event","the-logout-event"],["How It Works","how-it-works"],["Startup Contexts","startup-contexts"],["Session Layers","session-layers"],["What system_logout Does","what-system-logout-does"],["Customization","customization"],["Custom Post-Logoff URL","custom-post-logoff-url"],["SICF Configuration","sicf-configuration"],["Run Inside the Fiori Launchpad","run-inside-the-fiori-launchpad"],["Single Sign-On","single-sign-on"]],"terms":"logout button isn single action depending abap2ui5 app was started user may three sap sessions open time lives different place ships built client event system_logout terminates whichever exist current see sample z2ui5_cl_smp_app_361 working example fire controller method log off abap follow_up_action cs_event optionally pass origin url first argument control where lands afterwards default public icf logoff val t_arg value bsp system logoff.htm works launched ways creates combination things case startup contexts context typical fiori launchpad shell tile ui2 flp z2ui5 display yes http handler e.g z2ui5_cl_ui5_http_handler service application z2ui5_v2 index.html session layers independent once cookies lifetimes end running browser accessed through sap.ushell.container exists opened sso authenticated mysapsso2 sap_sessionid killed standard endpoint stateful per server side state applications keep alive cookie contextid scoped visible sm04 plugin appending sessioncmd inside ending others page actually loaded owns calls container.logout handled redirect hidden iframe customization influence happens pick matches goal custom post navigates ended second useful want specific landing instance confirmation without changing settings warning must cross redirects rejected sicf configuration part shows configured transaction under error pages common patterns setting show logged leave company force fresh login prompt combine disabling path basis task out came right back symptom almost always cause run cleanest experience going flow launch non sign saml kerberos x.509 oidc ends identity provider stays untouched next request protected silently authenticates perceives didn work netweaver behavior true everywhere needs following trigger slo close tab idp dropped build landscape","url":"https://abap2ui5.github.io/docs/configuration/logout.html"},{"area":"docs","group":"Cookbook","title":"OData","text":"By default, you bind public attributes of your class to UI5 properties with _bind.","headings":[["Define Additional Model","define-additional-model"],["Bind Data","bind-data"],["Full Example","full-example"],["Multiple OData Models","multiple-odata-models"],["Metadata Binding","metadata-binding"]],"terms":"odata default bind public attributes class ui5 properties cases where need access large datasets use existing services offers features like pagination growing improve performance amounts data define additional model example test service sap opu dmo ui_flight_r_v2 available abap systems make sure publicly reachable method below defines exposes under name flight client follow_up_action val z2ui5_if_client cs_event set_odata_model t_arg value next view definition since non explicitly binding z2ui5_cl_ui5_view_builder factory ele mvc xmlns sap.m sap.ui.core.mvc page table items airport abap_true columns column tag text airportid end city countrycode columnlistitem cells property loads batches instead once boosting full source code z2ui5_if_app main view_display stringify endmethod multiple models extra travel bookingsupplement travelid bookingid bookingsupplementid supplementid api_travel_u_v2 complete snippet see sample z2ui5_cl_smps_app_315 samples stack repository https github.com abap2ui5 metadata contexts often carry annotations check definitions entity currency xml entitytype label währung content version key propertyref type edm.string nullable false maxlength display format uppercase currency_text quickinfo währungsschlüssel semantics beschreibung creatable updatable decimals edm.byte dezimalstellen anzahl currencyisocode iso währungscode alternativecurrencykey alternativschlüssel alternativer schlüssel isprimarycurrencyforisocrcy edm.boolean primär primärer zum these reuse backend translations via path follows pattern propertyname annotation named switches document must exactly match within attribute here translated resolves shown user logon language now picks title automatically","url":"https://abap2ui5.github.io/docs/cookbook/expert_more/odata.html"},{"area":"docs","group":"Cookbook","title":"Smart Controls","text":"Smart controls from the sap.ui.comp library (SmartFilterBar, SmartTable, SmartForm, SmartField, SmartChart) build their UI from OData V2 metadata ","headings":[["Declaring the Namespaces","declaring-the-namespaces"],["Page Variant","page-variant"],["The SMART_VARIANT_INIT Handshake","the-smart-variant-init-handshake"],["Classic FilterBar with Variants","classic-filterbar-with-variants"]],"terms":"smart controls sap.ui.comp library smartfilterbar smarttable smartform smartfield smartchart build odata metadata combined variant management give full list report without hand built columns filters warning sapui5 ships openui5 apps using require bootstrap see ui5 bootstrapping configuration setup ui5_bootstrapping declaring namespaces live sub use needs xmlns root view exactly written three below cover abap data z2ui5_cl_ui5_view_builder factory ele mvc sap.m sap.ui.core.mvc sap.ui.comp.smartfilterbar sap.ui.comp.smarttable smartvariantmanagement sap.ui.comp.smartvariants navpopover declared way since driven app usually carries switches default model service instead cookbook expert_more client view_display val stringify switch_default_model_path sap opu iwbep gwsample_basic page owns persistency whole register through smartvariant association contributing persistencykey tag pagevariantid pagevariantpkey entityset productset smartfilterpkey smartfilterid initiallyvisiblefields productid name category price usevariantmanagement true smarttablepkey annotated ui.lineitem starts optional practice meant show smart_variant_init handshake classic controller calls initialise once registered never gets personalizable control saving fails sap.ui.fl stored views loaded abap2ui5 frontend event performs waits until arrived follow_up_action cs_event t_arg value positional filterbar variants sap.ui.comp.filterbar.filterbar knows nothing every writes callbacks registerfetchdata registerapplydata registergetfilterswithvalues adds personalizableinfo marks dirty filter change boilerplate over bar items logic framework filter_bar_variant_init wires javascript variantid filterbarid tip samples demo repository https github.com","url":"https://abap2ui5.github.io/docs/cookbook/expert_more/smart_controls.html"},{"area":"docs","group":"Cookbook","title":"RAP","text":"abap2UI5 is OData/RAP-agnostic — it doesn't care where data lives. You keep all your RAP logic (validations, determinations, actions, draft tables); only the UI layer is different — instead of a Fiori Elements fronten...","headings":[["RAP is a Programming Model — abap2UI5 is Not","rap-is-a-programming-model-abap2ui5-is-not"],["abap2UI5 is Agnostic","abap2ui5-is-agnostic"],["Using RAP Functionality from Outside","using-rap-functionality-from-outside"]],"terms":"rap abap2ui5 odata agnostic doesn care where data lives keep logic validations determinations actions draft tables layer different instead fiori elements frontend build view abap programming model restful application full stack prescribes design expose consume business objects define entities cds views declare behavior definitions bdefs implement handlers implementation classes everything service consumed every part rendering library single interface class implements opinion structure access use organized requirement bdef simply calls main method user interaction renders whatever return distinction matters defines architecture around built inside because imposes pick fits works sql select insert vdm custom eml read modify function modules bapis called via direct table nothing excluded controller plain statement valid using functionality outside call framework e.g enforces rules explicit commit work database modifications controlled side effects runs means restrictions apply here freely i_salesordertp entity salesorder fields value result lt_result create salesordertype salesorganization soldtoparty cid mapped ls_mapped failed ls_failed reported ls_reported begin response ls_save_failed ls_save_reported end required fully permitted handler applies reading calling accessing directly tip running gives control decide handle errors combine multiple object operations","url":"https://abap2ui5.github.io/docs/cookbook/eml_cds_sql/rap.html"},{"area":"docs","group":"Cookbook","title":"EML","text":"All examples in these docs work without EML.","headings":[["EML","eml"],["Read","read"],["Modify","modify"],["Failure Handling","failure-handling"]],"terms":"eml examples these docs work without recent abap release use feature abap2ui5 apps entity manipulation language simplifies rap business objects giving consistent way read create update delete entities fetch sales orders show ui5 table playground run button needs cds behavior definition system class z2ui5_cl_sample_eml_read public section interfaces z2ui5_if_app data mt_salesorder type result i_salesordertp salesorder protected private endclass implementation method main client check_on_navigated fields value view z2ui5_cl_ui5_view_builder factory ele mvc xmlns sap.m sap.ui.core.mvc page items bind columns column tag text end salesordertype salesorganization columnlistitem cells view_display stringify endif endmethod modify example below creates order inside app distributionchannel organizationdivision soldtoparty cid mapped ls_mapped failed ls_failed reported ls_reported_modify commit begin response ls_save_failed ls_save_reported key points calls outside framework explicit transaction commits needed restrictions like disallowing direct posting function modules don apply operations get flexibility handling actions failure statements report problems through structures rather raising exceptions raise classic infrastructure level failures handle validation inspect messages explaining why call unchecked look success code while was never written transactional modifications stay buffer until skip nothing persisted itself reports must decide whether retry roll back surface error user wrap try catch cases cx_root cx_dynamic_check safety net cx_abap_invalid_value cx_sy_conversion_no_number conversion statement runs cx_abap_behv subclasses errors e.g unknown action locking issues cx_abap_lock_failure cannot acquire locks typical defensive pattern z_i_invoice invoice amount tky ls_key lv_amount initial exception new commit_failed commit_reported message_box_display endtry reads out object happens see cookbook event_navigation","url":"https://abap2ui5.github.io/docs/cookbook/eml_cds_sql/eml.html"},{"area":"docs","group":"Cookbook","title":"Draft Handling","text":"Draft handling is one of the headline features of the ABAP RESTful Application Programming Model (RAP).","headings":[["Drafts Are a RAP Feature — and You Can Use Them with abap2UI5","drafts-are-a-rap-feature-and-you-can-use-them-with-abap2ui5"],["What Is a Draft?","what-is-a-draft"],["The Draft Lifecycle","the-draft-lifecycle"],["The Four Building Blocks","the-four-building-blocks"],["1. Open a Draft — Edit","1-open-a-draft-edit"],["2. Read a Draft — %is_draft = on","2-read-a-draft-is-draft-on"],["3. Activate a Draft — Activate","3-activate-a-draft-activate"],["4. Discard a Draft — Discard","4-discard-a-draft-discard"],["Your First Draft App (Minimal)","your-first-draft-app-minimal"],["The Full App — A Real-World Edit Screen","the-full-app-a-real-world-edit-screen"],["1. App Startup — Always Begin in View Mode","1-app-startup-always-begin-in-view-mode"],["2. Entering Edit Mode — Check for an Existing Draft","2-entering-edit-mode-check-for-an-existing-draft"],["3. Acquiring a Fresh Draft","3-acquiring-a-fresh-draft"],["4. Resuming an Existing Draft","4-resuming-an-existing-draft"],["5. Reading the Draft into the App's Fields","5-reading-the-draft-into-the-app-s-fields"],["6. Saving Typed Values Back to the Draft","6-saving-typed-values-back-to-the-draft"],["7. Exiting Edit Mode — Compare Draft vs Active","7-exiting-edit-mode-compare-draft-vs-active"],["8. Activating — Promote the Draft to Active","8-activating-promote-the-draft-to-active"],["9. The Event Map and the View","9-the-event-map-and-the-view"],["Full Snippet","full-snippet"],["Common Pitfalls","common-pitfalls"]],"terms":"draft handling drafts rap feature use abap2ui5 headline features abap restful application programming model built business objects know drill add behavior definition define table framework takes care rest shadow pessimistic lock standard actions edit resume activate discard less well known none tied fiori elements odata because implemented inside object consumer speaks eml entity manipulation language gets full lifecycle free app exactly call sap handles locking persistence provides top page serves audiences already new part wiring view instead feel skim ahead four building blocks never heard read next section explains concept scratch keep mind invention simply consumes imagine user opens form fills half pulled meeting normal save either commit finished possibly invalid data lose everything third option private work progress copy parked safely server until ready finalize solve real problem modern stateless web uis classic dynpro applications could hold long kept transaction open cannot between clicks session holding anything answer persist intermediate state side let manage powers familiar through apps get helpful mental everyday analogy active record published document everyone unsaved changes hitting publish replaces close without saving thrown away while underlying locked nobody else time held means stay browser come back tomorrow where left off drive enabled directly like see eml.md specific api nothing configure statements examples below identically program adds binding values input fields reacting button events walking code tip don build 4hana btp environment steampunk many ship bos i_banktp ships create calls via every follows simple picture head arrow updated saved database edits unchanged acquires change types finish write throw operations recognize immediately these once wired buttons acquire existing modify entities bank execute value key bankcountry bankinternalid failed reported is_draft working difference flag swiftcode longbankname if_abap_behv result promote actual row release untouched creating brand identical cid new_bank deutdeff mapped first minimal featured version here smallest actually works three things start makes sense advanced playground run needs cds system class z2ui5_cl_sample_draft_min public interfaces z2ui5_if_app bank_country type length bank_internal_id swift_code long_bank_name string protected client ref z2ui5_if_client methods view_display endclass implementation method main check_on_navigated our initial endif elseif check_on_event push typed update control message_toast_display endmethod z2ui5_cl_ui5_view_builder factory ele mvc xmlns sap.m sap.ui.core.mvc sap.ui.layout.form shell title simpleform editable abap_true content tag label text name bind swift emphasized press event stringify complete numbered comments map onto diagram warning why steps notice bound roundtrip lives variables yet forgetting step common beginner mistake succeeds saves old world screen always startup isn ideal locks moment anyone looks production few behaviors show modes inputs handle someone confirm discarding silently builds uses mode display holds toggling drives entire begin on_init reads renders touched users still draft_open abap_false read_active status_text click make actives return entering check switch cabnk_bank_d joined sdraft_admin find out whether exists owns simplified snippet end additionally timestamp check_existing_draft select single created_by last_changed_at inner join draft_key draftadministrativedatauuid draft_info subrc fresh draft_acquire draft_read uname popup choice message_box_display found emphasizedaction onclose startup_answered different enter branches straight ask box refuse explanatory status keyword acquiring created action param preserve_changes tells overwriting defensive even though checked clear messages edit_bank collect successful switches resuming picks contents draft_resume reading rather save_current_to_draft rv_success helper called exiting dropped compare switching asks did yes explicitly chooses has_changes_vs_active rv_changed xsdbool on_event_edit_toggle decide silent picking runs leaves later executes releasing reverting activating activation currently success returns on_event_activate act_bank activated successfully dispatcher wires above edit_toggle get_event_arg on_event_startup_resume on_event_startup_discard exit_answered on_event_exit_keep on_event_exit_discard itself simple_form whose per flags follow primary flip based details example z2ui5_cl_sample_draft abap_bool on_event_leave_app returning exit_edit_mode leave_app showing exited detected exit now treat unknown stays ended loop assigning field symbol msg if_message get_text endloop discarded original restored lv_owner lv_timestamp lv_time_text iso last changed since resumed starting nav_app_leave lv_edit_button_text cond lv_edit_button_type default lv_form_title header navbuttonpress shownavbutton check_app_prev_stack country textarea rows pitfalls quick checklist mistakes beginners hit often symptom cause fix were pushed persisted missing buffer wrong errors leftover previous lost leaving prompt story inspecting failure names match released current releases may differ covers master etc consume way documentation https help.sap.com docs cloud need non expert_more lock.md","url":"https://abap2ui5.github.io/docs/cookbook/eml_cds_sql/draft_handling.html"},{"area":"docs","group":"Cookbook","title":"CDS","text":"All examples in these docs work without CDS.","headings":[["ABAP CDS","abap-cds"]],"terms":"cds examples these docs work without recent abap release read data through views abap2ui5 apps core services let define structured straight database example below fetches sales orders i_salesorder view virtual model vdm shows ui5 table playground run button reads system class z2ui5_cl_sample_cds definition public section interfaces z2ui5_if_app mt_salesorder type standard empty key protected private endclass implementation method main client check_on_navigated select fields salesorder salesordertype salesorganization rows z2ui5_cl_ui5_view_builder factory ele mvc xmlns sap.m sap.ui.core.mvc page items bind columns column tag text end columnlistitem cells view_display stringify endif endmethod","url":"https://abap2ui5.github.io/docs/cookbook/eml_cds_sql/cds.html"},{"area":"docs","group":"Cookbook","title":"ABAP SQL","text":"ABAP SQL is the standard way to read and change data in the database directly from ABAP.","headings":[["Read Data","read-data"],["Filter with a Search Field","filter-with-a-search-field"],["Aggregations and Joins","aggregations-and-joins"],["Change Data","change-data"]],"terms":"abap sql standard way read change data database directly abap2ui5 controller issue select insert update delete modify statements program bind result straight ui5 view example below selects flights sflight table shows playground run button browser class z2ui5_cl_sample_sql definition public section interfaces z2ui5_if_app mt_flights type empty key protected private endclass implementation method main client check_on_navigated fields carrid connid fldate price currency order rows z2ui5_cl_ui5_view_builder factory ele mvc xmlns sap.m sap.ui.core.mvc shell page items columns column tag text carrier end connection date columnlistitem cells view_display stringify endif endmethod filter search field term every event load_data render elseif check_on_event scarr carrname url where mv_search like mt_carriers aggregations joins work report bound inner join sum seatsocc total_seats group descending lt_stats issued handlers wrap transaction commit explicitly save zorders mt_orders subrc else rollback tip sourced virtual model prefer reading cds cds.md instead base tables get business semantics associations authorization checks out box","url":"https://abap2ui5.github.io/docs/cookbook/eml_cds_sql/abap_sql.html"},{"area":"docs","group":"Cookbook","title":"Snippets","text":"Copy-paste starting points for the most common app shapes.","headings":[["Basic App Structure","basic-app-structure"],["Selection Screen","selection-screen"],["Write Output","write-output"],["Basic Table","basic-table"],["Table with Sorting","table-with-sorting"],["Working Samples","working-samples"]],"terms":"snippets copy paste starting points common app shapes snippet complete self contained class drop activate launch name abap2ui5 landing page basic structure skeleton every starts implement z2ui5_if_app dispatch lifecycle phases case abap_true build view check_on_init react user actions check_on_event abap z2ui5_cl_app_skeleton definition public section interfaces protected private endclass implementation method main client data z2ui5_cl_ui5_view_builder factory ele mvc xmlns sap.m sap.ui.core.mvc title tag text hello world button press event view_display stringify message_box_display pressed endcase endmethod selection screen classic input form few fields bound bind triggers backend logic results shown submission z2ui5_cl_app_selection carrid type string connid fldate sap.ui.layout.form simpleform criteria editable content label carrier value connection flight date datepicker end footer overflowtoolbar toolbarspacer execute emphasized run search executing write output quickest way surface html cl_demo_output get render ui5 control useful prototypes porting demo programs see cookbook expert_more demo_output full css block minimal version playground premise transpiler z2ui5_cl_app_write_output check_on_navigated begin_section report write_data uname datum core sap.ui.core endif table read internal three columns cell template per column z2ui5_cl_app_table_basic types begin ty_row descr rows standard empty key times insert index item sample row enddo items description columnlistitem cells sorting sap.m.table built filtering work sort new order reaches rendered response nothing else call z2ui5_cl_app_table_sort status cond mod open closed sortable growingthreshold sticky columnheaders growing headertoolbar toolbar orders sort_name sort_status elseif interactive personalization dialog visibility multi grouped filters pair sap.m.p13n.engine use smarttable variant management supported natively smart controls smart_controls samples start generated scripts link samples.mjs edit working apps catalogue https github.com blob samples.md describes single pull repository abapgit abapgit.org app_start basics smallest z2ui5_cl_smp_app_493 src z2ui5_cl_smp_app_493.clas.abap iii init navigated z2ui5_cl_smp_app_495 z2ui5_cl_smp_app_495.clas.abap events views roundtrips z2ui5_cl_smp_app_004 z2ui5_cl_smp_app_004.clas.abap","url":"https://abap2ui5.github.io/docs/cookbook/expert_more/snippets.html"},{"area":"docs","group":"Cookbook","title":"Value Help","text":"Value help (the classic ABAP F4 input help) lets users pick a value from a list instead of typing it.","headings":[["Suggestions on the Input","suggestions-on-the-input"],["Selection Popup","selection-popup"],["DDIC Search Help","ddic-search-help"],["Custom Dialog","custom-dialog"],["Working Samples","working-samples"]],"terms":"value help classic abap input lets users pick list instead typing abap2ui5 covers basics built popups build anything custom top suggestions lightest variant type ahead bound popup roundtrip initial render bind suggestionitems internal table columns via suggestion_item template types begin ty_country code length name string end data mt_countries standard mv_country germany france italy view z2ui5_cl_ui5_view_builder factory ele mvc xmlns sap.m sap.ui.core.mvc core sap.ui.core page client showsuggestion abap_true tag listitem text additionaltext view_display stringify selection dialog open candidates let press event write chosen back sub app navigation involved second class selected row simply attribute z2ui5_cl_sample_f4 definition public section interfaces z2ui5_if_app ty_s_carrier carrid carrname mv_carrid mt_carriers empty key protected private endclass implementation method main case check_on_navigated title placeholder icon valuehelprequest showvaluehelp check_on_event system select scarr lufthansa united airlines american singapore fragmentdefinition choose airline items standardlistitem description active val t_arg popup_display get_event_arg popup_destroy endcase endmethod travels argument nothing looked again way makes pressable without never fires ready made picker sorting multi search field add https github.com addons carries pass i_multiselect result ls_res ddic helps exist objects se11 generic builder axelmohnen a2ui5 generic_search_hlp wraps framework fire get picked install like resources addons.md neither fits e.g filter bar multiple ranges fuzzy separate call nav_app_call see separated popup_popover popup.md pattern samples start generated scripts link samples.mjs edit working complete apps sample catalogue blob samples.md use describes single pull repository abapgit abapgit.org app_start z2ui5_cl_smp_app_009 src z2ui5_cl_smp_app_009.clas.abap multiinput tokens z2ui5_cl_smp_app_078 z2ui5_cl_smp_app_078.clas.abap","url":"https://abap2ui5.github.io/docs/cookbook/expert_more/value_help.html"},{"area":"docs","group":"Cookbook","title":"Demo Output","text":"Familiar with CL_DEMO_OUTPUT from classic ABAP? You can show its HTML output inside an abap2UI5 app too.","headings":[],"terms":"demo output familiar cl_demo_output classic abap show html inside abap2ui5 app handy quick data visualization porting existing demos approach build get inject css styles via cc_plain_xml inserts raw xml view render result ui5 control block needed because produces specific class names e.g heading1 header body need matching style definitions correctly tip technique fits prototyping programs production apps proper views instead method z2ui5_if_app main lv_style type text font family arial size table caption weight bold align left span.heading1 color span.heading2 span.heading3 span.heading4 span.normal normal span.nonprop courier new span.nowrap white space nowrap span.nprpnwrp tr.header background d3d3d3 tr.body efefef generate database query select scarr carriers lv_html title attribute tooltip mouse over paragraph display z2ui5_cl_ui5_view_builder factory ele mvc xmlns sap.m sap.ui.core.mvc core sap.ui.core shell page tag content client view_display stringify endmethod","url":"https://abap2ui5.github.io/docs/cookbook/expert_more/demo_output.html"},{"area":"docs","group":"Cookbook","title":"E-Mail","text":"abap2UI5 has no e-mail control of its own ","headings":[["Plain Text Mail","plain-text-mail"],["Attachment","attachment"],["Compatibility","compatibility"]],"terms":"mail abap2ui5 control sending plain abap via cl_bcs_message cl_bcs older releases part normal event handler gathers form fields calls bcs api text playground run button premise class transpiler implement z2ui5_cl_sample_email definition public section interfaces z2ui5_if_app data mv_to type string mv_subject mv_body protected private endclass implementation method main case abap_true client check_on_init view z2ui5_cl_ui5_view_builder factory ele mvc xmlns sap.m sap.ui.core.mvc sap.ui.layout.form page title send simpleform editable content tag label input value bind subject body textarea press view_display stringify check_on_event try lo_mail create_persistent set_subject conv set_main cl_bcs_convert string_to_soli add_recipient i_address i_address_type int i_with_error_screen abap_false commit work message_toast_display queued catch cx_root message_box_display get_text endtry endcase endmethod attachment reuse file upload device_capabilities upload_download.md flow capture base64 hand lv_xstring cl_web_http_utility decode_x_base64 mv_attachment_base64 add_attachment iv_attachment_type pdf iv_attachment_subject mv_attachment_name iv_attachment_size xstrlen i_attachment_content_hex xstring_to_solix tip sapconnect scot must configured actually leave system see anything sost where look first compatibility modern cloud check released platform structure example stays changes","url":"https://abap2ui5.github.io/docs/cookbook/expert_more/email.html"},{"area":"docs","group":"Cookbook","title":"Fuzzy Search","text":"On SAP HANA you can match strings tolerantly ","headings":[["Minimal Example","minimal-example"],["Tuning the Threshold","tuning-the-threshold"],["Multiple Columns","multiple-columns"],["Returning the Score","returning-the-score"]],"terms":"fuzzy search sap hana match strings tolerantly typos missing letters transposed characters contains sql function mode score value between 0.0 1.0 exact pass threshold filters out rows below wire ui5 search_field table toolbar get alv style forgives user typing minimal example playground run button reads kna1 browser neither abap class z2ui5_cl_sample_fuzzy definition public section interfaces z2ui5_if_app types begin ty_customer kunnr type name1 ort01 end data mt_customers standard empty key mv_search string protected private endclass implementation method main case abap_true client check_on_init load_data render check_on_event endcase endmethod col pattern available 0.8 tolerates short word select fields where view z2ui5_cl_ui5_view_builder factory ele mvc xmlns sap.m sap.ui.core.mvc shell page title customers items bind growing headertoolbar overflowtoolbar tag text customer list toolbarspacer searchfield width 20rem placeholder try misspelled name event columns column city columnlistitem cells view_display stringify muller matches müller hambrug hamburg lower lenient noisier result tuning behaviour like without wildcards 0.9 strict tiny variations default sweet spot 0.7 words start matching unrelated mostly noise real multiple several once returns best across stras returning order relevance expose sort rank descending warning non databases statement raises error guard behind release check fall back code may elsewhere tip full set options textsearch similarcalculationmode spellcheck see guide https help.sap.com docs sap_hana_platform 691cb949c1034198800afde3e5be6570 ee08fb15621c4cb98ce8acaef8b3a48d.html","url":"https://abap2ui5.github.io/docs/cookbook/eml_cds_sql/fuzzy_search.html"},{"area":"docs","group":"Cookbook","title":"Debugging","text":"Since all logic runs in ABAP, you can debug everything in the ABAP environment.","headings":[["Backend","backend"],["Frontend","frontend"],["Developer Tools","developer-tools"],["UI5 Inspector","ui5-inspector"],["Issues","issues"]],"terms":"debugging since logic runs abap debug everything environment set external breakpoint because abap2ui5 apps called externally via http backend app code check xml view builds correctly events fire expected frontend behaves like standard ui5 usual tools features work developer press ctrl f12 open built showing data model inspection configuration debug.png tabs cover whole roundtrip error log system info previous request response source every slot main popup popover nested rendered footer offers logout restart jump adt export bundles including running class blob attach bug report popups carry copy clipboard button purpose inspector another option sap default tool https chromewebstore.google.com detail bebecogbafbighhaildooiibipcnbngo issues looks correct suspect framework build minimal sample reproduces issue repository investigate fix","url":"https://abap2ui5.github.io/docs/configuration/debugging.html"},{"area":"docs","group":"Cookbook","title":"Common Failures","text":"Not every problem raises an ABAP exception.","headings":[["Binding-Path Mismatch","binding-path-mismatch"],["Bound Attribute Not Public","bound-attribute-not-public"],["Type Coercion Without an Explicit UI5 Type","type-coercion-without-an-explicit-ui5-type"],["Write-Back Through a Typed Formatter","write-back-through-a-typed-formatter"],["Malformed XML","malformed-xml"],["Forgotten view_display( ) After a Structural Change","forgotten-view-display-after-a-structural-change"],["Re-Rendering on Every Event","re-rendering-on-every-event"],["Popup Not Destroyed","popup-not-destroyed"],["Event-Name Casing Mismatch","event-name-casing-mismatch"],["State Lost Between Events","state-lost-between-events"],["Error Index","error-index"],["Working Samples","working-samples"]],"terms":"common failures every problem raises abap exception many surface browser fail silently look like framework bugs actually pattern mistakes sections below cover ten ones symptom looks where find real cause tip developer tools first press ctrl f12 running app open built configuration debugging error log previous request response tabs show devtools steps dig without leaving binding path mismatch bind resolve against json model frontend typically because public attribute was renamed data never sent mistyped ui5 raise control simply renders empty default value console logs warning field found sap.ui.model.json.jsonmodel filter sap.ui.model network tab inspect abap2ui5 payload included verbatim absent named differently answer side nothing backend learns failed asserting warnings way catch tests drops write back invalid keeps old next event cross check debugger mysteriously updating bound resolves attributes via dynamic assign sees section anything declared protected private local variable cannot says rather shrugging z2ui5_cx_ui5_util_error binding_error class please values catches out roundtrip answers message lands view val cell thing under binding_error_tab_cell_level text itself unlike failure reported name reading looking above visibility definition helper variables appear call stay must move see cookbook type coercion explicit share system goes wire yyyymmdd datepicker expects iso date abap_bool arrives checkbox true false packed numbers arrive strings locale formatting raw parses wrong treats shows refuses input always unchecked even abap_true numeric inputs lose decimals render separator fix attach sap.ui.model.type.date float currency formatter mapping table patterns through typed wrapped parts sap.ui.model.type owns directions display parse user types match expectations code stale parseexception enter valid format verify formatoptions constraints direction entry uses injected full string malformed xml z2ui5_cl_ui5_view_builder produces typo unclosed tag aggregation contains child break parsing entirely surfaces depends went pure syntax errors bad escape parser fails page blank broken element unknown controls namespaces load sap.m.notacontrol similar surrounding may partially contain drop layouts unexpected ways none these exceptions view_display accepts notices something screen forgotten structural change automatically check_on_init navigation return whenever structure different new dialog switch between screens handler client stringify skip tree reach branch missing button visible though state changed ran confirm check_on_event executes bug almost life cycle event_navigation life_cycle rendering opposite mistake calling rebuilt causes flicker click lost scroll position tables focus cursor noticeably slower responses large views rebuild changes mutations edit save row update popup close mutate serializes rebinds lifecycle pitfalls destroyed popup_display opens top existing main stays modal until finishes workflow cancel explicitly calls popup_destroy forget destroy over appears unresponsive captured layer right second reopens pair ends need happy popup_popover worked example walkthrough popups step tutorials casing post matches fires exact case typical paired stray whitespace template skipped runs compare character literal prefer cs_event constants provides open_new_tab set_title scroll_to custom events declare constant reference source typos compile instead failing runtime instance serialized draft record server read carries serializable survive everything written declarations inside database cursors acquired locks ref references non objects set calculated gone time clicks singleton global reset roundtrips surviving method concrete needs serialization app_serialization_error resources genuinely live across file handles persistent expensive caches statefulness expert_more expires four hours left longer starts fresh restoring index start behavior end front yours caused explained zcl exist could instantiate app_start url exists activated activate quickstart get_started launch covers around covered range tab_index names off based refilled shortened computed current component classic passing copy work area another column still generic object chained gave dispatch limit navigations reached endless nav_app_call nav_app_leave loop apps hand forever single often unconditionally check_on_navigated called immediately navigates again guard inner_app sap resolved requested get release serves ele footer naming parent tries sap.m.dialog newer releases older use buttons linter advanced decides target expected enum property dies empties valuestate null unfilled member passes comes emptied evaluates behind keep initial omit_initial_paths api give fallback evalerror evaluating javascript violates following content security policy directive loads hardened csp unsafe eval meets 1.71 ui5loader module either bootstrap modern hardening dropping icfeuconforbidden separately deployed action posts http service manifest.json say tried align sap.app.datasources.http.uri created cloud s4_public_cloud paths ships literals line allowed abapgit pull afterwards import characters reports stub imported split long chunks package really arrived icon anywhere pool finds effectively insensitive matched lower cased camelcase entered font checks eml specific handling transactional cx_abap_behv cx_abap_lock_failure defensive try eml_cds_sql samples generated scripts link samples.mjs working complete sample catalogue https github.com blob samples.md describes repository abapgit.org basics z2ui5_cl_smp_app_496 src z2ui5_cl_smp_app_496.clas.abap","url":"https://abap2ui5.github.io/docs/cookbook/troubleshooting/common_failures.html"},{"area":"docs","group":"Configuration","title":"Setup","text":"Every UI5 application has an index.html that bootstraps the framework, picks a theme, loads a UI5 version and so on.","headings":[["What You Can Configure","what-you-can-configure"],["See Also","see-also"]],"terms":"setup every ui5 application index.html bootstraps framework picks theme loads version abap2ui5 don maintain file hand generates page load change ends implement z2ui5_if_ui5_exit interface abap class zcl_a2ui5_user_exit definition public section interfaces endclass implementation method set_config_http_get configuration goes here endmethod called once per request i.e browser asks html shell changing parameter cs_config holds value generated configure field affects data sap bootstrap script bootstrapping ui5_bootstrapping src delivery channel attributes bootstrap_attributes t_add_config additional style css style_css styles_css inline block head language logon_language url session locale security relevant headers content policy meta tag configured separately see tab title list always carries user sees set running app set_title frontend event cookbook browser_interaction official documentation https sapui5.hana.ondemand.com topic 91f2cebe7c8e4d289fd80a4f0c0bd2ca options 91f2d03b6f4d1014b6dd926db0e91070 exit advanced extensibility user_exits documents hook","url":"https://abap2ui5.github.io/docs/configuration/setup.html"},{"area":"docs","group":"Configuration","title":"Installation","text":"abap2UI5 apps run directly via an HTTP service ","headings":[["S/4 Public Cloud","s-4-public-cloud"],["S/4 Private Cloud","s-4-private-cloud"],["S/4 On-Premise","s-4-on-premise"],["R/3 NetWeaver","r-3-netweaver"],["R/3 NetWeaver (<7.50)","r-3-netweaver-7-50"],["BTP ABAP Environment","btp-abap-environment"]],"terms":"installation abap2ui5 apps run directly via http service fastest simplest setup works every abap release language versions standard cloud production use may need extra considerations across different system environments public endpoint needs s_develop authorization makes unfit make app reachable business users install separate frontend add tile see configuration s4_public_cloud details private manage authorizations sap fiori launchpad premise matches follow guide netweaver depending might able launchpads 7.50 below downported version syntax tweaks earlier releases runs far back 7.02 downporting advanced btp environment","url":"https://abap2ui5.github.io/docs/configuration/installation.html"},{"area":"docs","group":"Configuration","title":"Theme","text":"The theme defines the look and feel of every UI5 control ","headings":[["Available Themes","available-themes"],["End-User Override","end-user-override"],["Custom Themes","custom-themes"]],"terms":"theme defines look feel every ui5 control colours fonts paddings spacings hand written index.html set via data sap attribute bootstrap script abap2ui5 abap method z2ui5_if_ui5_exit set_config_http_get cs_config sap_horizon_dark endmethod leave field empty falls back sap_horizon available themes shipped current versions name description default horizon light dark sap_horizon_hcb high contrast black sap_horizon_hcw white sap_fiori_3 quartz previous sap_fiori_3_dark sap_fiori_3_hcb sap_fiori_3_hcw sap_belize belize older blue sap_belize_plus plus grey background see official list https sapui5.hana.ondemand.com topic 4cfe7eff3001447a9d4b0abeaba95166 date catalogue end user override runtime url parameter z2ui5 sample convenient trying out without redeploying custom brand specific logos use designer be8f7c61bb2444299b3f3429b986e8be generate self contained host system web server loads relative src location lives elsewhere register path roots theming documentation 91f2cebe7c8e4d289fd80a4f0c0bd2ca bigger picture","url":"https://abap2ui5.github.io/docs/configuration/setup/theme.html"},{"area":"docs","group":"Configuration","title":"Bootstrapping","text":"Bootstrapping is the process of loading the UI5 runtime into the browser.","headings":[["Pick a Bootstrap Source","pick-a-bootstrap-source"],["Common Sources","common-sources"],["OpenUI5 vs SAPUI5","openui5-vs-sapui5"],["Pinning a Version","pinning-a-version"],["Cache-Buster","cache-buster"],["Local Hosting","local-hosting"],["See Also","see-also"]],"terms":"bootstrapping process loading ui5 runtime browser abap2ui5 generates script src sap core.js tag page head url decides version loaded delivery channel cdn server whether cache buster active pick bootstrap source abap method z2ui5_if_ui5_exit set_config_http_get cs_config https ui5.sap.com 1.116.0 resources endmethod without override uses openui5 i.e current latest build see pinning below relying production common sources use sdk.openui5.org cachebuster enabled default 1.120.0 pinned sapui5 sapui5.hana.ondemand.com legacy host name still works preferred alias public ui5_ui5 locally hosted system 1.71 oldest supported tip csp older releases module loader relies eval content security policy therefore includes unsafe even bootstraps out box pin modern release consider removing extra hardening dropping configuration apache licensed open subset contains libraries typical app sap.m sap.ui.core sap.ui.layout sap.ui.table sap.ui.unified sap.uxap sap.f sap.tnt sap.viz superset adds e.g sap.ui.comp smart controls valuehelpdialog sap.suite.ui.commons sap.ui.generic.app fiori elements floorplans need available covers vast majority apps stick switch genuinely control library hard coding keeps stable ships new patch serves evergreen convenient break next time rolls change productive explicitly urls containing append versioned token every asset invalidated automatically whenever intentionally stay local hosting gateway repository installed serve instead faster intranet offline avoids external dependency basis admin keep ui5_versions approaches official documentation variants topic 2d3eb2f322ea4a82983c1c62a33ec4ae tags 91f2cebe7c8e4d289fd80a4f0c0bd2ca attributes setup bootstrap_attributes add data parameters","url":"https://abap2ui5.github.io/docs/configuration/setup/ui5_bootstrapping.html"},{"area":"docs","group":"Configuration","title":"Bootstrap Attributes","text":"The UI5 bootstrap script tag in index.html accepts a long list of data-sap-ui- attributes ","headings":[["Add or Override Attributes","add-or-override-attributes"],["Useful Attributes","useful-attributes"],["See Also","see-also"]],"terms":"bootstrap attributes ui5 script tag index.html accepts long list data sap control asynchronous loading compatibility version clickjacking protection locale preloaded libraries many abap2ui5 already sets sensible defaults html src core.js theme sap_horizon resourceroots z2ui5 oninit oninitcomponent compatversion edge async true frameoptions trusted bindingsyntax complex add override attribute append row cs_config t_add_config contributes name value pair abap method z2ui5_if_ui5_exit set_config_http_get libs sap.m sap.ui.table language allow preload endmethod useful purpose comma separated e.g trade load time against startup speed overrides browser see configuration setup logon_language controls behaviour deprecated apis module default change legacy reasons preloading strategy sync empty off deny allowlistservice endpoint url allowlist service binding syntax simple expressions require additional resource roots custom componentpreload component large apps set overridden wins over framework official options parameters reference https sapui5.hana.ondemand.com topic 91f2d03b6f4d1014b6dd926db0e91070 authoritative every supported bootstrapping ui5_bootstrapping source","url":"https://abap2ui5.github.io/docs/configuration/setup/bootstrap_attributes.html"},{"area":"docs","group":"Configuration","title":"Style / CSS","text":"UI5 supports app-specific CSS in addition to the theme.","headings":[["When to Use Custom CSS","when-to-use-custom-css"],["Tips","tips"]],"terms":"style css ui5 supports app specific addition theme abap2ui5 injects whatever string assign cs_config styles_css directly block page head selector write applied application abap method z2ui5_if_ui5_exit set_config_http_get body background color f5f5f5 myredbutton red font weight bold endmethod xml view reference class via property tag button text delete use custom tweak spacing colours fonts expose control features don built option e.g corporate image override sap look edge cases larger visual changes brand logo prefer official designer https sapui5.hana.ondemand.com topic be8f7c61bb2444299b3f3429b986e8be produces self contained host yourself keeps styles maintainable across upgrades tips careful selectors target internals sapmbtn sapuitablecell part public api may change between versions wrap rules parent myapp sapmtitle limit reach inside templates curly braces must escaped see styling documentation 9c9e14990d864bb799d70d2bc6c7d4f7 guidance safe customise","url":"https://abap2ui5.github.io/docs/configuration/setup/style_css.html"},{"area":"docs","group":"Configuration","title":"Language","text":"abap2UI5 picks the user's logon language automatically from the SAP session ","headings":[["Override the Backend Language","override-the-backend-language"],["Override the UI5 Frontend Locale","override-the-ui5-frontend-locale"],["Forcing the Frontend Locale at Startup","forcing-the-frontend-locale-at-startup"],["See Also","see-also"]],"terms":"language abap2ui5 picks user logon automatically sap session every text element odata cds label message class returned applications extra configuration required override backend force specific startup append url parameter z2ui5 sample value character iso code e.g internal keys work server sets request reads calls translated texts use locale ui5 frontend framework keeps separate date number formatting control labels search cancel calendar week default derives browser pin apps don need agree practice set explicitly full test environments forcing via bootstrap instead relying abap method z2ui5_if_ui5_exit set_config_http_get cs_config t_add_config data endmethod see attributes setup bootstrap_attributes mechanism reference https help.sap.com doc saphelp_nw75 7.5.5 46468c433b40c3b87b2e07f34dea1b content.htm no_cache true list supported parameters official documentation sapui5.hana.ondemand.com topic 91f21f176f4d1014b6dd926db0e91070","url":"https://abap2ui5.github.io/docs/configuration/setup/logon_language.html"},{"area":"docs","group":"Configuration","title":"Security","text":"abap2UI5 is a backend-centric framework. All logic and business data stay on the server; the frontend gets only the data it needs to render the view.","headings":[["HTTP Endpoint","http-endpoint"],["Authentication","authentication"],["Authorization","authorization"],["Backend Code","backend-code"],["Frontend Code","frontend-code"],["Business Logic","business-logic"],["Content-Security-Policy","content-security-policy"],["Default CSP","default-csp"],["Customizing the CSP","customizing-the-csp"],["Hardening: Dropping 'unsafe-eval'","hardening-dropping-unsafe-eval"],["Response headers","response-headers"],["Two headers only an HTTPS installation gets","two-headers-only-an-https-installation-gets"],["Cross-Site Request Forgery (CSRF)","cross-site-request-forgery-csrf"]],"terms":"security abap2ui5 backend centric framework logic business data stay server frontend gets needs render view http endpoint runs handler build call api inside users access calling externally managed like ui5 app authentication icf internet communication node level handles get full control over configuration including visibility settings login procedures authorization developer flexibility set either service details setting see page code ships custom once installed change needed compatible future updates avoid direct changes core codebase single application spa built sapui5 openui5 delivers first request line standard practices modern web apps never sends client processes safely sensitive reaches content policy strengthen uses csp default blocks attacks cross site scripting xss injection restricting resources browser load allows fixed trusted sources sap cdns plus jsdelivr cdnjs complete shown below carries hardening directives object src none base uri self block plugin pin origin deliberately frame ancestors browsers ignore directive meta log console warning framing forbidden real options response header instead headers contain unsafe eval ui5loader 1.71 oldest supported release still evaluates module source string without bootstrap fails evalerror releases modules tighten dropping defined z2ui5_cl_ui5_user_exit xml equiv inline ui5.sap.com sapui5.hana.ondemand.com openui5.hana.ondemand.com sdk.openui5.org cdn.jsdelivr.net cdnjs.cloudflare.com schemas connect worker blob customizing adjust user exit advanced extensibility user_exits fills defaults whatever overrides abap method z2ui5_if_ui5_exit set_config_http_get cs_config content_security_policy endmethod weakens protection provides against script keeps because executes fetched via loader involved remove where example https core.js theme sap_horizon loads drop removed bootstrapping old component cannot start shows error failed container reason evaluating javascript violates following allowed every system deploy bootstraps everything done served work sets these out box value sameorigin forbids clickjacking lives ignored type nosniff honours declared guessing referrer strict leaks path query permissions geolocation microphone camera payment usb device apis offers available itself off cache pragma expires store must revalidate roundtrip responses carry state nothing may cached resource embed live t_security_header installation behind proxy already keep override entry delete append transport opener list belong deployment tls whether terminated front hands parameters host scheme coop visible symptom trustworthy localhost plain dropped red been url was untrustworthy broken simply did why longer sent worth having sever window references max age forgery csrf changing post defense relying fronting layer check compares authority referer rejected active fresh install rejects posts accept setup legitimately differs opt set_config_http_post escape hatch disable check_csrf_active abap_false","url":"https://abap2ui5.github.io/docs/configuration/security.html"},{"area":"docs","group":"Configuration","title":"Authorization","text":"abap2UI5 gives you flexibility in managing authorization.","headings":[["Service-Level","service-level"],["Example: Restricting Access Based on URL Parameters","example-restricting-access-based-on-url-parameters"],["Example: Authorization Objects in Service Handlers","example-authorization-objects-in-service-handlers"],["App-Level","app-level"],["Example: Authorization Check in an App Class","example-authorization-check-in-an-app-class"]],"terms":"authorization abap2ui5 gives flexibility managing built mechanism build solution either service app level easiest way manage access different apps add checks http handler approach restricts individual based app_start url parameter directly icf class example restricting parameters use control users get_form_field call reads names launch e.g my_app user requests unauthorized refuses abap z2ui5_cl_my_http_handler definition public section interfaces if_http_extension endclass implementation method handle_request read name request data lv_app to_upper server restrict specific return endif z2ui5_cl_ui5_http_handler run endmethod objects handlers pair sap below uses custom object z_app_auth field define transaction su21 assign matching roles system check authority subrc failed refuse authorized create multiple endpoints departments fine tune alternatively handle within classes works well want permissions acting like traditional playground button needs browser neither z2ui5_cl_app z2ui5_if_app mv_status type string protected private main client check_on_navigated showing anything z2ui5_app_001 say blank screen looks broken message_box_display text error title else uname view z2ui5_cl_ui5_view_builder factory ele mvc xmlns sap.m sap.ui.core.mvc page tag bind view_display stringify refusal branch matters much returning without displaying leaves empty frame nothing indistinguishable crashed happened warning don make sure bypass navigating between","url":"https://abap2ui5.github.io/docs/configuration/authorization.html"},{"area":"docs","group":"Configuration","title":"Performance","text":"abap2UI5 is fast. Almost all processing runs on the ABAP backend, which is much faster than the browser.","headings":[["Call view_display( ) once","call-view-display-once"],["Suggestions","suggestions"],["Performance Issues?","performance-issues"]],"terms":"performance abap2ui5 fast almost processing runs abap backend much faster browser keeps frontend logic minimal business everything goes straight ui5 framework focuses rendering tested tables holding large numbers entries columns build app confidence shouldn concern call view_display once biggest optimization rebuilding view every event client sends new xml model destroys current creates scratch use initialization structure changes change bound attribute return compares roundtrip pushes changed itself refreshes existing via data binding affected controls state scroll position focus method z2ui5_if_app main case abap_true check_on_init z2ui5_cl_ui5_view_builder factory ele mvc xmlns sap.m sap.ui.core.mvc page title tag text bind mv_text button update press stringify check_on_event nothing else either value pushed response endcase endmethod suggestions want tune further few tips needed pure set delta renders paths user actually edited back read untouched fields cost trip declare public attributes class variables shown reading unused values follow standard best practices like cutting loops choosing sorted project issues hit sample submit pull request samples repository glad analyze see whether made even","url":"https://abap2ui5.github.io/docs/configuration/performance.html"},{"area":"docs","group":"Configuration","title":"UI5 Versions","text":"The abap2UI5 frontend uses the SAP UI5 framework, which ships in several distributions and versions.","headings":[["OpenUI5","openui5"],["UI5","ui5"],["UI5 2.x","ui5-2-x"],["Legacy-Free","legacy-free"],["Release-Specific","release-specific"],["Reading the UI5 Version at Runtime","reading-the-ui5-version-at-runtime"],["OpenUI5 or SAPUI5","openui5-or-sapui5"]],"terms":"ui5 versions abap2ui5 frontend uses sap framework ships several distributions choose load during bootstrapping configuration setup ui5_bootstrapping way app system openui5 open source version slightly fewer controls full suits apps samples run incompatibilities show specific use cases called sapui5 delivered distribution preinstalled every abap certain release onward probably already available note itself bootstraps default switch bootstrap instead 2.x newest deprecated apis removed test against change stay compatible upcoming releases legacy free dedicated variant based removes features jquery dependencies synchronous providing preview api surface details see advanced legacy_free properties support many reducing compatibility issues building check reading runtime current state roundtrip read client get custom control extra event needed s_ui5 returns handy dependent branching logging build user runs data e.g 1.141.0 build_timestamp gav group artifact theme sap_horizon field tells loaded com.sap.ui5 modules checking whether contains logic internally detect info part request works check_on_init check_on_navigated text cond string initial unknown running else message_box_display endif tip versioninfo.load fail leaving empty treat rather assuming hence explicit above","url":"https://abap2ui5.github.io/docs/configuration/ui5_versions.html"},{"area":"docs","group":"Configuration","title":"Productive Usage","text":"Technically, abap2UI5 is just an HTTP handler implementation ","headings":[["Stable Version","stable-version"],["Quality Assurance","quality-assurance"],["Renaming","renaming"]],"terms":"productive usage technically abap2ui5 http handler implementation use like service production stable version project evolves time fixed keep changes public apis minimal avoid frequent app refactoring pin release https github.com releases instead tracking main branch update regularly effort low quality assurance every commit framework runs through reaches builds static checks against 7.02 standard abap cloud workflow per line compatibility across supported stacks verified continuously unit tests executed via open technical tools open_abap plus automated browser running sample catalogues double regression corpus hundreds apps validated renaming starting new development already want risk install multiple instances feature advanced lets developing safely without disrupting existing","url":"https://abap2ui5.github.io/docs/configuration/productive_usage.html"},{"area":"docs","group":"Configuration","title":"Transport","text":"Transport abap2UI5 to production like any other ABAP project.","headings":[["Preparations","preparations"],["Transport","transport"]],"terms":"transport abap2ui5 production like abap project preparations smooth rollout follow these steps http service framework first activate explicitly needed adjust ui5 bootstrap source configuration setup ui5_bootstrapping should use different version delivery channel test hello world app confirm works expected finally apps install via abapgit development system standard process deploy image 3.png width","url":"https://abap2ui5.github.io/docs/configuration/transport.html"},{"area":"docs","group":"Configuration","title":"Fiori Launchpad","text":"Embed your abap2UI5 apps into the SAP Fiori Launchpad (FLP) on S/4 On-Premise or Private Cloud.","headings":[["Installation","installation"],["Target Mapping","target-mapping"],["Launchpad Features","launchpad-features"],["Detect the Launchpad Context","detect-the-launchpad-context"],["Set the Tile Title Dynamically","set-the-tile-title-dynamically"],["Read Startup Parameters","read-startup-parameters"],["Cross App Navigation","cross-app-navigation"],["Troubleshooting","troubleshooting"],["Cache Management","cache-management"],["Manual Deployment","manual-deployment"],["Launchpad KPIs","launchpad-kpis"],["Functionality","functionality"],["Approach","approach"],["Further Reading","further-reading"]],"terms":"fiori launchpad embed abap2ui5 apps sap flp premise private cloud app appears regular tile inside shell set title read startup parameters participate cross navigation like installation loads frontend ui5 abap repository system z2ui5 install connector addons https github.com organization via abapgit ships import check index date see troubleshooting below target mapping use these configuration uses class name semantic object gets replace z2ui5_cl_my_app action display url ui5_ui5 parameter app_start features client api gives access context runnable samples z2ui5_cl_smps_app_481 z2ui5_cl_smps_app_484 stack package src detect get check_launchpad_active tells whether currently runs useful hide page header guard abap_false message_box_display feature needs endif dynamically change time set_title_launchpad event follow_up_action val z2ui5_if_client cs_event t_arg value dynamic start arrive pairs t_comp_params data lt_params lv_product product optional navigating between goes through rather roundtrip history back button keep working intent way cookbook event_navigation cross_app sometimes causes cache related issues here clear management recalculate report app_index_calculate calculation selection screen user attachments assets 50c505ab c58e 46a6 999e 67c4e4cdb929 output 81f8feae fcfe aa91 28ce8d681539 distribution layer tab isn visible switch another first usually shows 3fce0f2e 96f9 7940336582b1 recalculation dc149874 496d 90bf 79cb83d8c97d http caches transaction smicm invalidation 497b7677 472e 9b50 34719105a12e browser hard reload manual deployment clearing doesn fix push manually download webapp folder project program ui5_repository_load server img width alt load 2eac29f4 596e 4bab 8a17 7a8f86630b95 kpis extend key performance indicators kpi add svg a2ui5 mark xmlns www.w3.org viewbox aria hidden true path fill currentcolor m12 297c 6.63 5.373 5.303 3.438 9.8 8.205 11.385.6.113.82 258.82 1.04 2.04 3.338.724 4.042 1.61 1.61c4.422 18.07 3.633 17.7 17.7c 1.087 744.084 729.084 1.205.084 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108 776.417 1.305.76 1.605 2.665 5.466 1.332 5.93 1.31.465 2.38 1.235 3.22 1.523.105 3.176 1.005 3.3 1.23.96 1.98 1.02.006 2.04.138 2.28 1.552 3.285 1.23 1.23.645 1.653.24 2.873.12 3.176.765.84 1.91 4.61 2.805 5.625 5.475 5.92.42.36.81 1.096.81 2.22 1.606 2.896 3.286 315.21.69.825.57c20.565 22.092 17.592 12.297c0 6.627 functionality tiles showing count values connector_launchpad_kpi c7db9e46 40d8 a632 be79e2fbcb91 approach integration three steps implement simple interface calls generic odata proxy service delegates compute z2ui5_if_lp_kpi method takes filter string returns integer public methods importing type returning result endinterface next z2ui5_if_app holds logic e.g counting open items database playground run lives carry z2ui5_cl_lp_kpi_hello_world definition section interfaces protected endclass implementation endmethod main z2ui5_proxy_kpi_srv handles rest creates instance many dummy entries configure endpoint text opu entitycollection further reading original article series additional screenshots www.linkedin.com pulse copy host ocn2e upche uuxxe","url":"https://abap2ui5.github.io/docs/configuration/launchpad.html"},{"area":"docs","group":"Configuration","title":"S/4 Public Cloud","text":"Use abap2UI5 for on-stack extension scenarios in S/4 Public Cloud.","headings":[["1. Install abap2UI5 with abapGit","1-install-abap2ui5-with-abapgit"],["2. Mass Activate the Imported Artifacts","2-mass-activate-the-imported-artifacts"],["3. Set Up the HTTP Service","3-set-up-the-http-service"],["4. Deploy the UI5 App (Optional)","4-deploy-the-ui5-app-optional"],["5. Give Business Users Access (Optional)","5-give-business-users-access-optional"]],"terms":"public cloud use abap2ui5 stack extension scenarios uses released apis fully compatible abap language version satisfying sap clean core requirements install follow these steps abapgit supports adt contains classes interfaces tables pull without issues standard installation process eclipse https eclipse.abapgit.org warning choices cannot change later relinking folder logic must prefix abapgit.xml declares repository package tree built keep target name short ships sub packages levels deep src every derived starts pick here caps characters long root leaves deeper ones room fails unlinked linked again against shorter something like zabap2ui5 plenty img width height alt link dialog github.com user attachments assets 9ea46657 5ff5 af12 4b5b359c212d 8f50 2611574c870a operation progress 69eafc9b 7d83 48f8 b970 c68a6a4577ef import log showing pulled artifacts 4e6f ae0a 3138d0eac47e status bar shows completed ee085bb9 d708 4de3 a6f0 5493adc57054 moment completes complete confirmation dab3578e 755f 4a6a adfa 5ef5f04bbfa9 mass activate imported installing repositories arrive inactive manually simplest approach create dedicated active project objects a47fe1f1 46da 96b9 8df3bfe9a99d list requiring activation f7ef6eb9 c13d 4d2f a541 8854ac27300c trigger may refuse first pass because depend still repeat force until empty e133ba2f d284 47fa 8dbe cadee9679f2e 4da2 b3a5 25587a6ad587 message ba6614b9 d79e 41ee 9ba0 6339aaee800f activated explorer 157ed036 cf6a 4d7b b93a 2d8bd20af6cb refresh 86b26c00 e71e 4a3f a9e9 2beaaeddf577 now see 632ea17d 440a 81cd 4d40c526553a set http service build handler branch frontend important accessing endpoint needs s_develop authorization quickest way test development environments makes scenario unfit production finish deployment tile configuration below deploy ui5 app optional enough open developer role deploying reachable business users through launchpad bsp step runs code fiori tools marketplace.visualstudio.com items itemname sapse.sap pack instead clone matches cloud_v2 current runtime git single frontend.git application info page add pointing system place writes descriptors let start semantic object action suit tip where deployed sends requests separately backend serves itself tells post back url branches ship sap.app.datasources.http.uri z2ui5 path published under created different entry manifest.json match otherwise posts exist icfeuconforbidden ucon error say was premise standard_v2 sicf give access opening directly works reached means chain locally next ladi iam catalog space descriptor item navigation parameters naming uppercase lower case rejected form editor save making clear why source edit include publish somewhere click guide developers.sap.com tutorials s4hanacloud procurement purchasereq flp.html covers generic mechanics walkthrough screenshots warren eiserman documented full rap elements blog.decabase.com 4e8a70d961c3 several warnings come write btp environment shares technical base instructions above work systems","url":"https://abap2ui5.github.io/docs/configuration/s4_public_cloud.html"},{"area":"docs","group":"Configuration","title":"BTP ABAP Environment","text":"The setup in BTP ABAP Environment matches S/4 Public Cloud.","headings":[],"terms":"btp abap environment setup matches public cloud follow configuration s4_public_cloud guide","url":"https://abap2ui5.github.io/docs/configuration/btp_abap_env.html"},{"area":"docs","group":"Configuration","title":"BTP Build Work Zone","text":"Embed your abap2UI5 apps into BTP services like SAP Build Work Zone.","headings":[["Configuration","configuration"],["Destination","destination"],["Extra Properties","extra-properties"],["Work Zone Setup","work-zone-setup"],["Further Reading","further-reading"]],"terms":"btp build work zone embed abap2ui5 apps services like sap integration follows usual pattern premise cloud abap backends destination points http service system runs connector app small standalone ui5 addons https github.com organization deployed renders frontend forwards every request through backend content added assigned page role tile starts controlled via app_start parameter serves number tiles logic stays nothing specific configuration create subaccount connectivity destinations name backend_abap2ui5 type description url z2ui5 proxy internet authentication basicauthentication user password systems without direct exposure use onpremise production prefer principal propagation samlassertion setup over basic extra properties needs these additional route requests correctly property value html5.dynamicdestination true lets html5 resolve runtime product.name names client connect e.g webideenabled enables business application studio webideusage odata_abap dev_abap declares supported protocols development tools subscribe standard edition sufficient open site manager deploy repository add assign group everyone pass class start target deployment per opens inside shell picked mobile mobile_start further reading original article series step screenshots installation www.linkedin.com pulse technology platform lf1re ujdqe tutorials cover generic plumbing configure developers.sap.com spa workzone..html integrate zone..html","url":"https://abap2ui5.github.io/docs/configuration/btp.html"},{"area":"docs","group":"Configuration","title":"Mobile Start","text":"SAP Mobile Start surfaces your abap2UI5 apps as tiles in SAP's native mobile entry-point app (iOS/Android).","headings":[["Setup","setup"],["Further Reading","further-reading"]],"terms":"mobile start sap surfaces abap2ui5 apps tiles native entry point app ios android extra development needed mirrors content build work zone site setup complete btp configuration destination abap system deployed connector added enable settings connect device typically scanning code page every tile assigned user role automatically appears tapping opens shell rendered backend since views responsive ui5 controls phones check layouts narrow screens mind see model cookbook device_model adapting further reading original article step screenshots https www.linkedin.com pulse integration business technology platform uzure","url":"https://abap2ui5.github.io/docs/configuration/mobile_start.html"},{"area":"docs","group":"Advanced Topics","title":"Downporting","text":"abap2UI5 works right away on ABAP 7.50 and later.","headings":[["Branch","branch"],["Installation","installation"],["How It Works","how-it-works"],["Why abap2UI5 Is Downportable","why-abap2ui5-is-downportable"],["Further Reading","further-reading"]],"terms":"downporting abap2ui5 works right away abap 7.50 later earlier release install downported version supports netweaver 7.02 branch older system use main public cloud btp environment private premise sample projects repositories ship check whether available installation old follows normal configuration flow adjustments pull abapgit itself compatible deployment ecc machines way everywhere else create http handler sicf service syntax instead modern snippet call browser ready even machine want reach these apps rfc connector advanced calls legacy systems via destination integrating steampunk fiori launchpads sap mobile start offers over maintained hand generated automated github actions workflow every change pipeline runs abaplint https abaplint.org downport rule fix target rewrites equivalents example inline declarations data separate statements constructor expressions value new conv classic xsdbool boolc string templates concatenation where needed few small compatibility ups follow e.g replacing exception types don exist releases result committed because transformation fully automatic stays feature identical never wait manual backport since code line contributors write debug mechanism project npm run auto_downport guarantee downportable why rewriting last step codebase everything newest four design principles basic technology odata services cds views eml none eccs conversely gui forbidden universally plain defined eclipse needs communication dependencies apis like ui2 cl_json function modules may missing behave differently certain availability per poorly documented therefore replaces open source possible importantly ajson technical tools json handling ships bundled under z2ui5 namespace browse dotabap.org reduce independent dependency unavoidable different language generating uuids uses hybrid approach dynamic api falls back standard errors either side always elegant pragmatic written automatically described above keep mind set next further reading background article running www.linkedin.com pulse mjkle","url":"https://abap2ui5.github.io/docs/advanced/downporting.html"},{"area":"docs","group":"Advanced Topics","title":"User Exits","text":"abap2UI5 offers predefined user exits for tweaking the standard behavior.","headings":[],"terms":"user exits abap2ui5 offers predefined tweaking standard behavior interface z2ui5_if_ui5_exit https github.com blob main src z2ui5_if_ui5_exit.intf.abap exposes use system build class implements methods z2ui5_cl_ui5_user_exit z2ui5_cl_ui5_user_exit.clas.abap calls dynamically put custom package packages exit set_config_http_get called initial http get request page load set frontend properties like ui5 theme version inline css set_config_http_post every later post roundtrip backend draft expiration time take cs_config changing parameter whose fields needed example below changes long keeps drafts abap zcl_a2ui5_user_exit definition public section interfaces endclass implementation method sap_belize endmethod draft_exp_time_in_hours csrf protection default disable endpoint must accept cross origin posts see security check_csrf_active abap_false unhandled exception answered body carries whole chain names source positions context priceless while developing production should hand browser replaces bare internal server error check_hide_error_details abap_true","url":"https://abap2ui5.github.io/docs/advanced/extensibility/user_exits.html"},{"area":"docs","group":"Advanced Topics","title":"Frontend","text":"The abap2UI5 frontend artifacts live in the app folder.","headings":[["Setup","setup"],["Build & Test","build-test"],["Before PR (Optional)","before-pr-optional"]],"terms":"frontend abap2ui5 artifacts live app folder adjust setup open code editor choice run terminal git clone https github.com next replace system three config files ui5.yaml ui5 local.yaml mock.yaml point abap backend img width alt where url must replaced src user attachments assets 155c9a3f 8a0a 494b 8fc4 a4bba2bf0e90 build test http service uses different path sap z2ui5 endpoint manifest npm start noflp see output like showing local dev server running 3e0118e8 d05f 48d1 bcc0 28073adf6e47 optional convert stringified auto_app2abap","url":"https://abap2ui5.github.io/docs/advanced/extensibility/frontend.html"},{"area":"docs","group":"Advanced Topics","title":"Custom Controls","text":"You can build your own UI5 custom controls and use them in abap2UI5 apps.","headings":[["Frontend","frontend"],["Backend","backend"]],"terms":"custom controls build ui5 use abap2ui5 apps first set code environment frontend artifacts following advanced extensibility page write javascript new control lives file under app webapp https github.com tree main copy existing e.g timer.js adapt needs backend nothing current view builder method per counterpart element properties directly z2ui5.cc namespace registers abap ele mvc xmlns sap.m sap.ui.core.mvc z2ui5 tag mycontrol value client bind mv_value onevent event my_event else needed side writes whatever pass verbatim another wrapper class extend add used","url":"https://abap2ui5.github.io/docs/advanced/extensibility/custom_control.html"},{"area":"docs","group":"Advanced Topics","title":"RFC Connector","text":"The abap2UI5 RFC Connector calls abap2UI5 apps remotely over RFC between two ABAP systems.","headings":[["When to use","when-to-use"],["Architecture","architecture"],["Installation","installation"],["UI5 Bootstrapping","ui5-bootstrapping"],["Multi-System Launchpad","multi-system-launchpad"]],"terms":"rfc connector abap2ui5 https github.com addons calls apps remotely over between abap systems handy distributed system landscapes legacy directly host ui5 frontend logic use enables several useful cases backend split live users access server e.g ecc downport older call newer multi entry point reaches spread across multiple architecture app ships library bootstraps runs doesn need runtime img width alt src user attachments assets 6f885f04 2b70 4cb3 83d0 123473b72262 installation prerequisite set sm59 destination install steps via abapgit http handler replace none pointing browser endpoint sap 2ui5_rfc bootstrapping holds needs libraries calling automatically bootstrap loaded while hosts 8e7dd3dd abd3 413f 8ec6 8a7a2be7a7ec launchpad approach build unified fiori combines installed stack current called centralized combining triggered remote a010440d bd82 46f9 b597 c3ad2273dbde","url":"https://abap2ui5.github.io/docs/advanced/rfc.html"},{"area":"docs","group":"Advanced Topics","title":"HTTP Connector","text":"The abap2UI5 HTTP Connector calls abap2UI5 apps remotely over HTTP between two ABAP systems.","headings":[["When to use","when-to-use"],["Architecture","architecture"],["Installation","installation"],["Further Information","further-information"]],"terms":"http connector abap2ui5 https github.com addons calls apps remotely over between abap systems works similarly rfc rfc.md uses instead communication channel use enables several useful cases frontend backend split live users access through separate system legacy e.g ecc downport older call newer multi landscapes entry point reaches spread across multiple cross network scenarios often easier route firewalls reverse proxies gateways architecture app ships ui5 library bootstraps runs doesn need host runtime exposes endpoint installation prerequisite set sm59 destination pointing install steps via abapgit handler configure browser icf service installed analogous sap 2ui5_rfc further information latest details source code updates see repository github","url":"https://abap2ui5.github.io/docs/advanced/http.html"},{"area":"docs","group":"Advanced Topics","title":"Integration into Fiori Elements Apps","text":"Extend the object page of a Fiori list report app with an abap2UI5 app.","headings":[["Guide","guide"]],"terms":"integration fiori elements apps extend object page list report app abap2ui5 see abap2ui5_comp_cont repository https github.com axelmohnen complete example img width height alt embedded src user attachments assets c14d5732 3b8c 4fa5 83ab 6d188a4d87db guide register flp component.js javascript component container jquery.sap.registermodulepath z2ui5 sap ui5_ui5 adapt extension controller.js sap.ui.core.component.create name settings componentdata startupparameters app_start zcl_your_2ui5_class_app key1 param1 key2 param2 function ocomponent var ocompcontainer new sap.ui.core.componentcontainer async true add vbox ovbox that.getview byid vboxid ovbox.destroyitems ovbox.additem overwrite default section osection replace osection.addstyleclass customsectionheight implement facet fragment xml core fragmentdefinition xmlns commons sap.ui.commons sap.ui.core form sap.ui.layout.form sap.ui.layout sfi sap.ui.comp.smartfield sfo sap.ui.comp.smartform table sap.ui.table template http schemas.sap.com sapui5 sap.ui.core.template uxap sap.uxap sap.m direction column 200px css style.css auto important create class abap side receives startup parameters like custom key value pairs via client get t_comp_params check_initialized flag public abap_bool attribute ensures read once first roundtrip setting backgrounddesign gives white background matching definition interfaces z2ui5_if_app data type method main abap_false abap_true lt_startup_params evaluate here endif view z2ui5_cl_ui5_view_builder factory ele mvc sap.ui.core.mvc showheader sets color content tag text view_display stringify endmethod","url":"https://abap2ui5.github.io/docs/advanced/fiori.html"},{"area":"docs","group":"Advanced Topics","title":"Namespaces, Renaming","text":"Everything abap2UI5 installs lives under a single prefix: Z2UI5_.","headings":[["The z2ui5 Namespace","the-z2ui5-namespace"],["Why a Prefix and Not a Package","why-a-prefix-and-not-a-package"],["The Second Segment","the-second-segment"],["Package Layout","package-layout"],["Name Length","name-length"],["The Frontend Namespace","the-frontend-namespace"],["Your Own Objects","your-own-objects"],["Renaming","renaming"],["Why Rename?","why-rename"],["How It Works","how-it-works"],["Step-by-Step Guide","step-by-step-guide"],["What Renaming Does Not Cover","what-renaming-does-not-cover"],["Renaming in Practice: ajson","renaming-in-practice-ajson"],["Further Reading","further-reading"]],"terms":"namespaces renaming everything abap2ui5 installs lives under single prefix z2ui5 first half page describes covers names inside structured second installing different makes several installations system possible namespace why package abap manager every object abapgit pulls created globally cannot hide behind way npm modules node_modules thing keeps objects apart name itself whole framework classes interfaces exception ddic tables carries reserved projects ecosystem apps customer never add yourself next upgrade may ship overwrite yours type pattern example class z2ui5_cl z2ui5_cl_ui5_http_handler interface z2ui5_if z2ui5_if_app z2ui5_cx z2ui5_cx_ui5_util_error table z2ui5_t z2ui5_t_01 segment scheme repositories share part suggests ui5 http_handler project layer comes middle real work shared samples ons control libraries install separate alone let collide installation meaning none z2ui5_if_client public api carry purpose contract move between layers engine shipped z2ui5_cl_ui5_handler z2ui5_cl_ui5_srv_draft z2ui5_cl_ui5_app_start plus z2ui5_cl_ui5_view_builder ui5f rontend embedded string constants generated edit hand build overwrites ajson srt technical tools rtti srtti mirrored upstream util pop xml_view frozen see deprecations resources else smp https github.com sample catalog z2ui5_cl_smp_app smps stack full smpc controls popup popups addons cci custom community ccc template frontend artefacts rule tells repository was pulled code born src hold longer issued ships z2ui5_cl_popup today still demo started tip reach bsp resourceroot served z2ui5_cci root z2ui5_ccc reserves roots manifest.json those bsps loadable without patching file differ last letter typo view xmlns surfaces failed module request browser console render check restructured release carried z2ui5_cl_core long ago artifacts z2ui5_cl_app enforced documented gate check_object_naming fails outside added abaplint naming checks new drift unnoticed layout flat packages configured folder_logic folders become hierarchy contents external vendored context http helpers internal use draft persistence handling event routing binding released six above sits honest answer yes app already length limited characters spend stays less remaining five headroom replaces character fits compressed like z2ui5_cl_ui5f_scrfocus_js rather spelled out ones generator caps truncating silently exists time happens form ids core server model formatter globals z2ui5.formatter xml z2ui5.cc sibling side touch these stay renamed deliberate where ever loaded nothing applies implements zcl_my_app definition create section protected private endclass place reaches exactly changes rename runs need fit specific requirements e.g z2ui5_sd z2ui5_mm z2411 z2502 per z2ui5app1 z2ui5app2 works feature supports zabap2ui5 because global version forced pulling latest break existing kept minimum constantly evolving avoid entirely closes gap true management lets multiple times pace level simply implement z2ui5_sd_if_app z2411_if_app instead abaplint.org across define patterns old including regular expressions configuration rewrites reference consistently writing result output folder jsonc abaplint.json clas intf oldname newname zmyns copy complete installable original pin product transformation change run workflow test_rename.yaml guarantee codebase renameable step guide set main demand github action build_rename renames choice pushes ready branch takes steps fork open actions tab enable workflows asked select start followed letters digits underscores max zmyui5 checked rename.jsonc sources rename_zmyui5 contains tree together matching abapgit.xml pull parallel later sync updated current state pushed content again cover compiler three things fall worth knowing written strings dynamic lookup passes text production affected user exit cl_ui5_user_exit get_user_exit_class searches implementing literal z2ui5_if_ui5_exit if_ui5_exit therefore back empty instantiated discarded search wrapped catch cx_root reported default advanced extensibility user_exits called theme bootstrap csp override warning patch literals zmyui5_if_exit zmyui5_cl_ui5_user_exit sap plain registered zzz expression away builds exist target import practice relies json source sbcgua integrated via collisions separately mirror weekly automatically creates bundles integrate further reading automagic standalone community.sap.com application development blog posts power www.linkedin.com pulse kqede","url":"https://abap2ui5.github.io/docs/advanced/renaming.html"},{"area":"docs","group":"Advanced Topics","title":"Working Off-Stack","text":"An abap2UI5 app usually starts as a class typed straight into a system, living there and nowhere else.","headings":[["What it gives you","what-it-gives-you"],["From template to first green check","from-template-to-first-green-check"],["Make it yours","make-it-yours"],["Then into the system","then-into-the-system"],["Next Steps","next-steps"]],"terms":"working off stack abap2ui5 app usually starts class typed straight system living nowhere else fine first second nothing versions nobody reviews mistakes makes control exist release users binding pointing invisible abap compiler show blank screen real project git repository abapgit pulls checks running gets template https github.com already assembled gives src zcl_app_001 input bound table event canonical shape agents.md describes abaplint.jsonc syntax style framework resolved dependency compiles without sap abap2ui5lint.jsonc linter advanced view builds judged against ui5 api github workflows check.yml gates every push pull request package lock.json pins machine run thing conventions assistant should follow plus claude settings.json allowlist asking green check press use clone new npm was involved commands worth knowing fast skip browser half seconds minute fix apply corrections make itself full loads headless needs chromium once npx playwright install yours fresh still called says command changes three rename zcl_my_app repo add dry see touch renames clsname clas.xml sidecar changing object imports under name activates another things deliberately leaves namespace requires zcl zcx change object_naming develop behind company prefix registered license names copyright holder get_started quickstart abapgit.org starter 1.143.0 newer lint open endpoint app_start looking passed next steps tooling editor agent side loop gate actually adopt codebase exists","url":"https://abap2ui5.github.io/docs/advanced/working_off_stack.html"},{"area":"docs","group":"Advanced Topics","title":"UI5 Legacy-Free","text":"The abap2UI5 frontend is also available as a legacy-free variant, bootstrapped from the new legacy-free distribution of OpenUI5 (1.142.0-legacy-free) ","headings":[["What is UI5 Legacy-Free?","what-is-ui5-legacy-free"],["Why It Matters for the Future","why-it-matters-for-the-future"],["Installation","installation"],["Why Try the v2 Version?","why-try-the-v2-version"],["Learn More","learn-more"]],"terms":"ui5 legacy free abap2ui5 frontend available variant bootstrapped new distribution openui5 1.142.0 build without jquery.sap synchronous apis deprecated globals essentially preview api surface 2.x enforce parallel sapui5 starting 1.136.x line ships controls regular 1.x everything removed front practice means sap.ui.getcore module loading sap.ui.requiresync sync xhr global view controller factories jquery bundled core none compatibility shims kept around backwards why matters future next major release exactly developing against today project gets several things once real world anything still works here keep working breaks something broken anyway discovered earlier our terms migration cliff painful rip out step apps eventually face done incrementally part normal development shot upgrade leaner faster runtime dropping layers shrinks bootstrap speeds startup reduces memory footprint particularly noticeable mobile constrained networks modern async first patterns component creation standard promise based option keeps codebase aligned current web platform instead early 2010s cleaner extension points custom glue code rely stable documented reaching internals scheduled removal short bridge between ecosystem tomorrow building now framework ready day lands chasing afterwards installation branches repository https github.com pull branch matches system abap abapgit abapgit.org activate separate cloud_v2 public cloud btp environment standard_v2 private premise install under z2ui5 name classic evaluate side use build_rename workflow generate whole deployment identity bsp icf nodes handler class different see details try version proof already run require big bang later smaller quicker foundation hidden better alignment standards learn versions sdk.openui5.org versionoverview.html incl builds explore sap community community.sap.com technology blog posts adapt app make impact joining cei","url":"https://abap2ui5.github.io/docs/advanced/legacy_free.html"},{"area":"docs","group":"Advanced Topics","title":"Tooling","text":"Everything on this page is optional — abap2UI5 is one ABAP class and needs no tools at all. What these three add is the loop that ABAP does not give you by itself: catching a broken view before it reaches a system, an...","headings":[["Start a project from the template","start-a-project-from-the-template"],["Check the view without a system","check-the-view-without-a-system"],["Run the app from the editor","run-the-app-from-the-editor"],["Where the samples live","where-the-samples-live"]],"terms":"tooling everything page optional abap2ui5 abap class needs tools these three add loop give itself catching broken view reaches system seeing app without leaving editor independent take first stop building assistant whole side indexes agent conventions mcp server collected get_started start project template https github.com press use github repository already set working gates configured workflow runs every push alternative creating hand works fine saves assembling checks below yourself finding out half year later were never running clone npm run check off stack advanced working_off_stack walks through rename makes yours way linter builds exists runtime ui5 see compiler opinion reconstructs builder chain judges together controls properties aggregations enum values yet release target since floor 1.71 default systems serve bindings point nothing events handles deprecated loads headless browser find merely render wrongly fails load npx src sap install beyond ships action wired rest fix baseline switching over codebase vscode extension starts preview beside code against real plus completion hover api inside type click control jump line inspector traffic log roundtrip marketplace open vsx remote filesystem marketplace.visualstudio.com items itemname murbani.vscode connection where samples live repositories searchable learn abap2ui5.github.io says corpus holds many apps carries search filters links bar top abapgit carry overview lists contain","url":"https://abap2ui5.github.io/docs/get_started/tooling.html"},{"area":"docs","group":"Advanced Topics","title":"Local","text":"abap2UI5-local is a special build that bundles all framework classes into a single HTTP handler class.","headings":[],"terms":"local abap2ui5 special build bundles framework classes single http handler class besides need create additional database tables z2ui5_t_99 z2ui5_t_98 separate normal installation keeps independent gives self contained copy runs independently system full details see repository https github.com","url":"https://abap2ui5.github.io/docs/advanced/local.html"},{"area":"docs","group":"Advanced Topics","title":"abap2UI5 linter","text":"The view an abap2UI5 app shows does not exist until the app runs.","headings":[["Try it in one line","try-it-in-one-line"],["Reading a finding","reading-a-finding"],["What it checks","what-it-checks"],["The property gate","the-property-gate"],["The render gate","the-render-gate"],["The abap2UI5 rules","the-abap2ui5-rules"],["What it cannot do, by design","what-it-cannot-do-by-design"],["Seeing the view without a system","seeing-the-view-without-a-system"],["Fixing what is mechanical","fixing-what-is-mechanical"],["Waiving a rule","waiving-a-rule"],["Adopting it on a codebase that already exists","adopting-it-on-a-codebase-that-already-exists"],["Which UI5 does it check against?","which-ui5-does-it-check-against"],["Deprecated controls","deprecated-controls"],["The configuration file","the-configuration-file"],["In your pipeline","in-your-pipeline"],["Badges","badges"],["What a clean run still tells you","what-a-clean-run-still-tells-you"],["As a library","as-a-library"],["Where else it runs","where-else-it-runs"]],"terms":"abap2ui5 linter view app shows exist until runs built chain z2ui5_cl_ui5_view_builder calls handed browser string abap compiler never sees control name ui5 tooling ever class between sits whole defect nothing catches binding path model field event argument delivers exists newest release users activates compiles screen comes empty https github.com closes gap reconstructs builder judges together sap system deployment project try line npx src install configuration package pulls else above fast zcl_my_app.clas.abap error sap.m.page aggregation contentt typo unknown sap.m.button type emphasised valid value allowed invalid property files report printed tip command executable installs called abap2ui5lint config file baseline source waivers further down looking write once installed want stay green npm pin machine init commented abap2ui5lint.jsonc starting new repository working off stack advanced working_off_stack walks through template ships already wired reading finding every carries four things matter title without element attach attribute text set twice duplicate warning sap.m.generictile systeminfo since 1.92.0 member hint no_handler raised handled handler problems errors failing skipped target sapui5 1.71 metadata 1.151.0 column point wrote generated message ready act severity says much matters meaning breaks dump load rejects silently destroys works where was written necessarily version floor deprecation data behind author thinks worth knowing wrong itself rule end key everything change switch waiver names anchor page full reference abap2ui5.github.io documented away means why offending next fixed link module decides those addresses rather bare terminal output ends block naming reported job summary links row github annotation straight pair severities break build separate decision fail sets exit code default advisory always clean render bad usage broken checks gates run over answer different questions gate writes resolved against snapshot controls lists types enums openui5 sources instant needs family defects enum sap.m.shell2 button typ yet 1.92 permanent question icon gone again textformatting matches formatting information arrived 1.80 structural 0..1 undeclared namespace prefix inside layout older releases toolbarspacer sap.m.bar deletes sibling 1.76 bindings expressions checked runtime custom namespaces out scope whose inheritance leaves missing guess loaded real xmlview.create headless chromium local future mode active way catch merely wrongly fails expression strict violation resolves second deliberate surprise attached first playwright still asks explicitly instead turns silent fallback promised cannot quietly disappear pipeline rules top sit ones reason tool live builds few give shape hand derived stays bound relative misspelled caught frozen predecessor see deprecations resources fine keep read none ran switching buys nonpublic protected private public attributes serialized roundtrip binding_error variable instance across method lost unconverted boolean arrives reads non true visible abap_false makes navigated branch lifecycle dispatcher check_on_navigated standalone goes blank time another hands back displayed client long characters lint import abapgit stub indentation call contradicts tree picture structure toolchain formats hundred total list paragraph explaining showing searchable per example design roundtrips visual fidelity mcp server mcp_server run_app extension vscode parts helper methods handle idiom statically reconstructed notice validating fills loop model_init static literal seed seeing loads find whether survives creation throws screenshot keeps standing photographs app.png size 390x844 1280x900 theme sap_horizon_dark meant activating launching here seeded rendered viewport several viewports session launch boot cost phone desktop matrix barely expensive table problem seeds literally because reconstruction know filled select therefore apps json picked preview convention flag zcl_travel_list.clas.abap zcl_travel_list.mock.json mt_rows berlin rome merged replacing resolving file.json lying round trips reaches mock serve fixing mechanical carry exact correction rewritten place fix dry among superseded successors inserted xmlns declaration added root touched bind slot raise worse replaces waiving three scopes narrow wide comment carried whatever syntax disable waives enable ignored exclude allow sap.m.avatar.displaysize using newer touching adopting codebase grown reports moment adoptions stop freezes debt hiding update baseline.json commit findings counted listed normally entry stale shrinks keys free moving around invalidate check settings decide describe wish systems drives directions introduced effect distribution serves libraries sap.ui.comp smart sap.suite sap.ushell sap.fe smarttable perfectly guaranteed deprecated setting seen framework passes xml unchanged knows including depends entirely named quoting replacement otherwise library sap.ui.commons sap.ui.ux3 1.38 sap.makit sap.me 1.34 legacy chart classes under sap.viz.ui5 1.32 held 1.120 simply last absent used pass silence actually happens half label dialog panel combobox namesake sap.m copied old tutorial drags dead along renders something anything ui5.sap.com api current index repeating cli flags idea abaplint.jsonc starter discovery eslint style precedence jsonc schema node_modules abap2ui5lint.schema.json paths got positional failon promise e.g accessibility false test regex case insensitive gives editors completion validation registry drift ids loudly protection strictness sake action setup yaml jobs views ubuntu latest steps uses actions checkout min annotated onto pull request diff ask screenshots review artefact could produce passed failed reviewer wants costs download skips tag follows 0.x v0.1.0 reproducible fit places format markdown sarif scanning puts security tab native annotations badges shields.io endpoint badge say corpus blue fact said yellow red verdict included tells identically thousand were judged produced looked documents nested deep icons properties baselined suppressed zeroes readings failure hides esm types.d.ts dependencies checkfiles checkabapsource checkxmlsource const results await rendererrors docs screenshotfiles taking pictures returning pngs buffers editor holding unsaved buffer subpath exposes directive handling consumer reinvents holds formatters builders reach doors agree diagnostics while quick fixes validate_view agent work workflow","url":"https://abap2ui5.github.io/docs/advanced/linter.html"},{"area":"docs","group":"Advanced Topics","title":"MCP Server","text":"An AI coding agent asked to write an abap2UI5 app can write ABAP.","headings":[["What \"MCP\" means here","what-mcp-means-here"],["Setting it up","setting-it-up"],["Level 1 — check and see views (about 3 MB, a minute)","level-1-check-and-see-views-about-3-mb-a-minute"],["Level 2 — the sample catalogues and deploying (about 110 MB)","level-2-the-sample-catalogues-and-deploying-about-110-mb"],["Level 3 — see the running app (a browser, and time)","level-3-see-the-running-app-a-browser-and-time"],["Registering it with your client","registering-it-with-your-client"],["The tools","the-tools"],["The intended loop","the-intended-loop"],["Good to know","good-to-know"],["Next Steps","next-steps"]],"terms":"mcp server coding agent asked write abap2ui5 app abap cannot find out whether works always needed system activate class launch look screen writes something plausible finds https github.com closes loop modelcontextprotocol.io small program client starts background gives set tools call itself those let check view picture deploy local sandbox transpile whole framework node boot headless browser read errors machine sap involved examples app_guide validate_view screenshot_view deploy_app build_backend run_app pitfalls somebody seconds green built legal lint run still already like screenshot prove everything runs locally infrastructure guards ecosystem abaplint transpiler open runtime express shim samples controls build gates linter advanced validation core means here model context protocol standard way talk tool register once sees list descriptions decides these yourself paste output anywhere asks answers conversation claude code cursor copilot mode desktop setting need different things setup levelled stop level whose want adds ones below prerequisites missing message naming needs rather failing either see views minute work happens reconstruct builds against ui5 api photograph per answer backend git clone ai_view_check_home npm published checkout npx command fetches well install playwright driver uses paid first start cached afterwards additionally render chromium property gate neither sample catalogues deploying capabilities scaffold_app generation_rules scope_of a2ui5_home samples_controls_home samples_home stack samples_stack_home clones cheapest useful thing value help tree navigation between apps working three repositories hands back snippet trust enough reported fatal catalogue says covers page learn abap2ui5.github.io running time full transpiles corpus budget tens minutes every later incremental slowest far buys ability registering add yes instead path server.mjs mcp.json vscode claude_desktop_config.json anything else reading stdio shape json mcpservers args env swap lines entries checkouts siblings state drop stopped short wants object under top servers key tip using extension registers second half deliberately real systems gets feature verified capability map question ask writing line live template lifecycle builder chain binding events popups portability files new project configs workflow abapgit metadata agents.md zcl_my_app renames throughout including sidecar clsname activates search use control pattern never rulebook porting demo kit job defects catch area import activation extended downport oldest release entry defect actually shipped scope verdict since 1.71 deprecated source raw xml judged abap2ui5lint.jsonc findings come severity column rule fired interpreting web reconstructed rendered returned image several viewports session theme preview data tables select fill plus gitignored rebuild transpiled return status benign noise filtered restart remove_app delete dev deployed similar photographs mock roundtrip behaviour cost orders magnitude apart iterations should end intended expressible user exists edit validate again calling done good know land src zz_dev nothing deploys leak commit promote finished moving package port listens a2ui5_mcp_port overrides timeouts spawned child killed process exceeds limit five thirty default offline modules served openui5 packages booting network css exception access loads cdn screenshots styled without unstyled structurally complete a2ui5_mcp_offline forces hermetic deployment stays was inner development next steps building get_started rising order effort rung behind","url":"https://abap2ui5.github.io/docs/advanced/mcp_server.html"},{"area":"docs","group":"Advanced Topics","title":"VS Code Extension","text":"Developing an abap2UI5 app the plain way means three windows: the editor with the class, a browser with the app, and the activation step between them.","headings":[["Installing","installing"],["Running the app: F9","running-the-app-f9"],["Why there is a local proxy","why-there-is-a-local-proxy"],["When the preview stays white: the connection check","when-the-preview-stays-white-the-connection-check"],["Reload on activation, not on save","reload-on-activation-not-on-save"],["What the preview gives you beyond a browser tab","what-the-preview-gives-you-beyond-a-browser-tab"],["Checking views while you type","checking-views-while-you-type"],["Writing the view","writing-the-view"],["Seeing the view and the structure","seeing-the-view-and-the-structure"],["Starting from a template","starting-from-a-template"],["For AI agents","for-ai-agents"],["In the browser","in-the-browser"],["The settings worth knowing","the-settings-worth-knowing"],["Next Steps","next-steps"]],"terms":"code extension developing abap2ui5 app plain way means three windows editor class browser activation step between change line save activate switch reload look back https github.com vscode collapses window launches next source ctrl activates reloads preview whole linter advanced runs while type works system running premise cloud thing tying launch url configure once installing install marketplace marketplace.visualstudio.com items itemname abap2ui5.abap2ui5 extensions panel cmd shift search terminal open vsx vsx.org well vscodium eclipse theia sap business application studio without access every release releases latest carries vsix parts talk need abap connection remote filesystem murbani.vscode opens objects hands over put cursor implementing z2ui5_if_app press embedded beside goes where was even loading tries grab focus keeps usual meaning toggle breakpoint lose key first asks placeholder host z2ui5 app_start client working against several systems normal case name instead jsonc settings.json abap2ui5.systems dev sandbox box select switches add never find json active remembered per work credentials stored switching forth ask again abap2ui5.openmode tab default down output external reusing existing session commands move restarting why local proxy iframe direct call end mode therefore starts small auth 127.0.0.1 user password ones use adt kept secretstorage attaches request rewrites origin referer validating csrf checks accept posts make embedding possible strips frame options ancestors csp directive responses accepts self signed certificates warning basic required must pure sso saml fallback supported clear forgets stays white check common run failure slightly wrong symptom rectangle says nothing diagnoses command walks exact route takes expansion reports shape logon icf path page itself fix failing full report lands channel installed five minutes ago makes diagnosis quickstart get_started saving server abap2ui5.reloadon behaviour saves through tooling activations done noticed marks activated setups already publishes button status bar activating somewhere else shows badge watches metadata soon whether used gives beyond device widths theme language desktop tablet 834px phone 414px ui5 themes languages responsive leaving runtime errors land thrown error failed assertion rejected promise inside normally visible devtools exactly context exists avoid forwarded counted toolbar text names binding identifier appears log adds file under inspect shot element picker like hovered control outlined click jumps ele tag wrote row bound list template written settles match outright model document live values statically known traffic roundtrip timings sees free network event post last duration backend slow stops being trip take screenshot png bug rendered headless stateful fresh start clicks reproduced clicked pin captured paths restored checking views findings problems ever reaches property gate bundled needs setup shortly pause resolves snapshot exist anything newer floor abap2ui5.viewcheck.minui5 1.71 deprecated rules come defects stay silent hand boolean straight view render expensive demand downloads contained checker bundle chromium storage everything node npm machine answer settings reads version.json offers align viewcheck.minui5 distribution actually detected version quick fixes finding whose correction mechanical lightbulb plus codelens above workspace undo source.fixall.abap2ui5 editor.codeactionsonsave suppress writes waiving something here waives waived longer squiggles repository config wins abap2ui5lint.jsonc repo cli action overrides wherever fill rest current came place disagree schema checked edit baseline applied new answers explorer question grouping rule produced worst twelve unknown across classes decision unrelated writing knows api derives help chain rather completion resolved namespace play members chained enum complete typing derived offered squiggle afterwards aggregation fields completes explains z2ui5_if_client method signature documentation hover member appeared deprecation link reference field structure table missing format repairs builder child parent attribute column closes deliberately conservative verb lines touched emmet chains content expand abbreviation builds house layout attr value extract real screen long statement should tail becomes helper taking handle declaration left behind extracts refuses guesses convert xml paste demo kit sample get out corpus style cannot express listed todo comments dropped silently porting transcription snippets everyday shapes z2ui5app z2ui5main z2ui5ele z2ui5button z2ui5table z2ui5event z2ui5popup z2ui5navto inline annotations since warned public costs switched off seeing show reconstructed calls produce following markdown mirrored onto concern definition renders picture turned around standing photographed away mock.json fills tables caption always comma separated viewport matrix compare head puts committed tree answering did meant outline navigation hierarchy pane handles directions types declares renames strings wired together ties halves literals connects ends renaming grep wire addressing mv_title position decides literal map nav_app_call clickable graph apps listing thirty examples catalogues abap2ui5.github.io samples searched uses richest opening abap2ui5.mcp.reposroot those checkouts starting gallery skeleton empty form master detail popup ships clean project folder abaplint.jsonc agents.md workflow gates abapgit files see stack working_off_stack looks agents registers mcp mcp_server copilot agent claude speaking systemless loop separate configuration point holding passes second half configured tool gets list_systems search_apps via run_app_on_system prompt pick ordinary dialog keep apart run_app boots transpiled web vscode.dev github.dev based process socket honoured agrees hidden palette integration wide properties servers worth knowing setting abap2ui5.launchurltemplate named profiles abap2ui5.viewcheck.distribution sapui5 serves abap2ui5.viewcheck.live true abap2ui5.viewcheck.render false abap2ui5.viewpreview.theme sap_horizon abap2ui5.viewpreview.viewport 1280x900 abap2ui5.inlinefindings controls readme steps diagnostics","url":"https://abap2ui5.github.io/docs/advanced/vscode.html"},{"area":"docs","group":"Advanced Topics","title":"abapGit","text":"This project uses abapGit for version control and easy code distribution.","headings":[["Git Client","git-client"],["Apps as abapGit Artifacts","apps-as-abapgit-artifacts"],["Contribution","contribution"]],"terms":"abapgit project uses https github.com version control easy code distribution git client build artifacts directly abap system store github repository through makes install customer publish updates right away user pull whenever want apps beyond abap2ui5 core framework live classes managed objects without manual deployment unlike traditional ui5 multiple single works smoothly cloud environments cuts overhead contribution contributions welcome manage requests open request commit changes","url":"https://abap2ui5.github.io/docs/technical/tools/abapgit.html"},{"area":"docs","group":"Advanced Topics","title":"ajson","text":"abap2UI5 handles all frontend-backend communication with JSON.","headings":[["Integration","integration"],["Automatic Updates","automatic-updates"]],"terms":"ajson abap2ui5 handles frontend backend communication json initially framework used sap ui2 cl_json approach turned out problematic key behavior varied across releases documentation was sparse compatibility issues came often solution https github.com sbcgua solid open source library greatly improved functionality why zero api dependencies reliance release specific classes broad works smoothly 7.02 abap cloud developer friendly clear thorough active maintenance responsive issue resolution ongoing improvement integration plugs directly z2ui5 namespace installs automatically use anywhere code data input z2ui5_cl_ajson parse json_string output create_empty set iv_path name iv_val value stringify automatic updates every update bug fix flows via github actions mirror repository always run latest stable version manual steps needed","url":"https://abap2ui5.github.io/docs/technical/tools/ajson.html"},{"area":"docs","group":"Advanced Topics","title":"S-RTTI","text":"In abap2UI5, you don't always have to define your data model at design time.","headings":[["Standard Transformation","standard-transformation"],["Transformation with S-RTTI","transformation-with-s-rtti"],["Functionality","functionality"],["Integration","integration"],["Updates","updates"]],"terms":"rtti abap2ui5 don always define data model design time instead work generic references apply typing dynamically runtime based program logic especially handy cases like tables where different columns table types may appear user input serializes app instances client communication stays stateless standard sap transformation features limited support local created around limitation ships https github.com sandraros project fully typed works right away abap class z2ui5_cl_app definition public section interfaces z2ui5_if_app mr_tab type ref protected private endclass implementation method main begin ty_row title string value descr end ty_t_tab empty key create field symbols tab assign entry red description blue message_box_display out box endmethod working via needed playground run button describe_by_name ddic lookup browser o_struct_desc cl_abap_structdescr usr01 o_table_desc cl_abap_tabledescr p_line_type cast p_table_kind tablekind_std p_unique abap_false handle functionality raises error looping over attributes attribute runs separate serialization beforehand goes variable resets again deserialization rebuilds object restores content back approach gives compatibility dynamic while keeping process reliable background independent sample implementations above integration plugs directly z2ui5 namespace installs automatically classes available under z2ui5_cl_srt prefix example z2ui5_cl_srt_datadescr used anywhere code updates every update bug fix flows github actions mirror srtti repository latest version","url":"https://abap2ui5.github.io/docs/technical/tools/srtti.html"},{"area":"docs","group":"Advanced Topics","title":"abaplint","text":"This project uses abaplint for static code analysis and several other tasks.","headings":[["Static Code Analysis","static-code-analysis"],["Downporting","downporting"],["Renaming","renaming"]],"terms":"abaplint project uses https abaplint.app static code analysis several tasks every checks abap enforce quality best practices review specific configuration github.com abap2ui5 blob main abaplint.jsonc statistics results live app dashboard stats downporting downport feature builds version syntax compatible 7.02 automatically fix github abap_702.jsonc renaming artifacts use under different custom namespaces rename_test.jsonc rename","url":"https://abap2ui5.github.io/docs/technical/tools/abaplint.html"},{"area":"docs","group":"Advanced Topics","title":"open-abap","text":"abap2UI5 uses open-abap to run unit tests and frontend tests, and to execute samples directly in your browser ","headings":[],"terms":"open abap abap2ui5 uses https github.com run unit tests frontend execute samples directly browser backend needed","url":"https://abap2ui5.github.io/docs/technical/tools/open_abap.html"},{"area":"docs","group":"Advanced Topics","title":"abap-cleaner","text":"The abap-cleaner tool formats the abap2UI5 source code.","headings":[],"terms":"abap cleaner https github.com sap tool formats abap2ui5 source code use profile blob main github profile.cfj match project standards","url":"https://abap2ui5.github.io/docs/technical/tools/abap_cleaner.html"},{"area":"docs","group":"Advanced Topics","title":"abapmerge","text":"The abapmerge tool creates the abap2UI5-local build by merging ABAP includes into a single file, bundling all abap2UI5 classes into one local implementation of an HTTP handler.","headings":[],"terms":"abapmerge https github.com larshp tool creates abap2ui5 local build merging abap includes single file bundling classes implementation http handler","url":"https://abap2ui5.github.io/docs/technical/tools/abapmerge.html"},{"area":"docs","group":"Advanced Topics","title":"Technical Insights","text":"The knowledge behind abap2UI5, cut into pieces that each fit one coffee.","headings":[["Why","why"],["How It Works","how-it-works"],["A Working Day","a-working-day"],["Where It Belongs","where-it-belongs"]],"terms":"technical insights knowledge behind abap2ui5 cut pieces fit coffee every article makes claim shows code where show read order four blocks add whole picture why framework exists works under app working day looks like belongs next sap ships axis series turns definition screen stops being changeable view lives.svg three ways put ui5 front user abap stack rendering browser control library freestyle fixes build time file frontend project rap fiori elements activation annotations cds request answered string class produced may answer differently everything else follows sits deployed per costs artefacts still change runtime language written somewhere way lost rtts advanced table whose structure known drawn programming model interface method opinion cost thirty line never gets built annotation between vocabulary mechanism piece over wire strings knows nothing shell needs redeploy handler service small changed part stays updates new instance serialized state asks swapping different chosen deploy cache activate refresh javascript goes declared seams plugin system verbs builder controls classrun shape copied selection went variable field declaration again developer meets first week habit carries click pbo pai dispatch main client api surface call leave sub apps popups value help sizes message messages exceptions translation lock gone enqueue stateless world start icf node authorization csrf rows hours numbers performance unit testing linting enough larger tile launchpad releases clean core deployment shapes choice against alternatives codebase 7.02 cloud release barely matters ready property decided select released levels wrapper side places run many systems saas twenty seven years behaviour smart low designer agents consequence nobody designed articles grew out hood https community.sap.com technology blog posts members background community long version","url":"https://abap2ui5.github.io/docs/advanced/insights/"},{"area":"docs","group":"Advanced Topics","title":"#1 Somewhere on the Way to UI5, We Lost RTTS","text":"ABAP developers have always built screens for tables whose structure is unknown when the code is written.","headings":[["Model Definition at Design Time — OData","model-definition-at-design-time-odata"],["Model Definition at Runtime — RTTS","model-definition-at-runtime-rtts"],["Data Binding at Runtime with abap2UI5","data-binding-at-runtime-with-abap2ui5"],["Nothing Here Is Exotic","nothing-here-is-exotic"],["What It Costs","what-it-costs"],["Conclusion","conclusion"]],"terms":"somewhere way ui5 lost rtts abap developers always built screens tables whose structure unknown code written alv either assemble field catalog yourself hand iconic cl_gui_alv_grid let cl_salv_table factory importing r_salv_table data lo_alv changing t_table lt_any display statements internal table type known design time reads runtime follows ddic labels come along free browsers maintenance migration cockpits generic reports whole category tooling was generality requirement trick model definition odata build app today path backend frontend goes through typed service holds freestyle fiori elements fully driven rap application consumption view shape decided baked contract powerful point client trust api discover everything needs metadata document know sap whenever exactly want use cases think se16 se16n buys nothing tightly coupled team builds knows system intimately anything resting aimed different problem assembled done nearly every developer already reading half rtti entity declared exists insights model.svg get luckily apps actually require jsonmodel filled plain http endpoint stops request carrying abap2ui5 binding views strings bound including draws looks like tab standard however select function module eml read matters here method render_any comps cast cl_abap_structdescr cl_abap_tabledescr cl_abap_typedescr describe_by_data get_table_line_type get_components ui_table parent ele items bind column per component discovered columns loop comp header tag text name endloop cell cells columnlistitem endmethod cds anywhere whatever happens paths names handed back step further tell whether where real rebuilt source came full z2ui5_cl_smp_app_497 https github.com samples blob main src z2ui5_cl_smp_app_497.clas.abap compiled linted commit nobody described drawn turned out doesn look bit flavoured addon addons exotic halves stay inside conventions work makes cheap adopt over using sap.m controls xml proprietary global class interface package travelling transport compiling cloud alike costs price external depend announces underlying changed locally defined gets technical instead upgrade answers foreign next five years tool should show user right now given millisecond ago conclusion never went away still released screen front did give face again directly special case old salv days open runs premise sits beside operate put launchpad tiles reach need try may good complement solutions run happy abaping","url":"https://abap2ui5.github.io/docs/advanced/insights/01-somewhere-on-the-way-to-ui5.html"},{"area":"docs","group":"Advanced Topics","title":"#2 abap2UI5 Is Not a Programming Model","text":"Before you use a framework, you want to know what it expects from you: a structure to follow, a lifecycle to fit into, layers to fill in.","headings":[["What Is Not in It","what-is-not-in-it"],["The Same Class Around Three Backends","the-same-class-around-three-backends"],["And What You Do Not Get","and-what-you-do-not-get"]],"terms":"abap2ui5 programming model use framework want know expects structure follow lifecycle fit layers fill interface method abap z2ui5_if_app public interfaces if_serializable_object methods main importing client type ref z2ui5_if_client endinterface calls every roundtrip class decides display react whole contract data behavior definition service binding annotations bsp application per app frontend artefact transport activate call icf endpoint scope size pleasant side effect since serves ui5 screen never asks where comes come wherever already lives around three backends here small edit writing through rap business object playground run button writes system zcl_travel_edit section travel_id string description protected set_view on_save private endclass implementation get_event save endif endmethod view z2ui5_cl_ui5_view_builder factory ele mvc xmlns sap.m sap.ui.core.mvc page title travel tag input value bind text emphasized press event view_display stringify modify entities z_i_travel entity update fields key failed initial commit message_toast_display saved nothing handler except toast notice anything unusual validations determinations authorizations draft handling still because eml care place knows behind straight database table row ztravel subrc work wait against bapi had twenty years different decade bapi_return standard bapiret2 function bapi_salesorder_change exporting salesdocument order_id order_header_in bapisdh1 purch_no_c po_number order_header_inx bapisdh1x updateflag abap_true tables return line_exists message_box_display message error bapi_transaction_commit sees thing ran returned looks inside could ewm delivery classes proxy another whatever sap releases next year none taught advantage modest cannot reorganise architecture learns enough try built stays keeps rules get transactional buffer generated user gives straightforward case done way either runs under launchpad reaches logic however like option otherwise opinion happy abaping","url":"https://abap2ui5.github.io/docs/advanced/insights/02-not-a-programming-model.html"},{"area":"docs","group":"Advanced Topics","title":"#3 The Cost of a Screen","text":"An ABAP team needs a screen. Not an application — a screen. A maintenance view for a customising table nobody wants to explain in SM30. A cockpit showing what last night's job actually did. An approval step for one de...","headings":[],"terms":"cost screen abap team needs application maintenance view customising table nobody wants explain sm30 cockpit showing last night job actually did approval step department logic behind often thirty lines putting user interface front those scale down data model declare service define binding annotation frontend artefact deployment object now exists forever transported survive upgrade day deprecated someone never met asked none waste makes real dependable simply fixed brutal small thing get built becomes selection alv grid everyone agrees stop thinking every system package full here monitor instead excerpt whole class zcl_job_monitor definition public section interfaces z2ui5_if_app types begin ty_s_run type string finish state end runs standard empty key protected client ref z2ui5_if_client methods set_view model_init private endclass implementation method main check_on_init endif endmethod z2ui5_cl_ui5_view_builder factory ele mvc xmlns sap.m sap.ui.core.mvc page title items bind columns column tag text finished columnlistitem cells objectstatus view_display stringify value zfi_posting success zmm_reorg warning zsd_invoices error activate call icf endpoint app_start replace select reads log nothing published deprecate pay write hand generates annotations gives filter bars variants export free screens above rounding buttons list report fifteen filters wrong trade wide margin fiori elements beat distance knowing looking skill happy abaping","url":"https://abap2ui5.github.io/docs/advanced/insights/03-the-cost-of-a-screen.html"},{"area":"docs","group":"Advanced Topics","title":"#4 No Annotation in Between","text":"In a metadata-driven UI a screen is described rather than written.","headings":[],"terms":"annotation between metadata driven screen described rather written description vocabulary line items selection fields facets identification generator turns ui5 runtime whatever covers arrives afternoon becomes extension point custom control conversation whether really needs abap2ui5 run out sends browser xml view library itself version launchpad already serves why nobody generates special case three step wizard instance abap class zcl_onboarding definition public section interfaces z2ui5_if_app data name type string email plant protected client ref z2ui5_if_client methods set_view private endclass implementation method main get_event complete message_toast_display assigned endif endmethod z2ui5_cl_ui5_view_builder factory ele mvc xmlns sap.m sap.ui.core.mvc page title onboarding finishbuttontext create event steps wizardstep person tag input value bind placeholder full end contact assignment view_display stringify every chain invented translated way builds gets reference sdk second place look mapping learn things follow anything documents reachable day frontend added newer release framework behind because nothing inside enumerates controls developer learns building these screens knowledge freestyle app generated outlives whichever side was learned through price writes layout list report few annotations here table built reaching being handed promise needed api makes takes off either happy abaping","url":"https://abap2ui5.github.io/docs/advanced/insights/04-no-annotation-in-between.html"},{"area":"docs","group":"Advanced Topics","title":"#5 UI5 Over-the-Wire","text":"A UI5 freestyle app is a single-page application.","headings":[],"terms":"ui5 over wire freestyle app single page application view deployed frontend backend delivers data through odata browser puts together renders html detail split worth closer look render javascript objects assembled hand xml bound document documents travel sent well entire idea abap2ui5 answers every request strings mvc xmlns sap.m sap.ui.core.mvc title hello world input value name button press button_post text post model fills json test sends event insights strings.svg nothing protocol invented format ordinary always done build changes owns longer artefact beside string abap class produced next may produce different pattern outside sap server inserts never becomes between htmx hotwire phoenix liveview livewire unpoly built return full reloads either mobile gui answered interaction whole replaces fragments leaves standing cannot take off design travels layer directly above stopped being became renderer follows series comes out move happy abaping","url":"https://abap2ui5.github.io/docs/advanced/insights/05-ui5-over-the-wire.html"},{"area":"docs","group":"Advanced Topics","title":"#6 The Frontend Knows Nothing","text":"The first GET request delivers a UI5 app to the browser.","headings":[],"terms":"frontend knows nothing first get request delivers ui5 app browser worth asking actually screen fields table buttons arrives shell enough take view model server render send events back cannot tell whether currently showing form wizard know action follows next click everything needs per decides decided pattern name hypermedia driven application between multi page where every interaction fetches whole document single holds routes state rebuild change either hda renders sends else sweet spot those leave open htmx hotwire liveview sit insights mpa spa hda.svg division labour sap gui had pbo builds user acts pai receives event happens dialog step moved ajax became xml shape conversation did why flow reads familiar anyone written module pool strange spas consequence matters here system shares deployed drifting different version bootstrap set libraries pinned whenever someone last time touch artefact keep current never redeployed changes happy abaping","url":"https://abap2ui5.github.io/docs/advanced/insights/06-the-frontend-knows-nothing.html"},{"area":"docs","group":"Advanced Topics","title":"#7 One Handler for Every App","text":"Count what a screen usually costs in backend artefacts.","headings":[["How Much Handler That Is","how-much-handler-that-is"]],"terms":"handler every app count screen usually costs backend artefacts cds view service definition binding behavior implementation projection named transported reviewed belonging exactly application abap2ui5 adds none segw project underneath either system served generic http specific way know model moves strings per against knows insights service.svg visible inside set breakpoint class look call stack frame between odata runtime sadl gateway reason nothing data agreed advance conversation metadata comes first fixes shape follows within rest session here travels response may carry different contract violate because register much communication core interfaces database table originally lines abap framework grown since visibly optional builder part carries request still small leaves apps build views decide program flow wrap ui5 controls grow implement protocol post practical consequence path business sees input user dependency cannot read really holds logic reading afternoon audit answers short rap objects generated code step transitive package tree footprint source repository removes effort decides everything stops being create name transport govern becomes never written again next happy abaping","url":"https://abap2ui5.github.io/docs/advanced/insights/07-one-handler-for-every-app.html"},{"area":"docs","group":"Advanced Topics","title":"#8 Only the Changed Part","text":"If the backend sends the view on every request, does the screen rebuild itself on every click?","headings":[],"terms":"changed part backend sends view every request screen rebuild itself click user notice rebuilt new set controls cursor leaves field half typed entry gone table scrolls back top nobody wants type sent time sending decision app makes abap method z2ui5_if_app main client check_on_navigated set_view first display return sub endif get_event count changes model nothing else happens here response carries alone endmethod public attribute bound text press button runs number returns called browser already standing ui5 data binding updates touches decides survives insights partial update.svg dom focus stays scroll position holds value halfway through typing because input control was never replaced over wire frameworks outside sap html fragments gives free mechanism framework long existed diffing algorithm virtual reconciler noticed whole exception rhythm happy abaping","url":"https://abap2ui5.github.io/docs/advanced/insights/08-only-the-changed-part.html"},{"area":"docs","group":"Advanced Topics","title":"#9 A New Instance on Every Request","text":"Every request lands on a fresh instance of the app class.","headings":[],"terms":"new instance every request lands fresh app class session holds previous next may even reach application server anything user typed three clicks ago still exist z2ui5_if_app inherits if_serializable_object framework serializes z2ui5_t_01 generic table draft per data model reads back browser gets sends state itself never leaves carries last forward insights draft.svg survives whole whatever visibility attribute public keeps value alive bind needs order because resolves bound name outside sections different jobs abap section view writes these customer type string items ty_t_item protected serialized client ref z2ui5_if_client t_cache ty_t_catalog survive serializer cannot write local variable open cursor acquired lock reference serializable above set again call why first line main single fact convention catches people catalogue read once parked cached payload written database click either makes slower long runs fix keyword large instead carried stays size screen discipline buys worth rule feels stateful pbo pai cancel while genuinely independent answer nothing sticky drained restart replicated between nodes stateless system price keeping small happy abaping","url":"https://abap2ui5.github.io/docs/advanced/insights/09-a-new-instance-on-every-request.html"},{"area":"docs","group":"Advanced Topics","title":"#10 Swapping the View at Runtime","text":"The view is a string the app produced for this request.","headings":[],"terms":"swapping view runtime string app produced request raises obvious question stops next producing different nothing abap method z2ui5_if_app main client get_event toggle as_list xsdbool abap_false endif set_view endmethod data page z2ui5_cl_ui5_view_builder factory ele mvc xmlns sap.m sap.ui.core.mvc title products tag switch state bind change event abap_true render_list else render_table view_display stringify class control chosen insights swap.svg handler click table list columns hidden second behind navigation step written like ordinary implies interesting part screen assembled design time vary where somebody anticipated variation left per varies wherever code branches everywhere freedom first article series claimed model structure described rather declared front arriving now side together point shape decided while running things adapt longer fixed day was designed built differently happy abaping","url":"https://abap2ui5.github.io/docs/advanced/insights/10-swapping-the-view-at-runtime.html"},{"area":"docs","group":"Advanced Topics","title":"#11 No Build, No Deploy, No Cache","text":"The loop is: change the class, activate, refresh the browser.","headings":[],"terms":"build deploy cache loop change class activate refresh browser whole article worth spelling out missing starting first page somebody deliver initial html sap world normally means bsp application frontend artefact built somewhere deployed abap stack transported path invalidated caches changes abap2ui5 get answered source code files needs strings inside handler serving method call four steps returns string insights request.svg consequence project made nothing everything below follows pull repository abapgit icf node npm install bundler dist folder separate deployment succeed app exist activating standard transport system moves production like object state backend live invalidate every request output stale nobody runs transaction asks colleague hard appear was activated ide agreement adt se80 setup stays personal preference rather decision toolchain fix label context switch debug breakpoint view stops dev tools stay closed because logic produced screen never left supply chain answer pipeline dependency tree something audit pin renew whose ships thing review file reaches readable diffable already governs else individually these conveniences together reason gets tried experiment costs could show being iteration speed nice decides ideas happy abaping","url":"https://abap2ui5.github.io/docs/advanced/insights/11-no-build-no-deploy-no-cache.html"},{"area":"docs","group":"Advanced Topics","title":"#12 Where Your Own JavaScript Goes","text":"Sooner or later an app needs something the XML view cannot express.","headings":[],"terms":"where javascript goes sooner later app needs something xml view cannot express chart library control nobody wrapped ui5 method exists sap.m.carousel moves through setactivepage nothing else property abap2ui5 plugin system deliberate three seams declared place rather escape hatch cheapest widest call expression custom bsp insights seams.svg imperative client abap t_arg positional parameters follow_up_action val z2ui5_if_client cs_event control_by_id value mycarousel page2 whitelist decides reachable check writing anything already declares costs argument declare dropped silence lives frontend resolves reserved resource roots z2ui5_cci controls addon z2ui5_ccc customer extension loads loader like module string smuggled attribute compute binding available status error none evaluated browser against model arrived roundtrip load write backtick literal template every brace missed parser whole statement instead wrong everything decision extra initial page custom_js http get configuration set user exit advanced extensibility user_exits z2ui5_if_ui5_exit reviewable lets change framework requires registry learn pull request wait either absence boundary knowing exactly happy abaping","url":"https://abap2ui5.github.io/docs/advanced/insights/12-where-your-own-javascript-goes.html"},{"area":"docs","group":"Advanced Topics","title":"#13 Four Verbs, Every Control","text":"The first view builder in abap2UI5 had one method per UI5 control.","headings":[],"terms":"four verbs every control first view builder abap2ui5 had method per ui5 button input table hundreds properties named parameters was good idea real reason adt code completion listed developer did know api could press ctrl space backend shown accepted abap without leaving editor frontend been imported tooling hard edge class written new pull request wrapper translation behind wrong way browser discovers runtime where leaves cursor tree insights verbs.svg successor z2ui5_cl_ui5_view_builder instead ele opens element descends tag adds child stays sets attribute end goes back nothing names exactly why reachable including ones released last month nobody wrapped trade honest list gone replaced though chain still compiler checks linter against metadata ever reaches unknown misspelled property member exist oldest supported release avoid reading sdk coverage whole worth shortcut around part name build happy abaping","url":"https://abap2ui5.github.io/docs/advanced/insights/13-four-verbs-every-control.html"},{"area":"docs","group":"Advanced Topics","title":"#14 A Classrun for the Browser","text":"Every ABAP developer already knows the smallest program that does something:","headings":[],"terms":"classrun browser every abap developer already knows smallest program something class zcl_app_adt definition public section interfaces if_oo_adt_classrun endclass implementation method main out write hello world endmethod interface transaction repository object beside runs where was written shape abap2ui5 copied zcl_app_ui5 z2ui5_if_app protected private client message_toast_display silhouette different second adds destination instead console follows fiori design guidelines sent colleague url rather instruction open adt press property here worth mentioning small application thing read state screen logic place top bottom reviewer inheriting search across system agent asked change hold whole code understood piece changed confidently holds screens series keeps coming back larger app splits several classes like article advanced insights enough point starts happy abaping","url":"https://abap2ui5.github.io/docs/advanced/insights/14-a-classrun-for-the-browser.html"},{"area":"docs","group":"Advanced Topics","title":"#15 Where the Selection Screen Went","text":"Before anyone called it full-stack, ABAP had this:","headings":[],"terms":"where selection screen went anyone called full stack abap had report zre_app_input parameters pa_arbgb type t100 arbgb default mdg_tr start message input four lines every layer present exists labelled typed field value help validates handles event nobody wrote frontend because declaring variable was writing trade name data system draws made productive thirty years disappeared way browser appears became artefacts places maintained people kept step service between abap2ui5 puts back together bind declaration odata again insights bind.svg tag client attribute string handed over reference framework builds model around ships takes user came developer maintains class next code reads deal pretending otherwise dishonest layout written hand here ui5 say did comes half place lives best idea never were happy abaping","url":"https://abap2ui5.github.io/docs/advanced/insights/15-where-the-selection-screen-went.html"},{"area":"docs","group":"Advanced Topics","title":"#16 One Click, One Request","text":"The mental model that everything else in the framework rests on fits in one sentence: every click is one HTTP request, and every request is one call to main( ) on a fresh instance.","headings":[],"terms":"click request mental model everything else framework rests fits sentence every http call main fresh instance pbo pai names removed arrives carrying event user changed runs decides happens returns whatever built travels back work process released next starts way nothing between clicks because run dispatcher dispatches three questions client answer abap method z2ui5_if_app case abap_true check_on_init data_read once never view_display check_on_navigated sub app popup hand view check_on_event save on_save stands endcase endmethod order branch owes browser insights dispatch.svg things shape worth knowing init navigated true exactly first path raises well match wins stand time setup return coming value help fire again fires still showing left builds under comes blank screen reports response simply carries handler changes attributes bound controls update focus scroll stay where were called structure article advanced part variable survives itself serialized new local variables open cursor lock gone dialog step post happy abaping","url":"https://abap2ui5.github.io/docs/advanced/insights/16-one-click-one-request.html"},{"area":"docs","group":"Advanced Topics","title":"#17 What the Client Can Do","text":"The app implements one interface with one method.","headings":[],"terms":"client app implements interface method parameter z2ui5_if_client whole ask framework worth knowing shape name because small wants calls show screen view_display popup_display popover_display nest_view_display put abap data bind attribute reference directions find out user did check_on_event get_event get_event_arg why main was called check_on_init check_on_navigated talk message_toast_display message_box_display move another back nav_app_call nav_app_leave get_app_prev browser something follow_up_action cs_event constant know where runs get device launchpad url parameters raw event carry weight smallest takes variable returns binding path view needs builds model around whatever bound ships writes changes tag input value customer names frontend should send control fires button text save press string generators nothing registered declared written read request last row escape hatch everything matter rather focus field scroll copy clipboard download file set tab title raise size limit call val set_focus t_arg inputcustomer api surface ever touches full list every resources page generated itself happy abaping","url":"https://abap2ui5.github.io/docs/advanced/insights/17-what-the-client-can-do.html"},{"area":"docs","group":"Advanced Topics","title":"#18 CALL SCREEN, LEAVE SCREEN","text":"Module pools had a call stack of screens. CALL SCREEN 200 pushed one, LEAVE TO SCREEN 0 popped it, and the screen underneath came back with its fields intact. abap2UI5 has the same stack — the elements on it are app i...","headings":[],"terms":"call screen leave module pools had stack screens pushed popped underneath came back fields intact abap2ui5 elements app instances within class speak flag step number decides view view_display builds event handlers move along views over internal table branches right shape whenever share data between classes framework keeps abap push called takes instance waits client nav_app_call new zcl_app_detail order_id pop caller again check_on_navigated nav_app_leave gets main true attributes still was serialized while waited show because browser displaying sub read left behind detail cast get_app_prev bound message result endif transaction starts given without pushing current nothing return popup thing smaller slot popup_display fragment instead popup_destroy closes everything ordinary binding inputs used several apps make z2ui5_if_app displays ends reads through above fiori launchpad navigating goes cross navigation shell history button keep working cs_event constant rather page cookbook event_navigation cross_app now numbers happy abaping","url":"https://abap2ui5.github.io/docs/advanced/insights/18-call-screen-leave-screen.html"},{"area":"docs","group":"Advanced Topics","title":"#19 Where F4 Went","text":"PARAMETERS pa_arbgb TYPE t100-arbgb got a value help for free, because the DDIC knew the search help and the screen knew the DDIC.","headings":[],"terms":"where went parameters pa_arbgb type t100 arbgb got value help free because ddic knew search screen way browser link broke input ui5 view idea stands behind abap2ui5 put automatic version back gives three shapes actually comes few lines cheapest widest suggestions while typing candidates internal table bound filters roundtrip involved first render abap ele client bind country suggestionitems t_countries showsuggestion abap_true tag listitem core text code additionaltext name selection popup shows icon raises event pressed handler runs select fills opens list row user picks argument writes attribute carrid valuehelprequest showvaluehelp sub app navigation second class chosen simply reusable needed ten screens becomes z2ui5_if_app displays slot called nav_app_call read through get_app_prev leaves stack advanced insights call leave written once wraps whatever honestly gone part nothing had know field developer names came anything produce including did exist millisecond ago somewhere started now longer limited either happy abaping","url":"https://abap2ui5.github.io/docs/advanced/insights/19-where-f4-went.html"},{"area":"docs","group":"Advanced Topics","title":"#20 MESSAGE Still Works","text":"An ABAP developer has thirty years of habits around messages, and most of them carry over unchanged.","headings":[],"terms":"message still works abap developer thirty years habits around messages carry over unchanged changes where ends toast needs acknowledgement box client message_toast_display saved message_box_display text order locked another user type error old structures straight bapiret2 table bapi exception object catch framework reads details out net number data dummy t_bapiret try cx_root endtry means class t100 translation tooling exactly useful element way string gets translated because app i18n file beside different away http handler escapes main travels roundtrip database work rolled back browser shows application please restart overlay chain behind button continue carried next state failed restarts draft brings were fallback reaching lost screen anything predictable conversion service caught happens shown costs click setting belongs every production system body carries source positions rtti names context everything wants should get check_hide_error_details exit advanced extensibility user_exits turns bare internal server leaves else classes texts stay dump looks happy abaping","url":"https://abap2ui5.github.io/docs/advanced/insights/20-message-still-works.html"},{"area":"docs","group":"Advanced Topics","title":"#21 The Lock Is Gone by the Next Click","text":"VA02 calls ENQUEUE_EVVBAK when the order opens and holds the lock for as long as the dialog session lives.","headings":[],"terms":"lock gone next click va02 calls enqueue_evvbak order opens holds long dialog session lives works because abap2ui5 every fresh advanced insights request set while released user read screen abap still valid assumption underneath framework limitation worked around question stateless web application answered answers known locking splits questions phase edit happens thinking typing save moment hit nothing held thinks handler acquires writes commits releases inside roundtrip exists milliseconds method on_save call function exporting mode_vbak mandt vbeln exceptions foreign_lock system_failure others subrc client message_box_display locked another return endif update vbak auart where commit work dequeue_evvbak endmethod plus optimistic check users ten minutes second silently wins app remembers change timestamp compares row changed refused sees happened together production default guards between save.svg soft table saying editing expires gives being edited müller warning back without process holding anything gui way set_session_stateful pins rest classic enqueue survives clicks again right tool migration flow resource expensive rebuild per pinned active exit path available public cloud use knowingly promise happy abaping","url":"https://abap2ui5.github.io/docs/advanced/insights/21-the-lock-is-gone-by-the-next-click.html"},{"area":"docs","group":"Advanced Topics","title":"#22 Who May Start Which App","text":"One ICF node serves every abap2UI5 app in the system, and the URL names the class: ?app_start=zcl_job_monitor.","headings":[],"terms":"may start app icf node serves every abap2ui5 system url names class app_start zcl_job_monitor first question basis colleague asks right anybody nobody decided otherwise deciding happens familiar places authentication logon procedure sso certificate visibility configured like ui5 adds nothing takes away authorization way report checks selects main entry branch shows view where ordinary authority check goes anything selected displayed fails user gets message instead abap method z2ui5_if_app client check_on_navigated object z_app_auth field subrc message_box_display text authorized use type error title return endif build display usual endmethod value roles pfcg sits protects transport carries guard together know classes exist holds reached never nav_app_call another arrives roundtrip runs complete example refusal should say configuration framework itself brings table part web application needs did csrf token post default content security policy page restricting browser load tightened exit old release longer served details off production advanced insights still works described business logic leaves server data bound else rest happy abaping","url":"https://abap2ui5.github.io/docs/advanced/insights/22-who-may-start-which-app.html"},{"area":"docs","group":"Advanced Topics","title":"#23 100 Rows, Four Hours, One Request","text":"Three numbers decide whether an abap2UI5 app feels fast, and none of them is in the app's code.","headings":[],"terms":"rows four hours request three numbers decide whether abap2ui5 app feels fast none code worth knowing first table bound every ui5 json model exposes items list binding default bind entries render rest silently dropped error anywhere setting framework raised per view abap client follow_up_action val cs_event set_size_limit t_arg value cs_view main raising fix thousand fifty row travels browser response back database draft screen needs many pages select growing filter bar way selection always did serialized instance advanced insights new lives z2ui5_t_01 until expires user comes lunch continues where were tomorrow starts fresh number draft_exp_time_in_hours exit place grows cleaned schedule system users long running screens sizes like click http roundtrip plus read write cost therefore size attributes carries catalogue ten attribute pays either section reads was built costs costs.svg rule follows dynpro program global variables keep shows nothing again small bounded everything else already well happy abaping","url":"https://abap2ui5.github.io/docs/advanced/insights/23-100-rows-four-hours-one-request.html"},{"area":"docs","group":"Advanced Topics","title":"#24 ABAP Unit for a Screen","text":"An abap2UI5 app is a global class, and a global class has a Test Classes include.","headings":[],"terms":"abap unit screen abap2ui5 app global class test classes include whole story testing here reason stays short decision rather framework logic touch client main dispatches methods read data decide change attributes view_display message calls need directly looks afterwards zcl_app_overdue definition public section interfaces z2ui5_if_app types begin ty_s_invoice invoice type string due open abap_bool end ty_t_invoice standard table empty key t_invoices t_overdue key_date data_read overdue_calc protected ref z2ui5_if_client private endclass implementation method case abap_true check_on_init datum check_on_navigated check_on_event recalc endcase endmethod system select value abap_false inv where view z2ui5_cl_ui5_view_builder factory ele mvc xmlns sap.m sap.ui.core.mvc page title overdue tag datepicker bind valueformat yyyymmdd displayformat medium event list items standardlistitem info stringify lives nothing ltcl_overdue final risk level harmless duration only_open_and_past_due cut new cl_abap_unit_assert assert_equals act lines exp msg past date http browser sets reads because things worth keeping way purpose handler take input get set either run real against fill hand alone itself different kind check linter advanced reconstructs xml chain builds holds ui5 metadata unknown control misspelled property wrong without roundtrip keep out testable happy abaping","url":"https://abap2ui5.github.io/docs/advanced/insights/24-abap-unit-for-a-screen.html"},{"area":"docs","group":"Advanced Topics","title":"#25 When One Class Is Not Enough","text":"Every example in this series is one class, and for the screens it is about that is the right size.","headings":[],"terms":"class enough every example series screens right size real application grows past question seams four ordinary abap per screen unit abap2ui5 app logic behind master list detail over different data classes connected stack advanced insights call leave calls nav_app_call returns nav_app_leave reads result through get_app_prev small read main popups value helps confirmation dialog help settings popup used several z2ui5_if_app displays slot written once called anywhere tested zcl_invoice_service validate post where business goes second needs batch job test becomes dynpro program pai modules were takes event service updates attributes thing know reference held attribute serialized instance helper either implements if_serializable_object stays created fresh usually better answer anyway parts nested views layout tab strip side panel nest_view_display puts view built named rebuilds later page stands part changes without class.svg appear framework concept component manifest router controller hierarchy method exactly larger been made thirty years stayed happy abaping","url":"https://abap2ui5.github.io/docs/advanced/insights/25-when-one-class-is-not-enough.html"},{"area":"docs","group":"Advanced Topics","title":"#26 A Tile Like Any Other","text":"An app that is reached by pasting a URL is a demo.","headings":[],"terms":"tile like app reached pasting url demo becomes application launchpad abap2ui5 indistinguishable rap freestyle tiles beside installed once loads ui5 system repository shell exist connector https github.com addons ships through abapgit z2ui5 deployment whole per every points configured target mapping class parameter semantic object z2ui5_cl_my_app action display sap ui5_ui5 app_start catalogue role fiori administration already nothing specific except inside knows where abap client get check_launchpad_active abap_true follow_up_action val cs_event set_title_launchpad t_arg value job monitor endif startup parameters arrive t_comp_params navigation another goes cross back button keeps working blank recurring trouble index import run app_index_calculate clear http cache smicm hard reload page configuration walks screenshots public cloud different door build work zone pages btp describe setup user tell difference happy abaping","url":"https://abap2ui5.github.io/docs/advanced/insights/26-a-tile-like-any-other.html"},{"area":"docs","group":"Advanced Topics","title":"#27 One Codebase, 7.02 to ABAP Cloud","text":"Most SAP landscapes are currently two landscapes.","headings":[],"terms":"codebase 7.02 abap cloud sap landscapes currently something old runs business new being built beside migration between measured years rather sprints anything written side usually again abap2ui5 asks little release accident design follows framework actually produces strings moves over http cds artefact rap object odata service middle almost nothing given support genuine dependency guid creation satisfy language versions once standard single code line rest arithmetic syntax normally main repository abaplint generates low branch automatically down hand downporting produce second drifts nobody debug generated cannot drift because regenerated frontend age backend ui5 bootstrapped cdn version configuration decision property current control works system never heard where comes decides whether insights bootstrap.svg buys portability directions app older btp environment screen replaced thrown away needs ported changes happy abaping","url":"https://abap2ui5.github.io/docs/advanced/insights/27-one-codebase-702-to-abap-cloud.html"},{"area":"docs","group":"Advanced Topics","title":"#28 Cloud-Ready Is a Property of Your App","text":"The framework is ABAP Cloud compliant. It is written in the ABAP for Cloud language version, it calls released APIs only, it modifies no standard SAP code, and it installs on BTP ABAP Environment and S/4HANA Public Cl...","headings":[],"terms":"cloud ready property app framework abap compliant written language version calls released apis modifies standard sap code installs btp environment 4hana public none says anything somebody builds restricted restriction matters screen direct access database tables virtual data model cds views publishes maintains api way exactly keeps upgrade stable beneath change view shape across insights vdm.svg lines decide t_orders type table i_salesorder empty key select fields salesorder salesorganization rows read directly vbak vbeln vkorg survives next move system cannot nothing involved difference worth saying plainly because badge easy mistake guarantee clean core dependency grants application reads writes decided make stops being reason happy abaping","url":"https://abap2ui5.github.io/docs/advanced/insights/28-cloud-ready-is-a-property-of-your-app.html"},{"area":"docs","group":"Advanced Topics","title":"#29 When the API Is Not Released","text":"SAP grades an extension, and since August 2025 it does so on four clean core levels:","headings":[],"terms":"api released sap grades extension since august four clean core levels level language version uses abap cloud development apis yes upgrade stable standard classic frameworks recommends badis user exits alv gui less stability internal objects neither nor classified conditionally check every modifications implicit enhancements marks replaced three tier model nothing written under tiers migrated was never layer wrappers still exist app calling stays split touches test cockpit cloudification repository viewer say object lands abap2ui5 calls says reaches decided screen built whether renders through anything else leaves case actually comes need move wrapper class itself graded long advanced use_cases on_stack_wrapper.svg width value grade part system name size boundary changes underneath instead search ever touched 4hana private premise may releases know yet option framework either way moving later means changing apps call while on_stack_level_b.svg make dependency makes findable happy abaping extensibility white paper https community.sap.com technology blog posts why matters get insights our brand new guide carries technical rules behind maturity covers grading code already exists","url":"https://abap2ui5.github.io/docs/advanced/insights/29-when-the-api-is-not-released.html"},{"area":"docs","group":"Advanced Topics","title":"#30 On-Stack or Side-by-Side","text":"Two places to run an abap2UI5 app, and the choice is about lifecycles rather than about code.","headings":[],"terms":"stack side places run abap2ui5 app choice lifecycles rather code means runs inside sap system reads data directly remote call second operate deployment transport already use built released apis unchanged 4hana public cloud private premise inherits lifecycle release upgrade window maintenance slots apps advanced use_cases on_stack_level_a.svg width btp abap environment calls remotely odata rfc soap services everything level construction works against where custom option side_by_side_level_a.svg separation point upgraded restarted schedule agree cycle actual constraint locked long change team cannot get through quarter worth directness gives cost equally plain slower local read narrower select reach cover case service closes gap graded stays stay wraps classic standard side_by_side_custom_service.svg neither touches class renders changes happy abaping","url":"https://abap2ui5.github.io/docs/advanced/insights/30-on-stack-or-side-by-side.html"},{"area":"docs","group":"Advanced Topics","title":"#31 One App, Many Systems","text":"A side-by-side app already runs outside the system it serves.","headings":[],"terms":"app many systems side already runs outside system serves raises question worth asking serve lives sap btp abap environment reaches through released apis connection configuration rather code abap2ui5 several 4hana advanced use_cases saas.svg width real saas shape codebase deployed once serving customer tenants data release none needing anything installed nobody transports schedules downtime fix every tenant works because earlier articles established added frontend shell renders whatever arrives care produced class artefacts beside nothing per deploy state makes roundtrip work travels request server holds session belonging limits ones implies needs reachable latency now wire boundary something enforce enforces sees customers framework install was never happy abaping","url":"https://abap2ui5.github.io/docs/advanced/insights/31-one-app-many-systems.html"},{"area":"docs","group":"Advanced Topics","title":"#32 From ITS to abap2UI5","text":"Worth laying out end to end, because the shape of it is easy to misremember.","headings":[],"terms":"abap2ui5 worth laying out end because shape easy misremember dynpro screens rendered html server every interaction full page still warehouses today scanners bsp javascript written inside abap stack embedded logic side rendering again real control over markup web views context controllers defined component model rather building ui5 freestyle moves xml controls run browser backend delivers data through odata stops having opinion screen rap fiori elements definition returns cds annotations runtime turns app sends view itself static renders twenty seven years move did reverse insights timeline.svg read line march away first fifteen built left where stays modern belongs nobody proposing otherwise been moving back ever since makes wire less new idea returning arriving part old world never had library happy abaping","url":"https://abap2ui5.github.io/docs/advanced/insights/32-from-its-to-abap2ui5.html"},{"area":"docs","group":"Advanced Topics","title":"#33 RAP or abap2UI5?","text":"The honest answer is that most systems end up with both, and the question is never \"which framework\" but \"which one for this screen\".","headings":[],"terms":"rap abap2ui5 honest answer systems end question never framework screen fiori elements backend cds views behavior definitions odata abap classes producing xml view json model frontend app per service static ui5 shell shared every definition annotations written data fixed design time runtime internal tables drafts serialization communication metadata entities actions http strings request deployment transported separately activating class here split holds practice reach behaviour matters transactional object validations determinations authorizations draft handling consumer moment second client exists likely needs live somewhere where sap put standard crud over stable close list report page already case was built costs least deliverable purpose often short life operations tool correction form somebody thursday dashboard team whenever shape known until table whose columns come rtti control annotation vocabulary older release available exclusive part worth remembering calls business through eml like still run works apply cannot way shaped reason abandon different front rule thumb once thing use build wherever cheapest happy abaping","url":"https://abap2ui5.github.io/docs/advanced/insights/33-rap-or-abap2ui5.html"},{"area":"docs","group":"Advanced Topics","title":"#34 UI5 Freestyle or abap2UI5?","text":"Both give full access to the UI5 control library.","headings":[],"terms":"ui5 freestyle abap2ui5 give full access control library neither limits screen contain choice possible where work happens backend odata rest services loosely coupled abap classes producing xml view json model frontend app javascript views controllers static shell shared every definition project written logic runs split between controller client state held browser roundtrips travels request tooling business application studio build ide extra toolchain deployment deploy plus activating class reach smart edges worth listing plainly offline out event asks server next take away left degraded none warehouse signal different architecture real time heavily interactive uis wrong shape drag drop across board canvas live collaboration anything interesting lives per turn tuning pushdown hana indirect typed service put cds front database let page filter fuzzy search straight against here selects sends result help rendered available separate teams lose whole benefit assumes developer holds together team ships release cycle design contract feature giving costs saves already knows everything data rules decisions mostly shows events back writing writes second place maintain thing coordinate whose never practical tiebreaker usually iteration speed richness change activate refresh cache great deal internal applications nothing tablet still software forms tables dashboards approvals admin tools small screens nobody funds picking later string either way controls happy abaping","url":"https://abap2ui5.github.io/docs/advanced/insights/34-freestyle-or-abap2ui5.html"},{"area":"docs","group":"Advanced Topics","title":"#35 Low-Code or abap2UI5?","text":"A commercial low-code platform and abap2UI5 answer the same question: modern UIs for SAP systems without a full frontend stack per app.","headings":[],"terms":"low code abap2ui5 commercial platform answer question modern uis sap systems without full frontend stack per app models could hardly further apart visual designer licensed plain abap open source framework choice usually clear once right asked definition specific format classes written ide storage repository system like development object versioning transport mechanisms cts abapgit testing tooling unit plus project linter license typically end user mit unlimited users installation add client components pull release coverage vendor supports 7.02 cloud exit path apps exist stay reach requirement outside offline capable native mobile where local synchronisation whole point bundled suite workflow api management portal rather layer alone contractual support sla somebody hold accountable building people developers exists precisely non developer produce something first replaces should every class diffable transportable testable reviewable request second govern artefact drifting describes nothing recurs seat ten thousand cost vanished tomorrow keep running because means permanently yours fork asymmetry worth naming new needs human front coding agents actually good write validate view run read screenshot several hundred ui5 sample ports were produced way guarded neither migration adopted time costs afternoon happy abaping","url":"https://abap2ui5.github.io/docs/advanced/insights/35-low-code-or-abap2ui5.html"},{"area":"docs","group":"Advanced Topics","title":"#36 Written for Agents","text":"The property this series kept returning to ","headings":[],"terms":"written agents property series kept returning app class text consequence was anybody mind framework designed shape coding agent best writing fiori elements keep cds view annotations behavior definition service binding generated frontend step verify none without system freestyle hold abap backend javascript head once contract between true abap2ui5 writes file language thing runs three things around turn working setup map reader checkout site publishes llms.txt https abap2ui5.github.io docs every page line covers repository interfaces read either works today instead recalls where builder still method per control check needs linter advanced reconstructs ui5 out builds reports work stops handing over apps render gates sample repositories several hundred worked examples catalogues complete tested pattern value help tree navigation upload somebody already built answer those samples were themselves ported way write lint run screenshot keeps feature falls application newest paste mcp server developing get_started code first design friendly happy abaping","url":"https://abap2ui5.github.io/docs/advanced/insights/36-written-for-agents.html"},{"area":"docs","group":"Resources","title":"References","text":"- Field Service Management Mobile Logging using abap2UI5 (Decabase Blog - 22.08.2026) - UI5 in ABAP Cloud (without RAP or Fiori Elements) (Decabase Blog - 17.08.2026) - Fiori-type Apps built 100% with ABAP (Logali Gro...","headings":[["2026","2026"],["2025","2025"],["2024","2024"],["2023","2023"]],"terms":"references field service management mobile logging using abap2ui5 decabase blog 22.08.2026 https blog.decabase.com 2c18e4ed455d ui5 abap cloud without rap fiori elements 17.08.2026 4e8a70d961c3 type apps built logali group 23.04.2026 logaligroup.com magia servidor local tipo creadas con codigo webinar launchpad integration youtube 30.07.2025 www.youtube.com watch t5g3f3phsbw list pllpkz_86h4qugsfsjohdht9crpjxdea1p featured sap developer news 21.03.2025 vkrpkde2mku pl6rpkc85slqavbsqxn9522_1jnvpavbgg 90s automated deployment 17.12.2024 www.nuveplatform.com deploy creating interfaces 12.12.2024 n2oadxf7lng highlighted boring enterprise nerdletter i81z6w_btia 1010s newsletter 11.12.2024 boringenterprisenerds.substack.com aancos crystal ball sapta developing 07.11.2024 0izpa2xrppi 14.06.2024 youtu.be 7n16u rx8iy cust code videos featuring 20.05.2024 sd1vit_ty0k running backend browser linkedin 02.04.2024 www.linkedin.com pulse lars hvam petersen l8zff trackingid 4mhmb1v 2fsoa8smdsiucepg nerdcast 29.01.2024 svdzkfbvqr8 15.12.2023 cfh9l03wucg 350s join advent community 27.11.2023 blogs.sap.com preparing showcased teched 02.11.2023 klbf0oostzs 3052s part challenge 17.05.2023 groups.community.sap.com application development open source week m1372 g62exysitco pllxj8 g1r2glvyxvqnnv5izkwkten6kip 1008s 08.03.2023 cva burnout c2c shortwave 26.01.2023 6bdk55xyttm see projects dotabap.org","url":"https://abap2ui5.github.io/docs/resources/references.html"},{"area":"docs","group":"Resources","title":"Client API","text":"Everything an app calls at runtime comes through one interface: z2ui5_if_client, handed to the app as client on every roundtrip.","headings":[["App lifecycle","app-lifecycle"],["check_on_event","check-on-event"],["check_on_init","check-on-init"],["check_on_navigated","check-on-navigated"],["Main view","main-view"],["view_destroy","view-destroy"],["view_display","view-display"],["Nested views","nested-views"],["nest_view_display","nest-view-display"],["nest_view_destroy","nest-view-destroy"],["nest2_view_display","nest2-view-display"],["nest2_view_destroy","nest2-view-destroy"],["Popups and popovers","popups-and-popovers"],["popup_display","popup-display"],["popup_destroy","popup-destroy"],["popover_display","popover-display"],["popover_destroy","popover-destroy"],["Data binding","data-binding"],["_bind","bind"],["_bind_path","bind-path"],["Events and frontend actions","events-and-frontend-actions"],["_event","event"],["follow_up_action","follow-up-action"],["Reading the request","reading-the-request"],["get","get"],["get_event","get-event"],["get_event_arg","get-event-arg"],["Messages","messages"],["message_box_display","message-box-display"],["message_toast_display","message-toast-display"],["App navigation","app-navigation"],["get_app","get-app"],["_event_nav_app_leave","event-nav-app-leave"],["nav_app_leave","nav-app-leave"],["nav_app_call","nav-app-call"],["check_app_prev_stack","check-app-prev-stack"],["get_app_prev","get-app-prev"],["Hash and app state","hash-and-app-state"],["app_state_set_active","app-state-set-active"],["app_state_get_href","app-state-get-href"],["hash_set","hash-set"],["hash_replace","hash-replace"],["Session","session"],["set_session_stateful","set-session-stateful"],["Constants","constants"],["cs_device","cs-device"],["cs_event","cs-event"],["cs_view","cs-view"],["cs_nav_mode","cs-nav-mode"],["Types","types"],["ty_s_name_value","ty-s-name-value"],["ty_t_name_value","ty-t-name-value"],["ty_s_model_skip","ty-s-model-skip"],["ty_t_model_skip","ty-t-model-skip"],["ty_s_get","ty-s-get"],["ty_s_event_control","ty-s-event-control"]],"terms":"client api everything app calls runtime comes through interface z2ui5_if_client https github.com abap2ui5 blob main src z2ui5_if_client.intf.abap handed every roundtrip page generated source release named nav bar method parameters types defaults constant structure documentation written itself printed here install already promises deliberately small stable pieces fit together lifecycle binding events tutorial tutorials walkthrough cookbook view definition explain contract against older may still call write instead deprecations resources nowhere else start scripts generate reference.mjs edit methods structures reference json document api.json abap2ui5.github.io docs check_on_event parameter type default description val clike optional returns abap_bool check_on_init true first instance framework flips flag response runs hour sees once starts reached again stack value help handing control back restored bookmark roundtrips existing false gating alone common way end screen refresh see check_on_navigated those therefore branch display whenever put new called returning built popups closing bookmarked draft being included purpose part accident current factory z2ui5_cl_ui5_action factory_first_start sets fresh create object well restore implies makes view_display endif complete condition needed samples whoever changes keeps apps stop rendering nothing raised anywhere view_destroy open popup popover meant survive frontend builds switch_default_model_anno_uri switch_default_model_path nested views nest_view_display method_insert method_destroy nest_view_destroy nest2_view_display nest2_view_destroy popovers popup_display popup_destroy popover_display xml by_id popover_destroy data bind path abap_false tab cell internal table whole attribute pass row number tab_index bound component e.g mt_emp name identified copy helper variable holding string refused binding_error_tab_cell_level toolchain caveat abap stock abaplint downport lowers expression read level code correct v750 target repository patches lowering assigning node setup patch downport.mjs filed upstream comp works build downported unpatched assign rule 7.02 native measured assumed transpiler resolves form correctly loses travels writes qualified model array shape while addresses single rows use where original repeats controls aggregation six statically panels over employee 0..5 otherwise series flat attributes emp1_name emp2_name repeating items keep template fields relative address counted based renders exist raises dumping note writing argument dumps side missing seed building switch_default_model omit_initial initial out serialized sending field never absent reaches explicit overrides ui5 property relies enum typed rejects empty outright set fill different subsets properties omit_initial_paths string_table omission scoped listed upper cased column names last segment blanket coarse must reach drop fall list numeric columns leave booleans contains splice quoted receive sap.ui.integration card manifest keys sap.app sap.card valid url outbound z2ui5_cl_ui5_srv_model ignored supplied whether decided custom_mapper custom_filter pair passed like store bind_path under binding_call filter sorter bindelement need identical abap_true byte delegates rather repeat drift apart exists because forms alike t_products says needs boolean whose mean reader know forces along moment second right stays actions event register backend return handler press save s_ctrl carries flags check_allow_multi_req sends another running check_prevent_default cancels oevent.preventdefault sap.tnt navigationlistitem select item sent charge happens baked per wire render time prevent_default_expr veto firing evaluated fires protect let rest getid indexof col_date wins t_arg ty_s_event_control arg appended slotted next better allows inserting reorders public signature spelling exactly reads get_event_arg wires carry key constructor longer inside values grow arg2 arg3 positional numbering spells passing appends behind defined composition guess between readings raw live syntax characters text user foreign system check_arg_literal preferred passes follow_up_action schedule action run processed ways cs_event set_title arguments javascript without filled ones slot control_by_id resolved params unless denylist break invariants mutators allowed line additem removeitem removeallitems destroycontent generic reflection variants take member denied addaggregation removeallaggregation setassociation separate cs_view across scope lookup entries capabilities css whitelisted declaration dom width sap.m.page prefer wherever toggleby opens closes anchored anchor association setter setselectedsection setselecteditem clears takes addressed positionally index carousel pages cloned spell mints parent prefix assigned equivalent controller idiom ocarousel.setactivepage ocarousel.getpages plain slashes control_global global message_toast message_box busy_indicator theming invisible_message formatting icon_pool setwithinarea confines sap.ui.core.popup.setwithinarea 1.89 window releases restriction announce sap.ui.core.invisiblemessage 1.78 mode polite assertive singleton change made setcustomcurrencies registers currency codes standard sap.ui.model.type.currency digit count sap base i18n 1.120 bgn4 digits replaces registration addcustomcurrencies merges map reaching wrong silent currencies loads drops registered symptom error configuration formatted caching numberformat init among sap.ui.unified.currency was implements localization hook implement formats registerfont icon collection outside icons font resolvable apos tnt fontfamily fonturi themes fonts normal iconpool module uri glyph logs real sap.ui.require.tourl survives mount point absolute issue session costs smart_variant_init initialise handshake sap.ui.comp variant management osmartvariantmanagement.initialise fncallback opersonalizablecontrol personalizable saving fails sap.ui.fl stored loaded smartvariantmanagement waits smart odata metadata filter_bar_variant_init classic sap.ui.comp.filterbar.filterbar filterbar smartfilterbar knows above report normally hand boilerplate registerfetchdata registerapplydata registergetfilterswithvalues addpersonalizablecontrol personalizableinfo marks modified selecting restoring extra keyboard_shortcut combination declarative sap.ui.core.commandexecution shortcut spelled ctrl shift alt meta order cmd command option accepted aliases pressing button suppresses browser registering rebinds removes registrations belong dropped third scopes unscoped applies commandexecution dependents shadows either nested2 closed dialog declared opened openby enters beats specific statement innermost hash_attach_changed owned hash routing hashchanger attachhashchanged counterpart router page2 hash_routing hash_set pushed history entry hash_replace did forward manual now stands arrives request deep link get s_config decides show leaves entirely calling unregisters dies switch asserts mutually exclusive routed belongs app_state_set_active claim hash_back onnavback pattern step window.history.go consumed resulting fallback guards cold recommended load replace falling shows route apply getbinding untouched operator value1 value2 clear sort descending group these free wired result server reading ty_s_get get_event triggered handled dispatcher case messages message_box_display sap.m.messagebox whatever message bapiret2 t100 rap symsg log exception html business tree recognized box severity title themselves rendered headline details complex always information styleclass onclose emphasizedaction initialfocus textdirection closeonnavigation dependenton contentwidth message_toast_display duration offset collision autoclose animationtimingfunction animationduration closeonbrowsernavigation class navigation get_app ref z2ui5_if_app event_nav_app_leave nav_app_leave r_data nav_app_call check_app_prev_stack get_app_prev state active z2ui5 xapp advanced reload shared restores exact persists anyway container switches tracking off claims app_state_get_href flp safe shell recipient lands launchpad home composed location origin pathname search ride requests plus owns clipboard_copy input mail sethash navto listener suffix detail history.pushstate replacehash flexiblecolumnlayout arrow layout follows drags set_session_stateful constants compares slots cs_device reports device cs_nav_mode modes phone tablet desktop combi chrome firefox safari edge windows win macintosh mac linux ios android orientation portrait landscape popup_close popover_close set_size_limit set_odata_model cross_app_nav_to_ext cross_app_nav_to_prev_app set_favicon set_focus scroll_to scroll_into_view start_timer system_logout keyboard_set_mode open_new_tab location_reload set_title_launchpad download_b64_file urlhelper store_data play_audio bind_element set_push_state experimental set_nav_routing set_app_state_active nest nest2 switched much buttons left feature clean preserved expired ty_s_name_value ty_t_name_value ty_s_model_skip delta could applied arrive convert 250.00 12.50 eur packed price integer skipped unconvertible kill many good trace skip find happened updated unconditionally top interested pushes goes showing until something delta_apply_field fills row_parent ty_t_model_skip s_draft separately s_device s_focus s_scroll s_ui5 ever used t_event_arg check_launchpad_active id_prev id_prev_app id_prev_app_stack t_comp_params r_event_data version resize height support touch pointer retina selection_start selection_end build_timestamp gav theme s_nav check_leave check_call t_model_skipped options","url":"https://abap2ui5.github.io/docs/resources/api.html"},{"area":"docs","group":"Resources","title":"Add-ons","text":"abap2UI5 focuses on core capabilities — rendering views, handling events, and exchanging data. This keeps the framework lean and easy to maintain. The real strength lies in the ecosystem: ready-to-use add-ons and comm...","headings":[["Available Add-ons","available-add-ons"],["Open Source Projects","open-source-projects"],["Contribution","contribution"]],"terms":"add ons abap2ui5 focuses core capabilities rendering views handling events exchanging data keeps framework lean easy maintain real strength lies ecosystem ready use community projects extend specific needs available browse addons https github.com organization find need features include layout variant similar classic sap gui selection screens alv reports table maintenance tools integration third party libraries like chart.js richer charts many open source try out repository description quest nomssi axage wizard adventure game built engine advent code joltdx abap template generic ddic searchhelp axelmohnen a2ui5 generic_search_hlp builder sql console apps run commands browser content loader upload download contribution feature project contribute existing repositories start here others work","url":"https://abap2ui5.github.io/docs/resources/addons.html"},{"area":"docs","group":"Resources","title":"Who Uses abap2UI5?","text":"We'd love to hear how you use abap2UI5. Whether in customer projects, integrations, workshops, open-source contributions, or any other initiative, sharing your scenario can inspire others to try the project and help t...","headings":[["Customer Projects","customer-projects"],["Integrations and Workshops","integrations-and-workshops"]],"terms":"uses abap2ui5 love hear use whether customer projects integrations workshops open source contributions initiative sharing scenario inspire others try project help community grow company showcase apps reshape real world workflows add here system case emineo https emineo.ch abap 7.57 ewm running desktop mobile devices swiss krono www.swisskrono.com 7.55 host build creative ways initiatives learn description nuve platform www.nuveplatform.com demand sap systems automated setups logali group logaligroup.com webinars certifications ready list directly reach out contact abap2ui5.org building thank being part","url":"https://abap2ui5.github.io/docs/resources/who_uses.html"},{"area":"docs","group":"Resources","title":"Release Notes","text":"See Deprecations for what is superseded but still shipping, and for the full removal list with migration notes.","headings":[["1.144.0","1-144-0"],["1.143.0","1-143-0"],["1.142.0","1-142-0"],["1.141.0","1-141-0"],["1.140.0","1-140-0"],["1.139.0","1-139-0"],["1.138.0","1-138-0"],["1.137.0","1-137-0"],["1.136.0","1-136-0"],["1.135.0","1-135-0"],["1.134.0","1-134-0"],["1.133.0","1-133-0"],["1.132.0","1-132-0"],["1.131.0","1-131-0"],["1.130.0","1-130-0"],["1.129.0","1-129-0"],["1.128.0","1-128-0"],["1.127.0","1-127-0"],["1.126.0","1-126-0"],["1.125.0","1-125-0"],["1.124.0","1-124-0"],["1.123.0","1-123-0"],["1.122.0","1-122-0"],["1.121.0","1-121-0"],["1.120.0","1-120-0"],["1.119.0","1-119-0"],["1.118.0","1-118-0"],["1.117.0","1-117-0"],["1.116.0","1-116-0"],["1.115.0","1-115-0"],["1.114.0","1-114-0"],["1.113.0","1-113-0"]],"terms":"release notes see deprecations resources superseded still shipping full removal list migration 1.144.0 added client event arg value spelling t_arg exactly folds table wire get_event_arg unchanged exists because wires carry single row key source parameter where constructor longer inside passing appends behind rows values stays right deliberately arg2 arg3 bind_path val path form bind under name bound aggregation binding_call filter sorter bindelement need abap_true byte takes combine tab tab_index omit_initial json switch_default_model call deprecated frontend actions expandselected collapseselected tree setbadgeminvalue setbadgemaxvalue iconpool.registerfont custom icon font sap.tnt sap icons tnt common without registration renders glyph logs nothing addcustomcurrencies merges codes rather replacing whole way setcustomcurrencies navcontainer typed page plus optional transition backtopage silently handed plain arguments empty string arrives date valued argument travels local instead shifting day west system timezone get t_model_skipped names cells model delta could convert dropping trace location block latched request confirmed built aborted first suppresses rest session 7.02 7.31 function expression class pool down compile time report multiinputext gained suggestion half addvalidator developer tools cross search moved onto renamed old ships z2ui5_if_exit now z2ui5_if_ui5_exit interface looked called every existing exit keeps working rename leisure removed breaking z2ui5_if_types retired src type held sits object uses ty_s_get ty_s_event_control ty_s_name_value ty_t_name_value cs_device z2ui5_if_client three http config types ty_s_draft z2ui5_cl_ui5_srv_draft deleted reshaped frozen package compiles identical field 1.143.0 z2ui5_cl_ui5_view_builder view builder documentation written against factory ele tag end stringify ui5 control property reachable knows none z2ui5_cl_xml_view pushed automatically roundtrip changed framework compares main sends open slot differs handler render stale forgetting payload error output carries diagnostic message chain per exception text position kernel public attributes app draft url context popup shows messages detail click away details copy asks icf gzip responses accepts less transfer installations whose icm profile compress already contains spliced node properties must receive sap.ui.integration card manifest keys valid abap reach backend data viewsettingsdialog.confirm like used break serialization entirely setp13ndata control_methods seeding sap.m.p13n panel needs hand javascript message_toast_display message_box_display queue follow several calls show order rendered startup was rebuilt five quickstart steps top bottom sample repository install status information popover tabs dialog closed grey out opening blank nest nest2 gone got leaner throughout internal action lists travel real arrays constant browser once load display implies teardown routing mode sent may hold fixes pending timer fires destroyed controller switch clears previous keyboard shortcuts nested displayed gets storage structure stored read back messagetoast popup.dock warning default csp frame ancestors meta test classes restored disabled xml_view suites enabled freeze covers production code obsolete works view_model_update popup_model_update popover_model_update variants push automatic delete next touch event_client follow_up_action custom_mapper custom_filter omit_initial_paths shape cs_event wizard_set_next_step control_by_id additionally gotostep set_nav_back set_nav_routing set_push_state set_app_state_active stay delegate events nav_to_route nav_app_call navigation pushes route history entry history_back history.back nav_app_leave return through stack viewname never filled reading drop z2ui5_if_app check_sticky check_initialized wrapper kept sync sees truth direct write honored use set_session_stateful check_on_init curated formatter round2dp dimensions stockstatusstate stockstatusicon deliverystatusstate rounding joining valuestate mapping things finishes result helpers expandinlineicons remain render_documentation render_system_popup render_contribution z2ui5_cl_ui5_app_start open_info close open_debug internals start 1.142.0 functions new e.g system_logout keyboard_set_mode extended debug tool log export performance introduced fields compatibility 1.71 2.x lazy module loading lifecycle escaping security sanitization response headers fatal overlay samples fully reworked various small improvements bug z2ui5_cl_util_api environment specific z2ui5_cl_util_api_c z2ui5_cl_util_api_s methods were bal conv_get_itab_by_xlsx conv_get_xlsx_by_itab source_get_method z2ui5_cl_util_ext remaining ones z2ui5_cl_util replace prefix holds method z2ui5_cl_pop_bal replacement popups keep 1.141.0 image editor manipulation camera selector facing support picture configurable height width implemented handling experimental check_on_event improved since adopted supported dispatch api alongside case event_nav_app_leave enhanced updated ajson library latest version quality refactoring formatting cloud atc findings 1.140.0 user logic greater customization options binding references optimized faster adjustments loss protection stateful functionality 1.139.0 multiple fixed launchpad issues 1.138.0 clipboard feature usability resolved numeric problems older versions bundled 1.137.0 state persistence long bugs releases ensured openui5 1.136.0 odata container controls avatargroup viz charts setmaxwidth launchpads 1.135.0 item supports attribute strip formatted customizable links expandable file organization 1.134.0 tile color multiselect select separated layouts abap2ui5 core 1.133.0 splitter grid generic content areas step input news etc shell bar side picker layout management low fix 1.132.0 multi slider range selection avatar mapper downport syntax 1.131.0 radio button group title 7.50 1.130.0 wizard info device bind_clear replaced focus visible 1.129.0 filtergroupitem variantmanagement addressed fiori integration 1.128.0 toast xml 1.127.0 indicator box renaming 1.126.0 extensions created rtti spreadsheet 1.125.0 magic numbers auto download base64 files features interactive 1.124.0 multiinput column menu 1.123.0 boolean conversion 1.122.0 description btp 1.121.0 manager 1.120.0 templating debugging messaging 1.119.0 parameters design 1.118.0 ui2 cl_json 1.117.0 popup_to_select sorting descriptions readiness 1.116.0 help chart.js 1.115.0 confirm inform pdf 1.114.0 debugger 1.113.0","url":"https://abap2ui5.github.io/docs/resources/changelog.html"},{"area":"docs","group":"Resources","title":"Deprecations","text":"Things in abap2UI5 that have a successor. Every entry says what to write instead, with the old and the new code next to each other.","headings":[["Start with the linter","start-with-the-linter"],["Version status","version-status"],["Obsolete: still compiles","obsolete-still-compiles"],["The model-update methods do nothing","the-model-update-methods-do-nothing"],["_event_client( ) → follow_up_action( )","event-client-follow-up-action"],["_bind_edit( ) → _bind( )","bind-edit-bind"],["custom_mapper / custom_filter on _bind( )","custom-mapper-custom-filter-on-bind"],["The view parameter of _bind( ) / _bind_edit( )","the-view-parameter-of-bind-bind-edit"],["cs_event-wizard_set_next_step","cs-event-wizard-set-next-step"],["The nav_container_to event family","the-nav-container-to-event-family"],["z2ui5_cl_xml_view → z2ui5_cl_ui5_view_builder","z2ui5-cl-xml-view-z2ui5-cl-ui5-view-builder"],["Built-in popups → popups add-on","built-in-popups-popups-add-on"],["Utility classes","utility-classes"],["Invisible custom controls","invisible-custom-controls"],["cs_config-title → cs_event-set_title","cs-config-title-cs-event-set-title"],["z2ui5_if_exit → z2ui5_if_ui5_exit","z2ui5-if-exit-z2ui5-if-ui5-exit"],["z2ui5_if_types → the object that uses the type","z2ui5-if-types-the-object-that-uses-the-type"],["The URL API is hash_ and app_state_ now","the-url-api-is-hash-and-app-state-now"],["z2ui5.Util → z2ui5.Formatter","z2ui5-util-z2ui5-formatter"]],"terms":"deprecations things abap2ui5 successor every entry says write instead old new code next tip deprecated ui5 controls page api sap itself sap.ui.commons legacy charts belize themes deprecate listed anywhere here framework passes xml through unchanged still renders linter advanced reports against release system runs ui5.sap.com https always current list start found part fixed without reading further github.com checks app classes rewrites mechanical corrections place npx src fix correct report rest dry run show change nothing finding covers obsolete binder bind_edit bind except call carrying custom_mapper_back custom_filter_back reported model update five model_update methods deletes frontend event event_client follow_up_action unconverted abap boolean written view moves onto non released anything outside package cannot decide leaves alone safe repeat version status 1.144.0 entries marked already main yet matter pull tell coming view_model_update four variants delete 1.143.0 1.142.0 custom_mapper custom_filter omit_initial omit_initial_paths json shape omit parameter z2ui5_if_app check_sticky check_initialized set_session_stateful check_on_init removed set_nav_back set_nav_routing cs_event nav_to_route nav_app_call history_back nav_app_leave raw expression client get viewname read formatter.round2dp siblings compute z2ui5_cl_util_api z2ui5_cl_pop_bal z2ui5_cl_util z2ui5_cl_util_ext wizard_set_next_step control_by_id calls z2ui5_cl_xml_view z2ui5_cl_ui5_view_builder built popups add addons z2ui5.util z2ui5.formatter cs_config title set_title z2ui5_if_types type object uses z2ui5_if_exit z2ui5_if_ui5_exit set_push_state hash_set set_app_state_active app_state_set_active hash_routing clipboard_app_state app_state_get_href clipboard_copy compiles nest_view_model_update nest2_view_model_update popup_model_update popover_model_update empty pushed automatically now compares state taken incoming deltas were applied returned differ sends open slot handler longer render stale forgetting method case button_post ms_data posted endcase endmethod where happens removes warning genuinely changed gone these ability force back had legitimate use resetting control wrote bound property sending rebuild view_display position returning whose result consumed attribute form takes branch get_event_client emits identical roundtrip free wire byte press val popup_close arguments stay untouched pure rename why earlier releases split binding display writable left alias behaviour value name accepted source keeps compiling evaluated doing drop together rewriting because removing argument see data cookbook full picture hand reference bundled ajson library mirrored copy external project contract owns implementing z2ui5_if_ajson_mapping filter binds whatever mirror looks like today everything reached declarative counterpart drops initial fields lcl_skip_initial abap_true scoped need abap_false must reach numeric enum columns leave booleans price receive rather string splices node else better shaped parameters keep working inert passed internally effect dates time cs_view popup bundles controller makes wizard discardprogress ostep ostep.setnextstep onext pair control_methods whitelist flow ordinary additionally gotostep step express t_arg step2 step1 setnextstep constant nav_container_to family nest nest2 popover work backend maps address container directly page2 navcon z2ui5 sits group function registered global passing straight indirection myfunction works dispatched note forms ship javascript browser event_navigation using either generic builder replaces typed wrapper per builds dead end factory hello button text ele mvc xmlns sap.m sap.ui.core.mvc tag stringify chain adds child descends stays sets element follows ascends rule carries whole applies pointing give attributes first rewritten ships documentation throughout z2ui5_cl_xml_view_cc frozen never touched means properties migrate editing anyway sake older above needs was called z2ui5_cl_ai_xml while class tried apps z2ui5_cl_pop_table z2ui5_cl_pop_to_confirm z2ui5_cl_pop_messages z2ui5_cl_pop_get_range moved separate versioned riding along installed separately abapgit z2ui5_cl_popup_to_confirm gains letters under z2ui5_cl_popup ins z2ui5_cl_pop shipped existing ons resources utility z2ui5_cl_util_db z2ui5_cl_util_http z2ui5_cl_util_log z2ui5_cl_util_msg z2ui5_cl_util_range z2ui5_cl_util_xml z2ui5_cx_util_error table z2ui5_t_91 inside replaced internal context public replacement treat stable closed something away examples standard cl_web_http_utility base64 cl_http_utility if_http_utility encode_x_base64 failing raises exception being wrapped reader z2ui5_cl_ui5_json invisible custom versions needed helper common interaction timer start_timer browser_interaction focus set_focus scrolling scroll_to scroll_into_view lptitle set_title_launchpad favicon set_favicon softkeyboard keyboard_set_mode soft keyboard soft_keyboard info s_device s_ui5 s_focus s_scroll device device_capabilities history url handling url_handling pattern carried cc_plain_xml invoice views rendering used set user exit tab mechanisms could disagree point life implementation set_config_http_get whenever should field assigns simply generated shows boots speak fiori launchpad shell interface naming engine segment three types zcl_a2ui5_user_exit definition section interfaces endclass searches exactly once references ones copies config structure deleted transition period move over touch brings site wait shared holding around signature reason exists declared ty_s_get z2ui5_if_client return ty_s_event_control s_ctrl ty_s_name_value ty_t_name_value cs_device ty_s_http_context ty_s_http_config ty_s_http_config_post names take ty_s_draft z2ui5_cl_ui5_srv_draft ty_s_config out s_config ls_get reshaped variable way fits signatures deadline hash app_state badge touches nav meaning real navigation between fragment named core routing hashchanger sethash push described history.pushstate backed prefix sorts routed composes link mail spellings compile share behavior detail composed put clipboard hands lets input recipient lands home fire forget existed share_link renamed hash_replace hash_back hash_attach_changed semantics router module util backward compatible exports date helpers formatter gain path mv_date z2ui5.util.datecreateobject formatter.datecreateobject","url":"https://abap2ui5.github.io/docs/resources/deprecations.html"},{"area":"docs","group":"Resources","title":"License","text":"Technically, abap2UI5 apps are standard UI5 freestyle applications.","headings":[["MIT","mit"]],"terms":"license technically abap2ui5 apps standard ui5 freestyle applications way organization itself mit licensed free commercial use copyright permission hereby granted charge person obtaining copy software associated documentation files deal without restriction including limitation rights modify merge publish distribute sublicense sell copies permit persons whom furnished subject following conditions above notice shall included substantial portions provided warranty kind express implied limited warranties merchantability fitness particular purpose noninfringement event authors holders liable claim damages liability whether action contract tort otherwise arising out connection dealings","url":"https://abap2ui5.github.io/docs/resources/license.html"},{"area":"docs","group":"Resources","title":"Support","text":"The community offers support for abap2UI5 on a best-effort basis.","headings":[["Community Support","community-support"],["Commercial Support","commercial-support"]],"terms":"support community offers abap2ui5 best effort basis hit bug unexpected behavior please open issue https github.com issues code snippet reproduces helps lot lets others quickly test locate problem join channel slack communityinviter.com apps abapgit abap ask questions share insights get help developers tip need specific feature isn yet good way discuss possible extensions project commercial free mit licensed nothing buy itself companies freelancers offer paid services around implementation app development training agreements see uses resources who_uses active ecosystem offering add company page reach out contact abap2ui5.org listed","url":"https://abap2ui5.github.io/docs/resources/support.html"},{"area":"docs","group":"Resources","title":"Contact","text":"abap2UI5 is an open-source project that values open, transparent communication.","headings":[],"terms":"contact abap2ui5 open source project values transparent communication use public channels others join conversation benefit get touch via these platforms repository issue github https github.com issues slack channel abapgit communityinviter.com apps abap social media share thoughts linkedin www.linkedin.com company private inquiries email abap2ui5.org since spare time replies might take","url":"https://abap2ui5.github.io/docs/resources/contact.html"},{"area":"docs","group":"Resources","title":"Contribution","text":"abap2UI5 is an open-source project built by the ABAP community, often in free time or alongside other projects.","headings":[["How You Can Contribute","how-you-can-contribute"],["Turn Answers into Documentation","turn-answers-into-documentation"],["Need Help?","need-help"]],"terms":"contribution abap2ui5 open source project built abap community often free time alongside projects kinds contributions welcome contribute several ways get involved help extend view builder example add missing property existing control new ui5 framework everyone use build custom specific scenario share demos apps showcase possible improve documentation polish code snippets make easier learn propose something every appreciated matter size turn answers cheapest already half made question comes slack issue second answer wants become permanent entry common failures cookbook troubleshooting common_failures starts error message paragraph page should answered script decide check makes mistake impossible merge whole works internally defect found hand becomes rule reference gate nobody discover twice distilled helps future reader where thread need hit issues questions https github.com","url":"https://abap2ui5.github.io/docs/resources/contribution.html"},{"area":"docs","group":"Resources","title":"Sponsor","text":"abap2UI5 is a community-driven project built by developers who spend their free time to create, maintain, and improve it.","headings":[["Support the Contributors","support-the-contributors"],["abapGit — The Foundation of ABAP Open Source","abapgit-the-foundation-of-abap-open-source"],["Tools That Make It Possible","tools-that-make-it-possible"]],"terms":"sponsor abap2ui5 community driven project built developers spend free time create maintain improve sponsorship supports efforts fuels ongoing growth support contributors thrives contributions dedicated every contributor makes unique difference please consider sponsoring help keep work going see full list https github.com graphs github abapgit foundation abap open source wouldn exist without backbone development supportive people behind find useful benefit browse abapgit.org sponsor.html tools make possible projects extend maintainers static code analysis abaplint abaplint.org unit testing core json handling ajson sbcgua runtime serialization rtti sandraros sandrarossi cloud standard compatibility steampunkification heliconialabs syntax downporting via downport repositories downports larshp namespace renaming browser playwright playwright.dev web live demos build abap2ui5.github.io cleanup cleaner sap documentation vitepress vitepress.dev vuejs keeps broader thriving","url":"https://abap2ui5.github.io/docs/resources/sponsor.html"},{"area":"docs","group":"Resources","title":"Logo & Brand","text":"Everything the project signs — the documentation, the repositories, a talk slide, a link shared on LinkedIn — uses the same red mark, and the same three animals turn up around it. This page is the collection: every as...","headings":[["The Mark","the-mark"],["The Mark on White","the-mark-on-white"],["Favicon","favicon"],["Link Preview","link-preview"],["Code Cover","code-cover"],["Mascots","mascots"],["Sloth","sloth"],["Dinosaur","dinosaur"],["Sheep","sheep"],["Colours","colours"],["Using the Mark","using-the-mark"]],"terms":"logo brand everything project signs documentation repositories talk slide link shared linkedin uses red mark three animals turn around page collection every asset puts name colours behind may done files originals download links prefer over screenshot copy pasted out deck uploaded somewhere else those drift colour lose transparency abap2ui5 wordmark set lines tilted knocked circle primary where image fits white logo.png width file size png transparent background used nav bar home hero site sits whatever dark surface letters stay readable because rather printed baked places cannot handle older presentation tool print shop chat client flattens onto black logo_white_back.png opaque anyway use wrong shows edges day turns grey favicon tab ico browser app sets icon running set_favicon frontend event see title cookbook browser_interaction favicon.ico href docs code head vitepress config.mjs preview slack whatsapp show line claim ratio platforms render large card thumbnail image.png carries shares description under per transformpagedata fills names points picture cover abap main method displays message box alone says little article header repository social displaying hello world code_cover.png mascots travel posts slides covers animal drawings marks stand next never place character between development team pick given comes way artwork was drawn arrived c12e2b a62219 jpeg noise roughly f5011d reds almost quite copies move d03c4a flat fill drawing lands exactly mascot ink moved proportion much pixel shading highlights become darker lighter shades outlines sloth cream fur untouched cut along sheep wool found flooding border path edge reaches inside stays monitor keyboard soft these carry dropped kept half otherwise halo expert happy length works laziness pointed work question build thing long goes looking shorter fair framework like computer sloth_brand.png sloth_brand_white_back.png sloth.jpg compression artefacts outline above pngs add none dinosaur old hand thirty years memory new things were going change unimpressed always dinosaur_brand.png dinosaur_brand_white_back.png dinosaur.png enthusiast tries week appears follows tutorial end could tell afterwards sheep_brand.png sheep_brand_white_back.png sheep.png screen keys part value second shade hover pressed state anywhere interface different purpose sites publishes playground https abap2ui5.github.io sample catalogue samples share palette accent sap blue platform apps run button clears body text themes ground top neither mistake hex span style display inline block 1.15em height vertical align 0.2em radius 3px 1px solid var divider ffffff 0a6ed1 buttons 4aa3ff cursor still gains underline keeps rule tokens theme style.css takes seven values stylesheet take table picking dropper scaled hands interpolated nowhere using mit licensed resources license rest rules below therefore request licence term recognisable refer blog post integration badge readme permission needed redraw recolour retyped another font scale stretch close square dimension let follow leave room diameter clear space side free logos imply endorsement product reads ships say built instead accurate needs sit illustrate identifies anything answer resolution variant exist here something list write contact abap2ui5.org","url":"https://abap2ui5.github.io/docs/resources/logo.html"},{"area":"samples","group":"Samples","title":"Basics I — Hello World, the Smallest App","text":"The smallest app that runs: one class, one view_display( ), a Page with a title - the shape every other sample starts from.","code":"z2ui5_cl_smp_app_493","terms":"hello world smallest first app minimal start here template basics","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smp_app_493/"},{"area":"samples","group":"Samples","title":"Basics II — Data Binding: Input and Button","text":"Binds a class attribute to an Input with _bind( ), so what the user types is in the ABAP variable on the next roundtrip - a Text shows it back and a MessageBox confirms the roundtrip.","code":"z2ui5_cl_smp_app_494","terms":"binding _bind model attribute value input button roundtrip messagebox serialize basics","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smp_app_494/"},{"area":"samples","group":"Samples","title":"Basics III — Lifecycle: Init, Event, Navigated","text":"The three questions main( ) asks - init, event, navigated - as one dispatcher, showing what survives a roundtrip and what a navigation does to it.","code":"z2ui5_cl_smp_app_495","terms":"lifecycle roundtrip main dispatcher state serialize check_on_init check_on_event check_on_navigated basics","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smp_app_495/"},{"area":"samples","group":"Samples","title":"Basics IV — Events, Views and Roundtrips","text":"What one event does to a running app: a second view replaces the first, the state comes back with it, and an uncaught error surfaces where you can see it.","code":"z2ui5_cl_smp_app_004","terms":"roundtrip restart second view uncaught error controller basics","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smp_app_004/"},{"area":"samples","group":"Samples","title":"Basics V — The Developer Tools (Ctrl+F12)","text":"What Ctrl+F12 opens: the request and response payload, the generated XML view, the model, the source and the error log - the first place to look when something does not render.","code":"z2ui5_cl_smp_app_496","terms":"developer tools devtools ctrl f12 debug inspect payload previous request response view xml model source code log error adt export basics","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smp_app_496/"},{"area":"samples","group":"Samples","title":"Basics VI — Unit Tests for the App Logic","text":"The app logic in a method of its own - no client, no attributes - so the local test class beside the class can assert it with ABAP Unit.","code":"z2ui5_cl_smp_app_503","terms":"unit test abapunit testclasses assert testable logic method basics","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smp_app_503/"},{"area":"samples","group":"Samples","title":"Binding — A View Built From RTTI, No Field Named","text":"The view names no field: RTTI reads the components of the internal table and derives every column and every cell binding from them, so changing the structure changes the screen with no view code touched.","code":"z2ui5_cl_smp_app_497","terms":"rtti generic view runtime columns get_components describe_by_data no field name itab structure column cell binding","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smp_app_497/"},{"area":"samples","group":"Samples","title":"Binding — Currency Amounts (sap.ui.model.type.Currency)","text":"Formats amounts with sap.ui.model.type.Currency, so decimals and leading zeros follow the currency rather than the ABAP field.","code":"z2ui5_cl_smp_app_067","terms":"amount decimals leading zeros number format binding","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smp_app_067/"},{"area":"samples","group":"Samples","title":"Binding — Dynamic Table Typed at Runtime (RTTI)","text":"The row type is created at runtime from a DDIC name with CREATE DATA, and the generic data reference is bound straight into the view - editable, multi-selectable, and it survives the roundtrip back to ABAP.","code":"z2ui5_cl_smp_app_061","terms":"generic data reference create ddic dynamic itab binding","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smp_app_061/"},{"area":"samples","group":"Samples","title":"Binding — Expression Binding, Types and Composite Parts","text":"Expression binding in the view - conditions, composite parts and a regular expression decide visible and enabled without asking the backend.","code":"z2ui5_cl_smp_app_027","terms":"formatter parts conditional regexp visible enabled syntax binding","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smp_app_027/"},{"area":"samples","group":"Samples","title":"Binding — Model setSizeLimit for Large Tables (A)","text":"A JSON model shows only the first 100 entries until setSizeLimit is raised, which is why a ComboBox over a large table quietly stops at a hundred rows.","code":"z2ui5_cl_smp_app_071","terms":"combobox jsonmodel size limit large itab 100 entries binding","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smp_app_071/"},{"area":"samples","group":"Samples","title":"Binding — Single Table Cell (tab_index)","text":"Edits one cell of an internal table: tab_index addresses the row, so the Input writes back to a single field instead of the whole line.","code":"z2ui5_cl_smp_app_144","terms":"cell input internal table row field level binding","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smp_app_144/"},{"area":"samples","group":"Samples","title":"Binding — Structure Fields and INCLUDEs","text":"Binds a form to a structure with INCLUDEs, so the included components are reachable under their own names on one flat level.","code":"z2ui5_cl_smp_app_166","terms":"structure component include flat form level binding","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smp_app_166/"},{"area":"samples","group":"Samples","title":"Binding — Types for Integer, Decimal, Date and Time","text":"Binding types for integer, decimal, date and time - the conversion between the ABAP field and what the control shows, with a sum over the bound table.","code":"z2ui5_cl_smp_app_047","terms":"type conversion sum amount number field binding","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smp_app_047/"},{"area":"samples","group":"Samples","title":"Browser — Copy to Clipboard (A)","text":"Copies text into the browser clipboard from the backend: a follow-up action carries the string, a toast confirms what landed there.","code":"z2ui5_cl_smp_app_325","terms":"clipboard paste copy text area browser","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smp_app_325/"},{"area":"samples","group":"Samples","title":"Browser — Local and Session Storage (A,C)","text":"Writes to the browser's local and session storage and reads it back, so a value survives a reload without any state in the backend.","code":"z2ui5_cl_smp_app_327","terms":"localstorage sessionstorage persist store_data offline browser","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smp_app_327/"},{"area":"samples","group":"Samples","title":"Browser — Logout from the Client (A)","text":"Ends the session from the client - the logoff an ICF session or a Fiori launchpad needs, triggered as a follow-up action.","code":"z2ui5_cl_smp_app_361","terms":"logoff signout icf session end fiori launchpad browser","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smp_app_361/"},{"area":"samples","group":"Samples","title":"Browser — Open a URL in a New Tab (A)","text":"Opens a URL in a new browser tab from an event, leaving the running app where it is.","code":"z2ui5_cl_smp_app_073","terms":"url window open_new_tab link target browser","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smp_app_073/"},{"area":"samples","group":"Samples","title":"Browser — Open Mail, Phone and SMS Links (A)","text":"Opens mailto:, tel: and sms: links through URLHelper, so the device answers with its own mail or phone app instead of the browser.","code":"z2ui5_cl_smp_app_316","terms":"mailto tel sms urlhelper redirect native link browser","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smp_app_316/"},{"area":"samples","group":"Samples","title":"Browser — Reload the Page (A)","text":"Navigates the browser to a same-domain URL with the location_reload front-end action, with a scratch input beside it to show what the reload takes with it.","code":"z2ui5_cl_smp_app_492","terms":"reload refresh restart location_reload url browser","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smp_app_492/"},{"area":"samples","group":"Samples","title":"Browser — Set the Tab Favicon (A)","text":"Sets the browser tab's favicon at runtime, from an image the backend hands over as a data URI.","code":"z2ui5_cl_smp_app_491","terms":"favicon icon tab image data uri browser","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smp_app_491/"},{"area":"samples","group":"Samples","title":"Browser — Set the Tab Title (A)","text":"Sets the browser tab title from the app, so a bookmarked or duplicated window says which app it holds.","code":"z2ui5_cl_smp_app_125","terms":"document.title tab caption headline set_title browser","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smp_app_125/"},{"area":"samples","group":"Samples","title":"Browser — Soft Keyboard Mode on Mobile (A)","text":"Asks a mobile device for the numeric keypad instead of the full keyboard (keyboard_set_mode) on an Input.","code":"z2ui5_cl_smp_app_352","terms":"mobile numeric keypad keyboard_set_mode phone input browser","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smp_app_352/"},{"area":"samples","group":"Samples","title":"Control Behaviour — Expand a Panel by ID (setExpanded) (A)","text":"Expands a Panel by calling setExpanded on it by ID - a whitelisted control call, no roundtrip and no model behind it.","code":"z2ui5_cl_smp_app_448","terms":"panel collapse expand setexpanded control_by_id whitelisted control behaviour","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smp_app_448/"},{"area":"samples","group":"Samples","title":"Control Behaviour — MultiInput with Tokens (C)","text":"A MultiInput with tokens and suggestions bound to an internal table - the value help for a field that holds many values at once.","code":"z2ui5_cl_smp_app_078","terms":"multiinput token tokens suggestion custom control behaviour","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smp_app_078/"},{"area":"samples","group":"Samples","title":"Control Behaviour — Open the PDF Viewer by ID (A)","text":"Opens the PDF viewer by calling it by ID, so a document can be shown from an event without rebuilding the view.","code":"z2ui5_cl_smp_app_449","terms":"pdfviewer pdf document viewer popup control_by_id whitelisted control behaviour","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smp_app_449/"},{"area":"samples","group":"Samples","title":"Control Behaviour — Switch NavContainer Page by ID (A)","text":"Switches the page of a NavContainer and the tab of an IconTabBar by ID, so navigation inside a view costs no roundtrip.","code":"z2ui5_cl_smp_app_088","terms":"navcontainer icontabbar icontabheader page switch control_by_id whitelisted control behaviour","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smp_app_088/"},{"area":"samples","group":"Samples","title":"Control Behaviour — Wizard with Steps (A)","text":"Drives a Wizard from the backend: setting the next step and discarding progress by ID, which is how a branching wizard is steered.","code":"z2ui5_cl_smp_app_202","terms":"wizard step branching discardprogress setnextstep control_by_id control behaviour","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smp_app_202/"},{"area":"samples","group":"Samples","title":"CSS — Color Table Cells from the Backend","text":"Colours single table cells from the backend: the row carries its colour as custom data and a stylesheet turns it into a background.","code":"z2ui5_cl_smp_app_305","terms":"color background conditional formatting style data attribute css","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smp_app_305/"},{"area":"samples","group":"Samples","title":"CSS — FlexBox Layouts with Custom Classes","text":"Lays a page out with FlexBox and custom CSS classes - tiles, panels and a QuickView popover, all from the view chain.","code":"z2ui5_cl_smp_app_255","terms":"flexbox layout responsive navigation tile panel css","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smp_app_255/"},{"area":"samples","group":"Samples","title":"CSS — Ship Your Own CSS with the View","text":"Ships a stylesheet with the view, so an app can carry its own design without a change to the UI5 theme.","code":"z2ui5_cl_smp_app_050","terms":"style stylesheet inline html class own design css","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smp_app_050/"},{"area":"samples","group":"Samples","title":"Device — Camera, Take Photos (C)","text":"Takes a photo with the device camera, front or back, and hands the picture to the backend.","code":"z2ui5_cl_smp_app_306","terms":"camera photo picture webcam capture facing mode device","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smp_app_306/"},{"area":"samples","group":"Samples","title":"Device — Device Model: Phone, Tablet, Desktop (A)","text":"Reads the sap.ui.Device model - phone, tablet or desktop, orientation and resize - so a view can react to the device it is on.","code":"z2ui5_cl_smp_app_445","terms":"sap.ui.device responsive orientation resize media model device","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smp_app_445/"},{"area":"samples","group":"Samples","title":"Device — Frontend Info: UI5 Version, Theme, OS, Browser","text":"Asks the frontend what it is: UI5 version, theme, operating system, browser and user agent, in one call.","code":"z2ui5_cl_smp_app_122","terms":"client info ui5 version theme os user agent device","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smp_app_122/"},{"area":"samples","group":"Samples","title":"Device — Geolocation from the Browser (C)","text":"Asks the browser for the device's position - latitude, longitude and altitude - and what happens when the user says no.","code":"z2ui5_cl_smp_app_120","terms":"gps position latitude longitude altitude location device","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smp_app_120/"},{"area":"samples","group":"Samples","title":"Event — Control Objects in t_arg (FacetFilter)","text":"Passes whole control objects to the backend in t_arg: a FacetFilter's selected items arrive as data instead of being reconstructed by hand.","code":"z2ui5_cl_smp_app_197","terms":"facetfilter filter object marshalling selected items event","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smp_app_197/"},{"area":"samples","group":"Samples","title":"Event — Extra Arguments with t_arg","text":"Sends extra arguments with an event (t_arg), so a handler knows which row, which value or which fixed payload it was called for.","code":"z2ui5_cl_smp_app_167","terms":"argument parameter payload event data fixed value","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smp_app_167/"},{"area":"samples","group":"Samples","title":"Event — Keyboard Shortcuts, Ctrl+S (A)","text":"Binds keyboard shortcuts such as Ctrl+S to backend events, so the app answers a key combination the way a desktop program would.","code":"z2ui5_cl_smp_app_471","terms":"shortcut hotkey ctrl key combination keyboard_shortcut event","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smp_app_471/"},{"area":"samples","group":"Samples","title":"Event — Link with preventDefault (A)","text":"A Link whose default browser action is suppressed (check_prevent_default), so the app handles the click instead of the href.","code":"z2ui5_cl_smp_app_472","terms":"link href default action check_prevent_default event","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smp_app_472/"},{"area":"samples","group":"Samples","title":"File — Download to the Browser (A)","text":"Sends a file to the browser as a download - an xstring encoded as base64, handed over as an attachment.","code":"z2ui5_cl_smp_app_186","terms":"export save base64 attachment xstring document file","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smp_app_186/"},{"area":"samples","group":"Samples","title":"File — Upload to the Backend (C)","text":"Takes a file from the FileUploader into the backend as base64 - a picture or a document, arriving as an xstring.","code":"z2ui5_cl_smp_app_074","terms":"fileuploader base64 attachment import picture document file","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smp_app_074/"},{"area":"samples","group":"Samples","title":"Focus — Focus a Table Cell by Column and Row (A)","text":"Puts the cursor in one table cell, addressed by column and row of the aggregation, which is how a validation jumps to the field it is about.","code":"z2ui5_cl_smp_app_421","terms":"table cell column row aggregation set_focus focus","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smp_app_421/"},{"area":"samples","group":"Samples","title":"Focus — Jump to the Next Input on Enter (A)","text":"Moves the cursor to the next Input when Enter is pressed - the fast entry a form needs.","code":"z2ui5_cl_smp_app_189","terms":"cursor enter tab next field form set_focus focus","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smp_app_189/"},{"area":"samples","group":"Samples","title":"Focus — Set Focus and Select Text in an Input (A)","text":"Sets the focus into an Input and selects its text, so the next keystroke overwrites rather than appends.","code":"z2ui5_cl_smp_app_133","terms":"cursor set_focus selection position textfield focus","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smp_app_133/"},{"area":"samples","group":"Samples","title":"Formatter — ABAP Date and Time Strings (DATS/TIMS)","text":"ABAP DATS and TIMS strings in the view: the conversion in both directions, including what an initial 00000000 has to become.","code":"z2ui5_cl_smp_app_450","terms":"dats tims conversion initial date 00000000 sy datum formatter","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smp_app_450/"},{"area":"samples","group":"Samples","title":"Formatter — Date Object for the DatePicker","text":"The DatePicker's dateValue wants a JavaScript date object rather than a string - what that means for the binding of an ABAP date.","code":"z2ui5_cl_smp_app_457","terms":"datepicker datevalue javascript date object iso formatter","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smp_app_457/"},{"area":"samples","group":"Samples","title":"Formatter — Date Objects for the PlanningCalendar","text":"Appointments in a PlanningCalendar: start and end as date objects, which is what the control binds against.","code":"z2ui5_cl_smp_app_456","terms":"planningcalendar appointment javascript date object iso formatter","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smp_app_456/"},{"area":"samples","group":"Samples","title":"Formatter — Inline Icons in a Text","text":"Puts icons inside a text through placeholders that UI5 expands, so a status line can carry a glyph without its own control.","code":"z2ui5_cl_smp_app_466","terms":"icon glyph placeholder text status expandinlineicons formatter","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smp_app_466/"},{"area":"samples","group":"Samples","title":"Formatter — When Not to Use One: Compute in ABAP","text":"The counter-example: no formatter at all. The value is computed in ABAP and bound ready-made, which keeps the frontend thin and the logic testable.","code":"z2ui5_cl_smp_app_453","terms":"no formatter computed backend thin frontend prepare","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smp_app_453/"},{"area":"samples","group":"Samples","title":"Grid Table — Events on Cell Level","text":"Events on cell level in a grid table: which row and which column the user was in, and what arrives in the backend.","code":"z2ui5_cl_smp_app_160","terms":"cell enter row index event grid alv table","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smp_app_160/"},{"area":"samples","group":"Samples","title":"Grid Table — Full Example with sap.ui.table","text":"The full sap.ui.table example: a DynamicPage with search, sort, filter, currency columns and row actions - the closest thing here to a finished ALV.","code":"z2ui5_cl_smp_app_070","terms":"grid alv dynamicpage column row action currency search sort filter table","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smp_app_070/"},{"area":"samples","group":"Samples","title":"Grid Table — Keep Column Filters on Refresh (C)","text":"Keeps the active sap.ui.table column filters across a view model update, through the abap2UI5 uitableext custom control - without it they are reset.","code":"z2ui5_cl_smp_app_143","terms":"column filter reset refresh uitableext grid alv table","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smp_app_143/"},{"area":"samples","group":"Samples","title":"Hash — App State, Bookmark and Share","text":"The Fiori app-state pattern: the URL carries the state id, so a bookmark, a reload or a shared link restores the entered data.","code":"z2ui5_cl_smp_app_498","terms":"app state url bookmark share clipboard copy link restore deep reload app_state_set_active app_state_get_href sap iapp xapp hash","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smp_app_498/"},{"area":"samples","group":"Samples","title":"Hash — App-Owned Routing (#/detail)","text":"The whole hash_* family in one app: hash_set pushes #/detail, hash_replace rewrites it in place, hash_back steps back like a router, a deep link restores.","code":"z2ui5_cl_smp_app_499","terms":"routing hash url page browser back forward history deep link reload hash_set hash_replace hash_back hash_attach_changed navcontainer router onnavback","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smp_app_499/"},{"area":"samples","group":"Samples","title":"Hash — Routing mode fresh","text":"Hash routing in mode FRESH: the URL names the CLASS, so Back and a bookmark restart the app as a new instance.","code":"z2ui5_cl_smp_app_468","terms":"routing mode fresh navigation restart new instance nav_app_call hash","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smp_app_468/"},{"area":"samples","group":"Samples","title":"Hash — Routing mode keep","text":"Hash routing in mode KEEP: the URL carries the app-state draft as well, so Back and Forward return to the state, not just to the app.","code":"z2ui5_cl_smp_app_480","terms":"routing mode keep navigation state preserved back nav_app_call hash","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smp_app_480/"},{"area":"samples","group":"Samples","title":"List — Filter and Sort the Binding from ABAP (A)","text":"Sorts and filters a bound list from ABAP by calling getBinding on the control - the binding does the work, not a rebuilt table.","code":"z2ui5_cl_smp_app_454","terms":"binding_call getbinding sorter filter follow_up_action list","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smp_app_454/"},{"area":"samples","group":"Samples","title":"List — Live Filter on the Client, No Roundtrip (A)","text":"Filters a list live on the client as the user types - no roundtrip, no backend, the same binding_call from the view chain.","code":"z2ui5_cl_smp_app_455","terms":"binding_call live search client side no roundtrip filter list","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smp_app_455/"},{"area":"samples","group":"Samples","title":"List — StandardListItem, Highlight and Events","text":"A sap.m.List of StandardListItems: highlight, info state, press events and what a selection sends back.","code":"z2ui5_cl_smp_app_048","terms":"sap.m.list standardlistitem highlight infostate press selection list","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smp_app_048/"},{"area":"samples","group":"Samples","title":"Menu — Full Path of the Selected Item (A)","text":"A nested Menu that reports the FULL path of the item that was chosen, not just its text.","code":"z2ui5_cl_smp_app_473","terms":"menuitem nested submenu textpath controller path menu","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smp_app_473/"},{"area":"samples","group":"Samples","title":"Menu — Menu Button with core:require","text":"A MenuButton whose items call a UI5 module loaded with core:require, so the click is answered in the frontend.","code":"z2ui5_cl_smp_app_163","terms":"menubutton menuitem popover messagetoast require module menu","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smp_app_163/"},{"area":"samples","group":"Samples","title":"Message — Message Model and MessageManager (C)","text":"The UI5 message model: validation messages carry the field they belong to, so the control shows the state and one list holds them all.","code":"z2ui5_cl_smp_app_467","terms":"messagemanager validation target field state central model message","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smp_app_467/"},{"area":"samples","group":"Samples","title":"Message — MessageBox for Any Data","text":"Every shape message_box_display( ) accepts - a text, a number, HTML, messages, a table, a structure, an object - plus the options of the box itself.","code":"z2ui5_cl_smp_app_502","terms":"messagebox details table structure tree object reference escape limit action onclose message","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smp_app_502/"},{"area":"samples","group":"Samples","title":"Message — MessageBox from SY, BAPIRET2 or Exception","text":"Turns what ABAP already has into a MessageBox - a SY message, a BAPIRET2 table or a caught exception.","code":"z2ui5_cl_smp_app_008","terms":"t100 message class number exception cx_root error abend","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smp_app_008/"},{"area":"samples","group":"Samples","title":"Message — MessageBox, Types and Custom Actions","text":"Every MessageBox type - confirm, warning, error, success, information - and what a custom action button changes about the answer.","code":"z2ui5_cl_smp_app_382","terms":"confirm warning error success information dialog action message","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smp_app_382/"},{"area":"samples","group":"Samples","title":"Message — MessagePopover URL Policy (A)","text":"The URL policy of a MessagePopover: which links it will follow and which it refuses, and why the default is the strict one.","code":"z2ui5_cl_smp_app_474","terms":"url policy link security validator relative allow deny message","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smp_app_474/"},{"area":"samples","group":"Samples","title":"Message — MessageToast, Text and Duration","text":"A MessageToast and what can be said about it: text, duration, position and animation.","code":"z2ui5_cl_smp_app_381","terms":"toast notification duration position animation message","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smp_app_381/"},{"area":"samples","group":"Samples","title":"Message — MessageView and MessagePopover (A)","text":"MessageView and MessagePopover over a list of messages, grouped by type, with the detail page behind each entry.","code":"z2ui5_cl_smp_app_452","terms":"messagepopover messageitem dialog grouped message list","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smp_app_452/"},{"area":"samples","group":"Samples","title":"Navigation — Call and Leave Apps (nav_app_call)","text":"Calling another app and coming back: nav_app_call puts the caller on a stack, nav_app_leave returns to it.","code":"z2ui5_cl_smp_app_024","terms":"nav_app_call nav_app_leave sub app stack call back navigation","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smp_app_024/"},{"area":"samples","group":"Samples","title":"Navigation — Data Loss Protection on Leaving (A,C)","text":"Refuses to leave an app with unsaved changes: the confirmation popup in front of nav_app_leave, and how the dirty flag gets there.","code":"z2ui5_cl_smp_app_279","terms":"dirty unsaved changes leave confirmation warning navigation","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smp_app_279/"},{"area":"samples","group":"Samples","title":"Navigation — Return Data and Events to the Caller","text":"The way back carries data: the called app returns an event name and a payload (r_data) that the caller reads from get_app_prev.","code":"z2ui5_cl_smp_app_488","terms":"r_data result get_app_prev return event payload navigation","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smp_app_488/"},{"area":"samples","group":"Samples","title":"Navigation — Uncaught Error and Error Popup","text":"What an uncaught exception looks like from the user's side - the error popup, and the way back into the app.","code":"z2ui5_cl_smp_app_464","terms":"exception dump error handling debugtool restart retry navigation","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smp_app_464/"},{"area":"samples","group":"Samples","title":"Nested View — Basic Example (nest_view_display)","text":"A nested view: nest_view_display renders a second view inside the first, and shows which model refresh reaches it.","code":"z2ui5_cl_smp_app_065","terms":"nest_view_display rerender model refresh sub view nested","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smp_app_065/"},{"area":"samples","group":"Samples","title":"Nested View — Embed Another App's View","text":"Embeds ANOTHER app's view into this one - the class is instantiated over RTTI and renders inside the page it is given.","code":"z2ui5_cl_smp_app_104","terms":"sub app class embed instantiate another rtti nested view","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smp_app_104/"},{"area":"samples","group":"Samples","title":"Nested View — Master-Detail with FlexibleColumnLayout","text":"Master and detail in a FlexibleColumnLayout: a list on the left, its record on the right, each in its own nested view.","code":"z2ui5_cl_smp_app_097","terms":"fcl master detail list report two column split nested view","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smp_app_097/"},{"area":"samples","group":"Samples","title":"Nested View — Three Columns with FlexibleColumnLayout","text":"The FlexibleColumnLayout with three columns - list, detail and detail-of-detail - and the navigation that opens each one.","code":"z2ui5_cl_smp_app_098","terms":"fcl three column detail deep navigation nested view","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smp_app_098/"},{"area":"samples","group":"Samples","title":"Popover — Basic Example with Placement","text":"A Popover anchored to the control that opened it, with the placements to choose from and a confirm/cancel footer.","code":"z2ui5_cl_smp_app_026","terms":"placement anchor button confirm cancel popover_display popover","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smp_app_026/"},{"area":"samples","group":"Samples","title":"Popover — Open from a Table Row","text":"Opens a Popover from a table row - which row was pressed, and how its record reaches the popover.","code":"z2ui5_cl_smp_app_052","terms":"list report dynamicpage row link details table popover","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smp_app_052/"},{"area":"samples","group":"Samples","title":"Popover — Open Together with the View Build","text":"View and popover in ONE roundtrip: both displayed from the same main( ) call, with the popover anchored to a button built in that very response.","code":"z2ui5_cl_smp_app_490","terms":"initial render one roundtrip anchor button popover","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smp_app_490/"},{"area":"samples","group":"Samples","title":"Popover — QuickView Contact Card","text":"A QuickView contact card in a Popover: grouped fields, and links that call the phone or the mail app.","code":"z2ui5_cl_smp_app_109","terms":"quickview contact card links grouped fields popover","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smp_app_109/"},{"area":"samples","group":"Samples","title":"Popover — Select from a List","text":"A Popover holding a list to pick from - the anchored alternative to a full dialog.","code":"z2ui5_cl_smp_app_081","terms":"list selection placement anchor popover","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smp_app_081/"},{"area":"samples","group":"Samples","title":"Popover — Toggle by ID (toggleBy) (A)","text":"Opens and closes a Popover by ID (toggleBy), so the anchor decides and no roundtrip is needed.","code":"z2ui5_cl_smp_app_465","terms":"toggleby open close control_by_id whitelisted popover","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smp_app_465/"},{"area":"samples","group":"Samples","title":"Popup — Dialog inside a Dialog","text":"A dialog opened from inside a dialog, and what closing the inner one does to the stack.","code":"z2ui5_cl_smp_app_161","terms":"nested stack popup in second dialog","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smp_app_161/"},{"area":"samples","group":"Samples","title":"Popup — Element Binding to the Selected Row (A)","text":"Element binding on a popup: the dialog binds RELATIVELY to the row that was pressed, so its fields need no path of their own.","code":"z2ui5_cl_smp_app_470","terms":"element binding relative path aggregation dialog row popup","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smp_app_470/"},{"area":"samples","group":"Samples","title":"Popup — Navigate between Dialogs (NavContainer) (A)","text":"A NavContainer inside a dialog: several pages in one popup, with back and forward between them.","code":"z2ui5_cl_smp_app_170","terms":"navcontainer dialog pages back forward popup","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smp_app_170/"},{"area":"samples","group":"Samples","title":"Popup — Value Help: Suggestions and F4 Dialog","text":"The value help, both halves: suggestions while typing and the F4 dialog behind the field, over the same data.","code":"z2ui5_cl_smp_app_009","terms":"f4 search help suggestion input dialog select popup","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smp_app_009/"},{"area":"samples","group":"Samples","title":"Popup — Ways to Open a Dialog (A)","text":"The ways to open a dialog - from this app, from a sub app, rebuilt or destroyed - and what each one does to the view behind it.","code":"z2ui5_cl_smp_app_012","terms":"dialog sub app destroy rerender background view popup","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smp_app_012/"},{"area":"samples","group":"Samples","title":"Scroll — Scroll a Control into View (A)","text":"Scrolls a control into view by ID - what a validation does when the field it complains about is off screen.","code":"z2ui5_cl_smp_app_363","terms":"scroll_into_view control id validation jump scroll","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smp_app_363/"},{"area":"samples","group":"Samples","title":"Scroll — Scroll to a Pixel Position (A)","text":"Scrolls to a pixel position and back: reading the position before a refresh and restoring it afterwards.","code":"z2ui5_cl_smp_app_362","terms":"position pixel scroll_to restore refresh toolbar scroll","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smp_app_362/"},{"area":"samples","group":"Samples","title":"Table — Drag and Drop Rows (A)","text":"Drag and drop of table rows (DragDropInfo), and how the new order reaches the internal table.","code":"z2ui5_cl_smp_app_459","terms":"dnd dragdropinfo reorder rows move table","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smp_app_459/"},{"area":"samples","group":"Samples","title":"Table — Editable Cells, Add and Delete Rows","text":"An editable table: input cells, adding and deleting rows, multi-select and a toolbar over them.","code":"z2ui5_cl_smp_app_011","terms":"edit input add row delete multiselect toolbar table","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smp_app_011/"},{"area":"samples","group":"Samples","title":"Table — Filter Rows in the Backend","text":"Filters table rows in the BACKEND from a form above it, so the WHERE runs where the data is.","code":"z2ui5_cl_smp_app_045","terms":"filter server side form growing where table","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smp_app_045/"},{"area":"samples","group":"Samples","title":"Table — Large Table with Growing and ScrollContainer","text":"10.000 rows in one table: growing, a sticky toolbar and sorting - and what that costs on the way to the browser.","code":"z2ui5_cl_smp_app_006","terms":"growing 10000 rows sticky toolbar sort performance table","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smp_app_006/"},{"area":"samples","group":"Samples","title":"Table — Live Search with Parallel Requests","text":"Two SearchFields that round-trip on every keystroke on purpose - to show what that does: requests overtaking each other, the busy queue, the value lagging behind fast typing.","code":"z2ui5_cl_smp_app_059","terms":"live search parallel requests busy queue typing table","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smp_app_059/"},{"area":"samples","group":"Samples","title":"Table — Search in the Backend (SearchField)","text":"A SearchField that searches in the backend on Go or Enter, rather than filtering what was already sent.","code":"z2ui5_cl_smp_app_053","terms":"search go enter server side where table","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smp_app_053/"},{"area":"samples","group":"Samples","title":"Table — Selection Modes: Single and Multi Select","text":"The table selection modes - none, single and multi - side by side, and what each returns.","code":"z2ui5_cl_smp_app_019","terms":"selectionmode none single multi segmentedbutton checkbox table","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smp_app_019/"},{"area":"samples","group":"Samples","title":"Templating — Build Columns Dynamically (template:repeat)","text":"Builds the columns of a table at runtime with template:repeat, including the if/then/else the templating language brings.","code":"z2ui5_cl_smp_app_173","terms":"template repeat runtime generated columns if then else templating","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smp_app_173/"},{"area":"samples","group":"Samples","title":"Templating — Dynamic Content in a Nested View","text":"XML templating inside a nested view: the generated content is built where the sub view is rendered.","code":"z2ui5_cl_smp_app_176","terms":"template repeat runtime generated nested nest_view_display templating","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smp_app_176/"},{"area":"samples","group":"Samples","title":"Timer — Progress Indicator during a Backend Call (A)","text":"A ProgressIndicator during a long backend call, driven by follow-up actions rather than by a frozen screen.","code":"z2ui5_cl_smp_app_064","terms":"progressindicator busy wait long running backend timer","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smp_app_064/"},{"area":"samples","group":"Samples","title":"Timer — Refresh the View Every n Seconds (A)","text":"Refreshes the view every n seconds - the polling interval as a follow-up action the app renews itself.","code":"z2ui5_cl_smp_app_028","terms":"interval polling auto refresh follow_up_action seconds timer","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smp_app_028/"},{"area":"samples","group":"Samples","title":"Tree — Drag and Drop Nodes (A,C)","text":"Drag and drop of tree nodes: which node was moved where, and what that does to the hierarchy behind it.","code":"z2ui5_cl_smp_app_461","terms":"dnd move node hierarchy binding context tree","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smp_app_461/"},{"area":"samples","group":"Samples","title":"Tree — Editable Nodes with CustomTreeItem (C)","text":"Editable tree nodes with a CustomTreeItem, so a rename in the tree writes back into the ABAP hierarchy.","code":"z2ui5_cl_smp_app_463","terms":"customtreeitem rename input binding write back tree","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smp_app_463/"},{"area":"samples","group":"Samples","title":"Tree — Inside a Dialog (C)","text":"A tree inside a dialog, including which nodes stay expanded when the popup is opened again.","code":"z2ui5_cl_smp_app_462","terms":"popup expand state hierarchy nodes tree","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smp_app_462/"},{"area":"samples","group":"Samples","title":"Tree — Nested ABAP Table in a sap.m.Tree","text":"A nested ABAP table rendered as a sap.m.Tree - the hierarchy comes from the data, not from the view.","code":"z2ui5_cl_smp_app_460","terms":"hierarchy nodes nested json items tree","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smp_app_460/"},{"area":"samples","group":"Controls","title":"Action List Item","text":"Use the Action List Item to trigger an action directly from a list","code":"z2ui5_cl_smpc_app_001","terms":"actionlistitem action list item sap.m sap.m.actionlistitem src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_001/"},{"area":"samples","group":"Controls","title":"Page,Toolbar and Bar","text":"Each screen of a mobile application is typically represented by a 'Page' consisting of a header, a scrollable content area and optionally a footer. The standard header offers a navigation button and a title.","code":"z2ui5_cl_smpc_app_002","terms":"bar sap.m header sub footer bars button overflowtoolbar searchfield vbox text toolbarspacer sap.m.bar src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_002/"},{"area":"samples","group":"Controls","title":"Breadcrumbs sample","text":"Breadcrumbs is useful for displaying link hierarchy","code":"z2ui5_cl_smpc_app_003","terms":"breadcrumbs sap.m breadcrumb trail separator verticallayout link hbox label select item sap.m.breadcrumbs src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_003/"},{"area":"samples","group":"Controls","title":"Busy Dialog - Standard","text":"A Busy Dialog blocks the user interface until the currently running operation has been finished. No other activities can be started in parallel.","code":"z2ui5_cl_smpc_app_004","terms":"busydialog busy dialog sap.m indicate verticallayout button sap.m.busydialog src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_004/"},{"area":"samples","group":"Controls","title":"Button","text":"Buttons trigger user actions and come in a variety of shapes and colors. Placing a button on a page header or footer changes its appearance.","code":"z2ui5_cl_smpc_app_005","terms":"button sap.m buttons types icons press events toolbar toolbarspacer title hbox flexitemdata sap.m.button src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_005/"},{"area":"samples","group":"Controls","title":"Carousel with Controls","text":"With the Carousel a user can browse through multi-page content by swiping left or right.","code":"z2ui5_cl_smpc_app_006","terms":"carousel sap.m user browse through title verticallayout image text scrollcontainer list standardlistitem sap.m.carousel src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_006/"},{"area":"samples","group":"Controls","title":"Tri-State Check Box","text":"In this sample, the CheckBox reflects the selection states of its dependent input fields - selected, not selected, and partially selected.","code":"z2ui5_cl_smpc_app_007","terms":"checkbox check box sap.m reflects verticallayout text html sap.m.checkbox src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_007/"},{"area":"samples","group":"Controls","title":"Color Palette in a form","text":"The standalone ColorPalette in a container (sap.ui.layout.SimpleForm).","code":"z2ui5_cl_smpc_app_008","terms":"colorpalette color palette sap.m standalone contai simpleform toolbar title label sap.m.colorpalette src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_008/"},{"area":"samples","group":"Controls","title":"Table - Columns","text":"The table shares many features with the list and, in addition, introduces columns. The table is fully responsive and can hide columns or shown them in-place if the screen space is not sufficient.","code":"z2ui5_cl_smpc_app_009","terms":"column sap.m allows define specific properties table overflowtoolbar title toolbarspacer combobox item sap.m.column src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_009/"},{"area":"samples","group":"Controls","title":"Table Test with OPA","text":"The following example simulates a click on a list item in a table.","code":"z2ui5_cl_smpc_app_010","terms":"columnlistitem column list item sap.m opa test app product table toolbar title sap.m.columnlistitem src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_010/"},{"area":"samples","group":"Controls","title":"Combo box","text":"The combo box control provides a list box with items and a text field allowing the user to either type a value directly into the control or choose from the list of existing items.","code":"z2ui5_cl_smpc_app_011","terms":"combobox combo box sap.m provides list item sap.m.combobox src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_011/"},{"area":"samples","group":"Controls","title":"Comparison Pattern","text":"The pattern allows users to select multiple items from an sap.m.Table and display information about them in a structured way - all items are displayed next to each other for easy comparison, based on their specifics.","code":"z2ui5_cl_smpc_app_012","terms":"comparisonpattern comparison pattern sap.m compare items side app table toolbar title toolbarspacer sap.m.comparisonpattern src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_012/"},{"area":"samples","group":"Controls","title":"Cookie Settings Dialog Pattern","text":"The Cookie Settings Dialog allows you to easily manage the cookie settings according to the needs of the specific product.","code":"z2ui5_cl_smpc_app_013","terms":"cookiesettingsdialogpattern cookie settings dialog pattern sap.m verticallayout button vbox text gridlist gridbasiclayout sap.m.cookiesettingsdialogpattern src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_013/"},{"area":"samples","group":"Controls","title":"Custom List Item","text":"With the Custom List Item you can add any kind of content to lists.","code":"z2ui5_cl_smpc_app_014","terms":"customlistitem custom list item sap.m content hbox icon vbox link label dialog sap.m.customlistitem src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_014/"},{"area":"samples","group":"Controls","title":"Custom Tree Item","text":"With the Custom Tree Item you can add any kind of content to Tree.","code":"z2ui5_cl_smpc_app_015","terms":"customtreeitem custom tree item sap.m con flexbox button input flexitemdata sap.m.customtreeitem src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_015/"},{"area":"samples","group":"Controls","title":"Date Picker - Open by Another Control","text":"This example shows Date Picker which is opened by another control.","code":"z2ui5_cl_smpc_app_016","terms":"datepicker date picker sap.m open another title vbox label button link sap.m.datepicker src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_016/"},{"area":"samples","group":"Controls","title":"Date Range Selection","text":"The Date Range Selection is an extension of the Date Picker Control and enables the user to select range of dates.","code":"z2ui5_cl_smpc_app_017","terms":"daterangeselection date range selection sap.m single field input vbox label text sap.m.daterangeselection src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_017/"},{"area":"samples","group":"Controls","title":"Date Time Picker","text":"With the DateTimePicker a Date can be entered or selected including the time part.","code":"z2ui5_cl_smpc_app_018","terms":"datetimepicker date time picker sap.m enables users select bet panel label text sap.m.datetimepicker src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_018/"},{"area":"samples","group":"Controls","title":"Dialog with Confirm Options","text":"Creating a dialog with confirm and reject options that replaces the confirmDialog functionality.","code":"z2ui5_cl_smpc_app_019","terms":"dialog sap.m confirm reject submit order dialogs verticallayout button text label textarea sap.m.dialog src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_019/"},{"area":"samples","group":"Controls","title":"Display List Item","text":"Use the Display List Item for showing name/value pairs.","code":"z2ui5_cl_smpc_app_020","terms":"displaylistitem display list item sap.m represent label verticallayout sap.m.displaylistitem src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_020/"},{"area":"samples","group":"Controls","title":"Draft Indicator","text":"The Draft Indicator shows that eighter currently a draft is saving or that it is already saved. It does not block the current UI screen so other operations could be triggered in parallel.","code":"z2ui5_cl_smpc_app_021","terms":"draftindicator draft indicator sap.m sap.m.label verticallayout button sap.m.draftindicator src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_021/"},{"area":"samples","group":"Controls","title":"Facet Filter - Light","text":"This is a 'Light' version of the Facet Filter. It is for small displays where only a selectable summary bar is shown, and a dialog is shown for setting the facet values.","code":"z2ui5_cl_smpc_app_022","terms":"facetfilter facet filter sap.m light version vbox facetfilterlist facetfilteritem table overflowtoolbar title sap.m.facetfilter src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_022/"},{"area":"samples","group":"Controls","title":"Feed Content","text":"Shows the tile containing the text of the feed, a subheader, and a numeric value.","code":"z2ui5_cl_smpc_app_023","terms":"feedcontent feed content sap.m displays tile containing text sap.m.feedcontent src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_023/"},{"area":"samples","group":"Controls","title":"Feed","text":"This sample shows you how to build a complete feed user interface by combining a FeedInput with a list of FeedListItems.","code":"z2ui5_cl_smpc_app_024","terms":"feedinput feed input sap.m allows user list feedlistitem sap.m.feedinput src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_024/"},{"area":"samples","group":"Controls","title":"Feed List Item","text":"The Feed List Item provides a standard UI for 'feeds' where multiple users publish information on regular basis on a certain topic.","code":"z2ui5_cl_smpc_app_025","terms":"feedlistitem feed list item sap.m provides set verticallayout feedlistitemaction sap.m.feedlistitem src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_025/"},{"area":"samples","group":"Controls","title":"Flex Box - Nested","text":"Flex Boxes can be nested. Remember also that HBox and VBox are 'convenience' controls based on the Flex Box control.","code":"z2ui5_cl_smpc_app_026","terms":"flexbox flex box sap.m boxes nested. remember html hbox flexitemdata vbox sap.m.flexbox src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_026/"},{"area":"samples","group":"Controls","title":"Generic Tag with Different Configurations","text":"Previews of the GenericTag control based on combinations of different sets of properties.","code":"z2ui5_cl_smpc_app_027","terms":"generictag generic tag sap.m displays app speci verticallayout grid flexbox text objectnumber sap.m.generictag src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_027/"},{"area":"samples","group":"Controls","title":"KPI Tile","text":"Shows KPI Tile samples that can contain header, subheader, key value, trend, scale, unit, and a footer.","code":"z2ui5_cl_smpc_app_028","terms":"generictile generic tile sap.m shows kpi contain html tilecontent numericcontent imagecontent newscontent sap.m.generictile src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_028/"},{"area":"samples","group":"Controls","title":"Header Container - Horizontal Mode","text":"The Header Container with horizontal layout. It provides horizontal scrolling on mobile devices (tablet and phone). On a desktop, it provides scroll left and scroll right buttons.","code":"z2ui5_cl_smpc_app_029","terms":"headercontainer header container sap.m provides toolbar label select item feedcontent input numericcontent sap.m.headercontainer src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_029/"},{"area":"samples","group":"Controls","title":"Icon Tab Bar - Stretch Content Height","text":"In this example, the IconTabBar height is stretched to the maximum height of the page content. Note: The height of the parent container must be defined as a fixed value.","code":"z2ui5_cl_smpc_app_030","terms":"icontabbar icon tab bar sap.m height icontabfilter scrollcontainer list standardlistitem text sap.m.icontabbar src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_030/"},{"area":"samples","group":"Controls","title":"Image with ImageMode.Background","text":"Visualizes the state of the control when the mode property is set to ImageMode.Background.","code":"z2ui5_cl_smpc_app_031","terms":"image sap.m visualizes state html verticallayout grid vbox flexitemdata text hbox sap.m.image src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_031/"},{"area":"samples","group":"Controls","title":"Input - Value States","text":"This example shows different input value states.","code":"z2ui5_cl_smpc_app_032","terms":"input sap.m shows different value state vbox formattedtext link sap.m.input src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_032/"},{"area":"samples","group":"Controls","title":"Link - Emphasized","text":"Usually you use an Object Identifier in the first column of a table. But if you need an active identifier you should use an 'emphasized' link instead.","code":"z2ui5_cl_smpc_app_033","terms":"link sap.m usually object identifier fir table toolbar title column text columnlistitem sap.m.link src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_033/"},{"area":"samples","group":"Controls","title":"List - Counter Indication","text":"The counter of an item quickly shows how many detail entries are related, without having to navigate to the detail page.","code":"z2ui5_cl_smpc_app_034","terms":"list sap.m counter item quickly shows many standardlistitem sap.m.list src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_034/"},{"area":"samples","group":"Controls","title":"List - No Data Indication","text":"If the list is empty it indicates this state by displaying a message text.","code":"z2ui5_cl_smpc_app_035","terms":"list sap.m empty indicates state sap.m.list src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_035/"},{"area":"samples","group":"Controls","title":"Message Box Initial Focus","text":"Shows how to set initial focus to MessageBox button.","code":"z2ui5_cl_smpc_app_036","terms":"messagebox message box sap.m shows set initial focus verticallayout text button sap.m.messagebox src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_036/"},{"area":"samples","group":"Controls","title":"Message Toast","text":"The Message Toast displays the message text as an overlay to the current screen. It closes automatically after some time without requiring further user interaction.","code":"z2ui5_cl_smpc_app_037","terms":"messagetoast message toast sap.m displays verticallayout button sap.m.messagetoast src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_037/"},{"area":"samples","group":"Controls","title":"Message View connected with Message Model","text":"A sample showing how you can connect the MessageView with MessageManager.","code":"z2ui5_cl_smpc_app_038","terms":"messageview message sap.m showing connect messageitem sap.m.messageview src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_038/"},{"area":"samples","group":"Controls","title":"MultiComboBox - Grouping of items","text":"Items in the MultiComboBox could be grouped by a property","code":"z2ui5_cl_smpc_app_039","terms":"multicombobox multi combo box sap.m items could gr verticallayout item sap.m.multicombobox src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_039/"},{"area":"samples","group":"Controls","title":"MultiInput","text":"MultiInput provides functionality to add / remove / enter tokens.","code":"z2ui5_cl_smpc_app_040","terms":"multiinput multi input sap.m provides functionality add verticallayout label item token multiinputext sap.m.multiinput src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_040/"},{"area":"samples","group":"Controls","title":"Object Header","text":"This is a Object Header which displays the basic information about objects similar to the Object List Item. Besides a title and number you can show multiple attributes (on the left) and statuses (on the right).","code":"z2ui5_cl_smpc_app_041","terms":"objectheader object header sap.m displays objectstatus objectattribute sap.m.objectheader src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_041/"},{"area":"samples","group":"Controls","title":"Object Status","text":"The object status is a small building block representing a status with a semantic color.","code":"z2ui5_cl_smpc_app_042","terms":"objectstatus object status sap.m text semantic states verticallayout blocklayout blocklayoutrow blocklayoutcell label sap.m.objectstatus src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_042/"},{"area":"samples","group":"Controls","title":"Panel - Expand / Collapse","text":"Panels also have the possibility to expand/collapse their content (including the infoToolbar if available). [since rel. 1.22]","code":"z2ui5_cl_smpc_app_043","terms":"panel sap.m panels possibility expand col text overflowtoolbar title toolbarspacer button sap.m.panel src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_043/"},{"area":"samples","group":"Controls","title":"PDF Viewer - Popup","text":"A PDF viewer opening as a popup dialog.","code":"z2ui5_cl_smpc_app_044","terms":"pdfviewer sap.m pdf viewer opening popup dialog. carousel image sap.m.pdfviewer src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_044/"},{"area":"samples","group":"Controls","title":"RangeSlider","text":"With the RangeSlider a user can specify range from a numerical interval.","code":"z2ui5_cl_smpc_app_045","terms":"rangeslider range slider sap.m user specify verticallayout text responsivescale sap.m.rangeslider src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_045/"},{"area":"samples","group":"Controls","title":"Scroll Container","text":"The Scroll Container is a control that can display arbitrary content within a limited screen area and provides touch scrolling to make all content accessible.","code":"z2ui5_cl_smpc_app_046","terms":"scrollcontainer scroll container sap.m th image sap.m.scrollcontainer src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_046/"},{"area":"samples","group":"Controls","title":"Segmented Button","text":"The Segmented Button allows the user to pick one out of many options for displaying the content of the current page. It is a UI pattern from iOS, now also available for other platforms.","code":"z2ui5_cl_smpc_app_047","terms":"segmentedbutton segmented button sap.m allows user overflowtoolbar toolbarspacer segmentedbuttonitem vbox label text sap.m.segmentedbutton src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_047/"},{"area":"samples","group":"Controls","title":"Select","text":"Illustrates the usage of a Select in header, footer and content of a page. Note the different display options.","code":"z2ui5_cl_smpc_app_048","terms":"select sap.m dropdown selects item binding toolbar toolbarspacer hbox vbox label switch sap.m.select src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_048/"},{"area":"samples","group":"Controls","title":"StepInput","text":"The StepInput allows the user to change stepwise a value by a predefined step and also to set additional description, such as units of measurement and currencies after the input field.","code":"z2ui5_cl_smpc_app_049","terms":"stepinput step input sap.m allows user change st list customlistitem hbox vbox sap.m.stepinput src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_049/"},{"area":"samples","group":"Controls","title":"Switch","text":"\"Some say it is only a switch, I say it is one of the most stylish controls in the universe of mobile UI controls.\" (unknown developer)","code":"z2ui5_cl_smpc_app_050","terms":"switch sap.m off switches types custom text vbox hbox flexitemdata sap.m.switch src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_050/"},{"area":"samples","group":"Controls","title":"Text","text":"The text control can be used for embedding longer paragraphs of text into your application, that need text wrapping.","code":"z2ui5_cl_smpc_app_051","terms":"text sap.m embedding long vbox sap.m.text src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_051/"},{"area":"samples","group":"Controls","title":"Text Area","text":"The Text Area allows to enter multi-line text and automatically breaks to a new line for overflow text. If the text gets too big to be displayed at once the user can scroll up and down.","code":"z2ui5_cl_smpc_app_052","terms":"textarea text area sap.m allows enter multi line te verticallayout sap.m.textarea src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_052/"},{"area":"samples","group":"Controls","title":"Toolbar - Shrinkable items","text":"Toolbar items can shrink/expand when the toolbar is resized. This behavior is enabled/disabled via the ToolbarLayoutData layout. It is also possible to set min/max width for shrinkable items.","code":"z2ui5_cl_smpc_app_053","terms":"toolbar sap.m items shrink expand too slider messagestrip label toolbarspacer button searchfield sap.m.toolbar src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_053/"},{"area":"samples","group":"Controls","title":"Tree - Basic","text":"Tree displays data in hierarchical structure.","code":"z2ui5_cl_smpc_app_054","terms":"tree sap.m displays data hierarchical structure. standardtreeitem sap.m.tree src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_054/"},{"area":"samples","group":"Controls","title":"Standalone Icon Tab Header","text":"Icon Tab Header used standalone, outside of Icon Tab Bar.","code":"z2ui5_cl_smpc_app_055","terms":"icontabheader icon tab header sap.m inline mode icontabfilter sap.m.icontabheader src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_055/"},{"area":"samples","group":"Controls","title":"ImageContent","text":"Shows ImageContent that can include an icon, a profile image, or a logo with a tooltip.","code":"z2ui5_cl_smpc_app_056","terms":"imagecontent image content sap.m icon profile logo tile sap.m.imagecontent src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_056/"},{"area":"samples","group":"Controls","title":"Input List Item","text":"Use the Input List Item on phones to build form like user interfaces.","code":"z2ui5_cl_smpc_app_057","terms":"inputlistitem input list item sap.m items hosting switch checkbox radiobutton select hbox sap.m.inputlistitem src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_057/"},{"area":"samples","group":"Controls","title":"Label Properties","text":"This sample shows the different behaviors of a label.","code":"z2ui5_cl_smpc_app_058","terms":"label sap.m properties wrapping hyphenation simpleform switch slider scrollcontainer input panel messagestrip sap.m.label src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_058/"},{"area":"samples","group":"Controls","title":"LightBox","text":"Displays several image thumbnails. Clicking on each of them will open a LightBox.","code":"z2ui5_cl_smpc_app_059","terms":"lightbox light box sap.m image thumbnails opening messagestrip list customlistitem hbox lightboxitem sap.m.lightbox src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_059/"},{"area":"samples","group":"Controls","title":"Menu","text":"This control is used to show a menu in both desktop and mobile.","code":"z2ui5_cl_smpc_app_060","terms":"menu sap.m shown another openby vbox button menuitem sap.m.menu src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_060/"},{"area":"samples","group":"Controls","title":"Menu Button","text":"This control is used to open a menu in both desktop and mobile.","code":"z2ui5_cl_smpc_app_061","terms":"menubutton menu button sap.m buttons regular split mode overflowtoolbar toolbarspacer label menuitem sap.m.menubutton src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_061/"},{"area":"samples","group":"Controls","title":"Message Strip with enableFormattedText","text":"A sample MessageStrip that shows status messages with additional formatting.","code":"z2ui5_cl_smpc_app_062","terms":"messagestrip message strip sap.m strips formatted text verticallayout link sap.m.messagestrip src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_062/"},{"area":"samples","group":"Controls","title":"News Content","text":"This control is used to display the news content text and subheader in a tile.","code":"z2ui5_cl_smpc_app_063","terms":"newscontent news content sap.m tile tilecontent sap.m.newscontent src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_063/"},{"area":"samples","group":"Controls","title":"Numeric Content with Icon","text":"Shows NumericContent including an icon.","code":"z2ui5_cl_smpc_app_064","terms":"numericcontent numeric content sap.m icon sap.m.numericcontent src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_064/"},{"area":"samples","group":"Controls","title":"Message Popover - Message Handling","text":"The message handling concept sample shows how you can connect an error inside the page (such as input validation error) with an error, visualized as an item in a message popover.","code":"z2ui5_cl_smpc_app_065","terms":"messagepopover message popover sap.m handling vbox simpleform title label input select item sap.m.messagepopover src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_065/"},{"area":"samples","group":"Controls","title":"MessagePopover","text":"MessagePopover is a control that displays a summarized list of different types of messages (errors, warnings, success and information). It provides a handy and systemized way to navigate and explore details for every message.","code":"z2ui5_cl_smpc_app_066","terms":"messagepopover message popover sap.m list overflowtoolbar button messageitem link toolbarspacer sap.m.messagepopover src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_066/"},{"area":"samples","group":"Controls","title":"Message Popover - Async Message Handling","text":"The message handling concept sample shows how you can use callback functions for resolving a promise after a link or descriptions have been asynchronously validated.","code":"z2ui5_cl_smpc_app_067","terms":"messagepopover message popover sap.m async handling overflowtoolbar button messageitem link toolbarspacer sap.m.messagepopover src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_067/"},{"area":"samples","group":"Controls","title":"Slider","text":"With the Slider a user can choose a value from a numerical range.","code":"z2ui5_cl_smpc_app_068","terms":"slider sap.m variants tickmarks tooltips scale verticallayout text responsivescale sap.m.slider src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_068/"},{"area":"samples","group":"Controls","title":"Radio Button","text":"Typically the Radio Button is used by other controls. E.g. the List uses it for the single selection. But you can also use the Radio Buttons control directly, to allow selection of exactly one of multiple options.","code":"z2ui5_cl_smpc_app_069","terms":"radiobutton radio button sap.m groups value states wrapping vbox label radiobuttongroup hbox sap.m.radiobutton src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_069/"},{"area":"samples","group":"Controls","title":"Progress Indicator","text":"Shows the progress of a process in a graphical way. To indicate the progress, the inside of the ProgressIndicator is filled with a color.","code":"z2ui5_cl_smpc_app_070","terms":"progressindicator progress indicator sap.m states display only animation verticallayout text flexbox button sap.m.progressindicator src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_070/"},{"area":"samples","group":"Controls","title":"Object Identifier","text":"The object identifier is a small building block representing an object by a title and short description. Often it is used in the first column of a table.","code":"z2ui5_cl_smpc_app_071","terms":"objectidentifier object identifier sap.m active title press verticallayout sap.m.objectidentifier src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_071/"},{"area":"samples","group":"Controls","title":"Object Number","text":"The object number is a small building block representing an important, numerical attribute of an object together with it's unit. Often it is used in the last column of a table.","code":"z2ui5_cl_smpc_app_072","terms":"objectnumber object number sap.m states inverted interactive styles verticallayout label horizontallayout panel sap.m.objectnumber src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_072/"},{"area":"samples","group":"Controls","title":"Object Attribute","text":"This is an example of Object Attribute used standalone.","code":"z2ui5_cl_smpc_app_073","terms":"objectattribute object attribute sap.m active attributes customcontent verticallayout label link text dialog sap.m.objectattribute src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_073/"},{"area":"samples","group":"Controls","title":"Object List Item","text":"The Object List Item has many possibilities to provide a quick overview for an object within a list.","code":"z2ui5_cl_smpc_app_074","terms":"objectlistitem object list item sap.m status attributes currency objectstatus objectattribute sap.m.objectlistitem src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_074/"},{"area":"samples","group":"Controls","title":"SelectList","text":"A SelectList allows the user to select one item from a list of choices.","code":"z2ui5_cl_smpc_app_075","terms":"selectlist select list sap.m items sorter item sap.m.selectlist src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_075/"},{"area":"samples","group":"Controls","title":"Notification List Item","text":"A list item suitable for showing notifications to the user.","code":"z2ui5_cl_smpc_app_076","terms":"notificationlistitem notification list item sap.m variants buttons avatars vbox notificationlist flexitemdata button sap.m.notificationlistitem src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_076/"},{"area":"samples","group":"Controls","title":"Notification List Group","text":"A control suitable for grouping notifications.","code":"z2ui5_cl_smpc_app_077","terms":"notificationlistgroup notification list group sap.m grouped notifications vbox notificationlist flexitemdata button notificationlistitem sap.m.notificationlistgroup src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_077/"},{"area":"samples","group":"Controls","title":"Tile Content","text":"Shows the universal container for different content types and context information in the footer area.","code":"z2ui5_cl_smpc_app_078","terms":"tilecontent tile content sap.m numeric feed news grid numericcontent feedcontent newscontent sap.m.tilecontent src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_078/"},{"area":"samples","group":"Controls","title":"Title with Link","text":"This sample shows how to add a link to a title.","code":"z2ui5_cl_smpc_app_079","terms":"title sap.m embedded link list toolbar toolbarspacer button standardlistitem sap.m.title src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_079/"},{"area":"samples","group":"Controls","title":"Toggle Button","text":"Toggle Buttons can be toggled between pressed and normal state.","code":"z2ui5_cl_smpc_app_080","terms":"togglebutton toggle button sap.m bars pressed states bar title hbox flexitemdata sap.m.togglebutton src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_080/"},{"area":"samples","group":"Controls","title":"Pull To Refresh","text":"With the Pull to Refresh you can trigger an update operation by swiping the current page down on touch devices. On other devices the Pull To Refresh is visible all the time and the user clicks it like a button.","code":"z2ui5_cl_smpc_app_081","terms":"pulltorefresh pull refresh sap.m list standardlistitem sap.m.pulltorefresh src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_081/"},{"area":"samples","group":"Controls","title":"Slide Tile","text":"Shows Generic Tile with the 2x1 frame type displayed as sliding tiles.","code":"z2ui5_cl_smpc_app_082","terms":"slidetile slide tile sap.m sliding generic tiles verticallayout generictile tilecontent newscontent sap.m.slidetile src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_082/"},{"area":"samples","group":"Controls","title":"Standard List Item - Avatar","text":"This list item offers a standardized user interface for list content with title, description, and avatar.","code":"z2ui5_cl_smpc_app_083","terms":"standardlistitem standard list item sap.m avatar index bindings sap.m.standardlistitem src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_083/"},{"area":"samples","group":"Controls","title":"URL Helper","text":"The URL Helper can be used to easily trigger a phone's native apps like Email, Telephone and SMS. It can be used with any UI control but typically an active Display List Item is chosen.","code":"z2ui5_cl_smpc_app_084","terms":"urlhelper sap.m tel sms email url triggers list displaylistitem sap.m.urlhelper src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_084/"},{"area":"samples","group":"Controls","title":"Basic Tokenizer","text":"Basic Tokenizer with tokens","code":"z2ui5_cl_smpc_app_085","terms":"tokenizer sap.m tokens editable delete horizontallayout input button checkbox verticallayout token label sap.m.tokenizer src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_085/"},{"area":"samples","group":"Controls","title":"OverflowToolbar - Design and styling","text":"The Design and Style properties can be used to specify the visual design of the OverflowToolbar/Toolbar.","code":"z2ui5_cl_smpc_app_086","terms":"overflowtoolbar overflow toolbar sap.m design style selection simpleform label select item button sap.m.overflowtoolbar src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_086/"},{"area":"samples","group":"Controls","title":"No Container Content Padding","text":"Many UI5 containers support the standard container content padding CSS classes. Apply the CSS class 'sapUiNoContentPadding' on a UI5 container control to remove the default padding around the container content area.","code":"z2ui5_cl_smpc_app_087","terms":"containerpadding container padding sap.ui.core no content messagestrip icontabbar text icontabfilter icontabseparator sap.ui.core.containerpadding src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_087/"},{"area":"samples","group":"Controls","title":"Margins All Around","text":"Use standard margin classes 'sapUiTinyMargin', 'sapUiSmallMargin', 'sapUiMediumMargin' or 'sapUiLargeMargin' to add a 8px (0.5rem), 16px (1rem), 32px (2rem) or 48px (3rem) margin to your control.","code":"z2ui5_cl_smpc_app_088","terms":"standardmargins standard margins sap.ui.core margin classes text panel sap.ui.core.standardmargins src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_088/"},{"area":"samples","group":"Controls","title":"Fiori Object Page - Standard Classes","text":"This page implements the same sample as in 'Fiori Sample Page - sapUiFioriObjectPage' using standard margin classes.","code":"z2ui5_cl_smpc_app_089","terms":"sap.m standard responsive css classes objectheader objectattribute objectstatus icontabbar icontabfilter simpleform title sap.m.page src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_089/"},{"area":"samples","group":"Controls","title":"Dialog with Search Field","text":"Use a Search Field inside a Dialog.","code":"z2ui5_cl_smpc_app_090","terms":"searchfield search field sap.m inside dialog verticallayout button toolbar text sap.m.searchfield src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_090/"},{"area":"samples","group":"Controls","title":"Time Picker - Open by Another Control","text":"This example demonstrates the Time Picker that is opened by another control.","code":"z2ui5_cl_smpc_app_091","terms":"timepicker time picker sap.m opened another hidden input title vbox label button sap.m.timepicker src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_091/"},{"area":"samples","group":"Controls","title":"Table - Auto popin of the table columns","text":"This example demonstrates the automatic pop-in behavior of the table and hiding columns instead of moving them into the pop-in depending on their importance.","code":"z2ui5_cl_smpc_app_092","terms":"table sap.m automatic pop in column importance messagestrip slider overflowtoolbar title toolbarspacer label sap.m.table src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_092/"},{"area":"samples","group":"Controls","title":"Tab Container","text":"The sap.m.TabContainer allows for working with multiple tabs.","code":"z2ui5_cl_smpc_app_093","terms":"tabcontainer tab container sap.m editable employee tabs tabcontaineritem label input sap.m.tabcontainer src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_093/"},{"area":"samples","group":"Controls","title":"Popover Controlling Closing Behavior","text":"In some cases the closing behavior of the Popover can lead to drill down navigation. This sample demonstrates how you can control this.","code":"z2ui5_cl_smpc_app_094","terms":"popover sap.m controlling click behavior html app table toolbar title column text sap.m.popover src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_094/"},{"area":"samples","group":"Controls","title":"Time Picker Sliders","text":"TimePickerSliders used in a Dialog.","code":"z2ui5_cl_smpc_app_095","terms":"timepickersliders time picker sliders sap.m pick vbox button text dialog sap.m.timepickersliders src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_095/"},{"area":"samples","group":"Controls","title":"SplitContainer standard use case","text":"SplitContainer maintains two NavContainers if running on tablet or desktop and one NavContainer - on phone. The display of master NavContainer depends on the portrait/landscape orientation of the device and the mode of SplitContainer.","code":"z2ui5_cl_smpc_app_096","terms":"splitcontainer split container sap.m master detail navigation label button vbox text radiobuttongroup radiobutton sap.m.splitcontainer src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_096/"},{"area":"samples","group":"Controls","title":"SplitApp standard use case","text":"The SplitApp is the base for each master detail application. It extends the sap.m.SplitContainer control.","code":"z2ui5_cl_smpc_app_097","terms":"splitapp split app sap.m master detail navigation label button vbox text radiobuttongroup radiobutton sap.m.splitapp src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_097/"},{"area":"samples","group":"Controls","title":"View Settings Dialog - Standard","text":"The View Settings Dialog is a standard UI pattern for specifying sorting, grouping and filtering.","code":"z2ui5_cl_smpc_app_098","terms":"viewsettingsdialog settings dialog sap.m sort group filter viewsettingsitem viewsettingsfilteritem verticallayout button sap.m.viewsettingsdialog src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_098/"},{"area":"samples","group":"Controls","title":"QuickViewCard","text":"QuickViewCard embedded in container","code":"z2ui5_cl_smpc_app_099","terms":"quickviewcard quick card sap.m inline links button panel quickviewpage avatar quickviewgroup quickviewgroupelement sap.m.quickviewcard src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_099/"},{"area":"samples","group":"Controls","title":"QuickView","text":"QuickView basic samples.","code":"z2ui5_cl_smpc_app_100","terms":"quickview quick sap.m popover entity pages vbox button quickviewpage avatar quickviewgroup quickviewgroupelement sap.m.quickview src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_100/"},{"area":"samples","group":"Controls","title":"Wizard standard use case","text":"The Wizard is useful for breaking down complex tasks into smaller steps.","code":"z2ui5_cl_smpc_app_101","terms":"wizard sap.m multi step product creation navcontainer wizardstep messagestrip text hbox segmentedbutton segmentedbuttonitem sap.m.wizard src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_101/"},{"area":"samples","group":"Controls","title":"Late Model Update","text":"The sample demonstrates how to rebind a control to a different data source after a certain delay.","code":"z2ui5_cl_smpc_app_102","terms":"inputmodelupdate input model update sap.m late binding app vbox text button sap.m.inputmodelupdate src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_102/"},{"area":"samples","group":"Controls","title":"Select Dialog","text":"The Select Dialog allows the user to search for and pick an item from a possibly long option list. Basically it is a convenience function to quickly assemble a Dialog, a Search Field and a List with Standard List Items.","code":"z2ui5_cl_smpc_app_103","terms":"selectdialog select dialog sap.m product list standardlistitem verticallayout button customdata input sap.m.selectdialog src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_103/"},{"area":"samples","group":"Controls","title":"Table Select Dialog","text":"Similar to the Select Dialog, the Table Select Dialog presents selectable items in a table-based dialog, with filter functions. You can have single select or multi select mode.","code":"z2ui5_cl_smpc_app_104","terms":"tableselectdialog table select dialog sap.m product row columnlistitem objectidentifier text objectnumber column sap.m.tableselectdialog src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_104/"},{"area":"samples","group":"Controls","title":"Semantic Page Full Screen","text":"Semantic Page Full Screen","code":"z2ui5_cl_smpc_app_105","terms":"semanticpage semantic sap.m.semantic actions fullscreenpage addaction editaction deleteaction flagaction favoriteaction sendemailaction sendmessageaction sap.m.semantic.semanticpage sap.m src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_105/"},{"area":"samples","group":"Controls","title":"Semantic Page using Floating Footer","text":"Integration of Floating Footer inside Semantic Page","code":"z2ui5_cl_smpc_app_106","terms":"semanticpage semantic sap.m.semantic floating footer splitcontainer masterpage sortselect item filteraction groupaction addaction sap.m.semantic.semanticpage sap.m src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_106/"},{"area":"samples","group":"Controls","title":"Semantic Page Master-Detail","text":"Semantic Page Master/Detail","code":"z2ui5_cl_smpc_app_107","terms":"semanticpage semantic sap.m.semantic master detail actions splitcontainer masterpage pageaccessiblelandmarkinfo sortselect item filteraction groupaction sap.m.semantic.semanticpage sap.m src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_107/"},{"area":"samples","group":"Controls","title":"Planning Calendar - without row header","text":"PlanningCalendar with only one row without row header. On click on an interval a new appointment is created.","code":"z2ui5_cl_smpc_app_108","terms":"planningcalendar planning calendar sap.m single row day planner vbox title togglebutton planningcalendarrow calendarappointment sap.m.planningcalendar src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_108/"},{"area":"samples","group":"Controls","title":"Single Planning Calendar with Multiple Date Selection","text":"SinglePlanningCalendar with multiple date selection functionality.","code":"z2ui5_cl_smpc_app_109","terms":"singleplanningcalendar single planning calendar sap.m day selection vbox overflowtoolbar toolbarseparator label togglebutton sap.m.singleplanningcalendar src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_109/"},{"area":"samples","group":"Controls","title":"Shell Bar with title mega menu","text":"Shell Bar example showing the control title as part of a mega menu, configurable by the app developer.","code":"z2ui5_cl_smpc_app_110","terms":"shellbar shell bar sap.f application header menu menuitem avatar sap.f.shellbar src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_110/"},{"area":"samples","group":"Controls","title":"Grid List - Basic examples","text":"A GridList with the default grid layout, resized live with a slider to show how the grid reflows.","code":"z2ui5_cl_smpc_app_111","terms":"gridlist grid list sap.f layout slider panel toolbar title gridlistitem vbox flexitemdata sap.f.gridlist src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_111/"},{"area":"samples","group":"Controls","title":"Color Picker - displayMode: Simplified","text":"Basic example of Color Picker. Note that you have to set the Color Picker mode to HSL to take advantage of the responsiveness of the control on a mobile device.","code":"z2ui5_cl_smpc_app_112","terms":"colorpicker color picker sap.ui.unified selection vbox button responsivepopover sap.ui.unified.colorpicker src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_112/"},{"area":"samples","group":"Controls","title":"InfoLabel","text":"InfoLabel with all available color schemes","code":"z2ui5_cl_smpc_app_113","terms":"infolabel info label sap.tnt status labels scrollcontainer flexbox text sap.tnt.infolabel src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_113/"},{"area":"samples","group":"Controls","title":"Code Editor","text":"Display or edit source code with syntax highlighting for various source types.","code":"z2ui5_cl_smpc_app_114","terms":"codeeditor code editor sap.ui.codeeditor ace sap.ui.codeeditor.codeeditor src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_114/"},{"area":"samples","group":"Controls","title":"Basic","text":"Basic example showing most controls which are intended to be used inside a table.","code":"z2ui5_cl_smpc_app_115","terms":"table sap.ui.table grid overflowtoolbar title column label text input objectstatus currency combobox sap.ui.table.table src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_115/"},{"area":"samples","group":"Controls","title":"Subsection with Expand/Collapse","text":"This example shows subsections in expanded and collapsed mode.","code":"z2ui5_cl_smpc_app_116","terms":"objectpagelayout object layout sap.uxap objectpageheader objectpagesection objectpagesubsection simpleform label text sap.uxap.objectpagelayout src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_116/"},{"area":"samples","group":"Controls","title":"Card Control","text":"This sample illustrates how to specify the predefined header and the content of the Card control.","code":"z2ui5_cl_smpc_app_117","terms":"card sap.f fiori header vbox hbox combobox item datepicker button list customlistitem sap.f.card src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_117/"},{"area":"samples","group":"Controls","title":"Home page with cards","text":"Different types of cards types arranged in a sap.f.GridContainer.","code":"z2ui5_cl_smpc_app_118","terms":"card sap.ui.integration manifest shellbar menu menuitem avatar icontabbar icontabfilter gridcontainer gridcontainersettings cardbadgecustomdata sap.ui.integration.card src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_118/"},{"area":"samples","group":"Controls","title":"Fix Flex - Vertical Direction","text":"Shows a FixFlex control with a vertical layout.","code":"z2ui5_cl_smpc_app_119","terms":"fixflex fix flex sap.ui.layout layout html image text sap.ui.layout.fixflex src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_119/"},{"area":"samples","group":"Controls","title":"HTML","text":"With the HTML controls you can easily embed any kind of HTML content into your UI5 mobile application.","code":"z2ui5_cl_smpc_app_120","terms":"html sap.ui.core raw injection verticallayout sap.ui.core.html src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_120/"},{"area":"samples","group":"Controls","title":"Upload Set","text":"This sample shows an Upload Set control with a list of files to be uploaded and actions you can perform on them.","code":"z2ui5_cl_smpc_app_121","terms":"uploadset upload set sap.m.upload file list overflowtoolbar toolbarspacer button uploadsettoolbarplaceholder uploadsetitem objectmarker sap.m.upload.uploadset sap.m src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_121/"},{"area":"samples","group":"Controls","title":"Icon","text":"Built with an embedded font, icons scale well, and can be altered with CSS. They can also fire a press event. See the Icon Explorer for more icons.","code":"z2ui5_cl_smpc_app_122","terms":"icon sap.ui.core font gallery html hbox flexitemdata sap.ui.core.icon src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_122/"},{"area":"samples","group":"Controls","title":"Navigation List","text":"Navigation List in a Page","code":"z2ui5_cl_smpc_app_123","terms":"navigationlist navigation list sap.tnt overflowtoolbar button navigationlistitem sap.tnt.navigationlist src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_123/"},{"area":"samples","group":"Controls","title":"CSSGrid","text":"CSSGrid example for page layout.","code":"z2ui5_cl_smpc_app_124","terms":"cssgrid sap.ui.layout.cssgrid layout html slider panel overflowtoolbar title griditemlayoutdata sap.ui.layout.cssgrid.cssgrid sap.ui.layout src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_124/"},{"area":"samples","group":"Controls","title":"Splitter Layout - 2 areas","text":"Simple splitter example with two content areas","code":"z2ui5_cl_smpc_app_125","terms":"splitter sap.ui.layout layout data app button splitterlayoutdata sap.ui.layout.splitter src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_125/"},{"area":"samples","group":"Controls","title":"Basic","text":"Basic File Uploader Example","code":"z2ui5_cl_smpc_app_126","terms":"fileuploader file uploader sap.ui.unified basic html verticallayout button sap.ui.unified.fileuploader src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_126/"},{"area":"samples","group":"Controls","title":"InvisibleText","text":"Many controls provide the associations ariaLabelledBy and ariaDescribedBy for accessibility purposes. The InvisibleText control can be used by application to provide hidden texts on the UI which can be referenced via these associations.","code":"z2ui5_cl_smpc_app_127","terms":"invisibletext invisible text sap.ui.core aria descriptions toolbar button toolbarspacer title hbox flexitemdata sap.ui.core.invisibletext src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_127/"},{"area":"samples","group":"Controls","title":"Side Navigation","text":"SideNavigation in container with fixed width.","code":"z2ui5_cl_smpc_app_128","terms":"sidenavigation side navigation sap.tnt groups vbox button navigationlist navigationlistitem navigationlistgroup sap.tnt.sidenavigation src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_128/"},{"area":"samples","group":"Controls","title":"Integer Format","text":"Formats and parses only the integer digits. The decimal digits are ignored.","code":"z2ui5_cl_smpc_app_129","terms":"integer sap.ui.model.type data type simpleform label input text sap.ui.model.type.integer sap.ui.core src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_129/"},{"area":"samples","group":"Controls","title":"Control Busy Indicator","text":"A control's busy indicator can be used to block parts of the screen until an operation has finished. In this example we block the content of only one out of two panels.","code":"z2ui5_cl_smpc_app_130","terms":"sap.ui.core busyindicator toolbar button panel toolbarspacer text icon sap.ui.core.control src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_130/"},{"area":"samples","group":"Controls","title":"Basic Theme Parameters","text":"Sample provides a link to the Theme Parameter Toolbox. There you can easily search, preview, and filter semantic theme parameters.","code":"z2ui5_cl_smpc_app_131","terms":"parameters sap.ui.core.theming theme info verticallayout messagestrip link sap.ui.core.theming.parameters sap.ui.core src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_131/"},{"area":"samples","group":"Controls","title":"Side Navigation - Tags","text":"SideNavigation with tags for status indicators and metadata.","code":"z2ui5_cl_smpc_app_132","terms":"sidenavigation side navigation sap.tnt tags vbox button navigationlist navigationlistitem objectstatus navigationlistgroup sap.tnt.sidenavigation src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_132/"},{"area":"samples","group":"Controls","title":"Grid List - Different Modes With Various Item Types","text":"This is a sample for GridList with different modes of selection.","code":"z2ui5_cl_smpc_app_133","terms":"gridlist grid list sap.f selection modes html hbox segmentedbutton segmentedbuttonitem gridbasiclayout gridlistitem sap.f.gridlist src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_133/"},{"area":"samples","group":"Controls","title":"ToolHeader","text":"ToolHeader that mimics the content of the Shell.","code":"z2ui5_cl_smpc_app_134","terms":"toolheader tool header sap.tnt app shell scrollcontainer button overflowtoolbarlayoutdata image title text sap.tnt.toolheader src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_134/"},{"area":"samples","group":"Controls","title":"Currency Format","text":"Formats the number by using the parameters defined for the given currency code. Either currency symbol, currency code or none of them can be included in the final formatted string.","code":"z2ui5_cl_smpc_app_135","terms":"currency sap.ui.model.type data type simpleform label input text sap.ui.model.type.currency sap.ui.core src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_135/"},{"area":"samples","group":"Controls","title":"Side Panel with single action item","text":"Demonstrates the usage of Side Panel with single action item.","code":"z2ui5_cl_smpc_app_136","terms":"sidepanel side panel sap.f single item button vbox label switch text sidepanelitem sap.f.sidepanel src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_136/"},{"area":"samples","group":"Controls","title":"Multi Header","text":"Example for multi-header of table","code":"z2ui5_cl_smpc_app_137","terms":"table sap.ui.table multi level column headers overflowtoolbar title label text input sap.ui.table.table src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_137/"},{"area":"samples","group":"Controls","title":"Dynamic Side Content","text":"Attaches side content area which is next to the main content of the page on larger screens taking different ratios between the two on different screen sizes and on phone size screens the side content area falls down under the main content area.","code":"z2ui5_cl_smpc_app_138","terms":"dynamicsidecontent dynamic side content sap.ui.layout html title text toolbar button slider sap.ui.layout.dynamicsidecontent src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_138/"},{"area":"samples","group":"Controls","title":"Single Day Selection","text":"Calendar where the user can select a single day","code":"z2ui5_cl_smpc_app_139","terms":"calendar sap.ui.unified single day html verticallayout daterange button horizontallayout label text sap.ui.unified.calendar src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_139/"},{"area":"samples","group":"Controls","title":"Block Layout with custom background color set for the cells","text":"Block Layout in which all cells use the same background color set and different color shade.","code":"z2ui5_cl_smpc_app_140","terms":"blocklayout block layout sap.ui.layout backgrounds html vbox hbox label select item blocklayoutrow sap.ui.layout.blocklayout src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_140/"},{"area":"samples","group":"Controls","title":"InvisibleMessage","text":"The InvisibleMessage provides a way to programmaticaly expose dynamic content changes in a way that can be announced by screen readers.","code":"z2ui5_cl_smpc_app_141","terms":"invisiblemessage invisible message sap.ui.core a11y hbox button flexitemdata text sap.ui.core.invisiblemessage src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_141/"},{"area":"samples","group":"Controls","title":"Fullscreen – with toolbar","text":"A form that uses Toolbars as Form header and FormContainer headers.","code":"z2ui5_cl_smpc_app_142","terms":"form sap.ui.layout.form toolbars vbox toolbar title toolbarspacer button responsivegridlayout formcontainer formelement input sap.ui.layout.form.form sap.ui.layout src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_142/"},{"area":"samples","group":"Controls","title":"InfoLabel in DynamicPage","text":"InfoLabel used as subheader in DynamicPage","code":"z2ui5_cl_smpc_app_143","terms":"infolabel info label sap.tnt dynamicpage dynamicpagetitle title button dynamicpageheader flexbox panel horizontallayout sap.tnt.infolabel src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_143/"},{"area":"samples","group":"Controls","title":"Grid List with GridBoxLayout","text":"This layout allows to display same height grid items with configurable width.","code":"z2ui5_cl_smpc_app_144","terms":"gridlist grid list sap.f gridboxlayout slider panel toolbar title gridlistitem vbox flexitemdata sap.f.gridlist src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_144/"},{"area":"samples","group":"Controls","title":"Controlling Empty Spaces Within the Grid","text":"Example of setting the gridAutoFlow property.","code":"z2ui5_cl_smpc_app_145","terms":"cssgrid sap.ui.layout.cssgrid css grid autoflow html togglebutton panel overflowtoolbar title radiobuttongroup radiobutton sap.ui.layout.cssgrid.cssgrid sap.ui.layout src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_145/"},{"area":"samples","group":"Controls","title":"Hyphenation API","text":"This sample demonstrates usage of the Hyphenation API","code":"z2ui5_cl_smpc_app_146","terms":"hyphenation sap.ui.core.hyphenation api html simpleform label slider panel sap.ui.core.hyphenation.hyphenation sap.ui.core src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_146/"},{"area":"samples","group":"Controls","title":"Busy Indicator","text":"A busy indicator can be used to block the entire screen until an operation has finished.","code":"z2ui5_cl_smpc_app_147","terms":"busyindicator busy indicator sap.ui.core global panel text button sap.ui.core.busyindicator src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_147/"},{"area":"samples","group":"Controls","title":"Grid List - Drag and Drop","text":"This sample represents GridList with enabled Drag and Drop functionality.","code":"z2ui5_cl_smpc_app_148","terms":"gridlist grid list sap.f drag drop panel toolbar title draginfo griddropinfo gridboxlayout sap.f.gridlist src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_148/"},{"area":"samples","group":"Controls","title":"Card Explorer","text":"Card Explorer is the application where you can learn more about integration cards.","code":"z2ui5_cl_smpc_app_149","terms":"card sap.ui.integration.widgets explorer link vbox image sap.ui.integration.widgets.card sap.ui.integration src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_149/"},{"area":"samples","group":"Controls","title":"Code Editor with IconTabHeader","text":"Example how to use CodeEditor with IconTabHeader to create a tab-based experience.","code":"z2ui5_cl_smpc_app_150","terms":"codeeditor code editor sap.ui.codeeditor icontabheader icontabfilter sap.ui.codeeditor.codeeditor src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_150/"},{"area":"samples","group":"Controls","title":"calendar type","text":"islamic Calendar with secondary gregorian type","code":"z2ui5_cl_smpc_app_151","terms":"calendar sap.ui.unified types verticallayout horizontallayout button label text sap.ui.unified.calendar src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_151/"},{"area":"samples","group":"Controls","title":"Shell Bar with menu button","text":"Shell Bar example with a menu button and a plain title.","code":"z2ui5_cl_smpc_app_152","terms":"shellbar shell bar sap.f menu button avatar sap.f.shellbar src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_152/"},{"area":"samples","group":"Controls","title":"MaskInput","text":"The sap.m.MaskInput control allows users to easily enter data in a certain format and in a fixed-width input (for example: date, time, credit card number, and others).","code":"z2ui5_cl_smpc_app_153","terms":"maskinput mask input sap.m rules app simpleform label maskinputrule sap.m.maskinput src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_153/"},{"area":"samples","group":"Controls","title":"Formatted Text","text":"The control can be used for embedding formatted HTML text into your application.","code":"z2ui5_cl_smpc_app_154","terms":"formattedtext formatted text sap.m html vbox sap.m.formattedtext src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_154/"},{"area":"samples","group":"Controls","title":"Check Box","text":"Checkboxes allow users to select a subset of options. If you want to offer an off/on setting you should use the Switch control instead.","code":"z2ui5_cl_smpc_app_155","terms":"checkbox check box sap.m states vbox simpleform label griddata sap.m.checkbox src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_155/"},{"area":"samples","group":"Controls","title":"Numeric Content of Different Colors","text":"Shows NumericContent including numbers, units of measurement, and status arrows indicating a trend. The numbers can be colored according to their meaning.","code":"z2ui5_cl_smpc_app_156","terms":"numericcontent numeric content sap.m colors generictile tilecontent sap.m.numericcontent src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_156/"},{"area":"samples","group":"Controls","title":"Header Container - Vertical Mode","text":"The Header Container with a vertical layout and with divider lines.","code":"z2ui5_cl_smpc_app_157","terms":"headercontainer header container sap.m vertical numericcontent tilecontent sap.m.headercontainer src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_157/"},{"area":"samples","group":"Controls","title":"Flex Box - Gap, Row Gap & Column Gap","text":"You can add gap between rows and columns.","code":"z2ui5_cl_smpc_app_158","terms":"flexbox flex box sap.m gap vbox panel button sap.m.flexbox src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_158/"},{"area":"samples","group":"Controls","title":"Input - Types","text":"Input type corresponds to the type attribute of the HTML input tag. On touch devices, it controls the keyboard layout. On desktop, the effect of this setting is browser dependent.","code":"z2ui5_cl_smpc_app_159","terms":"input sap.m types verticallayout label sap.m.input src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_159/"},{"area":"samples","group":"Controls","title":"Link","text":"Here are some links. Typically links are used in user interfaces to trigger navigation to related content inside or outside of the current application.","code":"z2ui5_cl_smpc_app_160","terms":"link sap.m variants verticallayout label sap.m.link src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_160/"},{"area":"samples","group":"Controls","title":"Single View sample","text":"Use of implicit static view definition.","code":"z2ui5_cl_smpc_app_161","terms":"objectpagelayout object layout sap.uxap objectpage single objectpageheader objectpagesection objectpagesubsection html sap.uxap.objectpagelayout src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_161/"},{"area":"samples","group":"Controls","title":"Horizontal Layout","text":"The Horizontal Layout control is a simple way to align multiple controls horizontally. By default the contained controls are not wrapped. If you want more sophisticated layout options, consider Grid or Flex Box based layouts.","code":"z2ui5_cl_smpc_app_162","terms":"horizontallayout horizontal layout sap.ui.layout named model image sap.ui.layout.horizontallayout src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_162/"},{"area":"samples","group":"Controls","title":"Toolbar - Responsive","text":"Toolbar items can be displayed depending on the current device.","code":"z2ui5_cl_smpc_app_163","terms":"overflowtoolbar overflow toolbar sap.m responsive text toolbarspacer button actionsheet sap.m.overflowtoolbar src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_163/"},{"area":"samples","group":"Controls","title":"Row Modes","text":"Example for the different row modes","code":"z2ui5_cl_smpc_app_164","terms":"table sap.ui.table rowmodes named model overflowtoolbar title column label text link segmentedbutton sap.ui.table.table src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_164/"},{"area":"samples","group":"Controls","title":"Product Switch with Navigation","text":"This sample demonstrates the navigation behavior of Product Switch, configurable by the app developer.","code":"z2ui5_cl_smpc_app_165","terms":"productswitch product switch sap.f productswitchnavigation verticallayout button text responsivepopover productswitchitem sap.f.productswitch src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_165/"},{"area":"samples","group":"Controls","title":"Semantic Page using Draft Indicator","text":"This sample demonstrates the use of a DraftIndicator in the footer area.","code":"z2ui5_cl_smpc_app_166","terms":"semanticpage semantic sap.f.semantic title text horizontallayout verticallayout objectattribute objectstatus messagemanager table column sap.f.semantic.semanticpage sap.f src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_166/"},{"area":"samples","group":"Controls","title":"Tool Page with Vertical Navigation","text":"A tool page layout with vertical navigation","code":"z2ui5_cl_smpc_app_167","terms":"toolpage tool sap.tnt toolheader button overflowtoolbarlayoutdata toolbarspacer toolheaderutilityseparator sidenavigation navigationlist navigationlistitem navcontainer sap.tnt.toolpage src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_167/"},{"area":"samples","group":"Controls","title":"Grid Container","text":"This sample represents the general usage of GridContainer.","code":"z2ui5_cl_smpc_app_168","terms":"gridcontainer grid container sap.f scrollcontainer togglebutton panel hbox label switch text gridcontainersettings sap.f.gridcontainer src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_168/"},{"area":"samples","group":"Controls","title":"Grid - Using GridData","text":"Take advantage of sap.ui.layout.GridData to control the appearance of individual Grid children.","code":"z2ui5_cl_smpc_app_169","terms":"grid sap.ui.layout griddata verticallayout html messagestrip title slider formattedtext sap.ui.layout.grid src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_169/"},{"area":"samples","group":"Controls","title":"Dynamic Page Freestyle Example","text":"Dynamic Page freestyle example with a responsive sap.m.Table in the content area, showing that each control can be placed in the title and the header content areas.","code":"z2ui5_cl_smpc_app_170","terms":"dynamicpage dynamic sap.f dynamicpagefreestyle dynamicpagetitle title breadcrumbs link label overflowtoolbar generictag objectnumber sap.f.dynamicpage src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_170/"},{"area":"samples","group":"Controls","title":"Currency in Table","text":"Display Currencies in Table","code":"z2ui5_cl_smpc_app_171","terms":"currency sap.ui.unified amounts table column text columnlistitem objectidentifier objectnumber sap.ui.unified.currency src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_171/"},{"area":"samples","group":"Controls","title":"Side Navigation - Unselectable Parent Items","text":"SideNavigation with unselectable parent items.","code":"z2ui5_cl_smpc_app_172","terms":"sidenavigation side navigation sap.tnt sidenavigationunselectableparents vbox button navigationlist navigationlistitem sap.tnt.sidenavigation src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_172/"},{"area":"samples","group":"Controls","title":"Vertical Layout","text":"The Vertical Layout control is a simple way to align multiple controls vertically. If you want more sophisticated layout options, consider Grid or Flex Box based layouts.","code":"z2ui5_cl_smpc_app_173","terms":"verticallayout vertical layout sap.ui.layout image sap.ui.layout.verticallayout src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_173/"},{"area":"samples","group":"Controls","title":"Row Highlights","text":"Shows how row highlights and alternating row colors can be used.","code":"z2ui5_cl_smpc_app_174","terms":"table sap.ui.table rowhighlights overflowtoolbar title toolbarspacer label select item togglebutton rowsettings column sap.ui.table.table src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_174/"},{"area":"samples","group":"Controls","title":"Fullscreen – with toolbar","text":"A SimpleForm that uses Toolbars as Form header and FormContainer headers.","code":"z2ui5_cl_smpc_app_175","terms":"simpleform simple form sap.ui.layout.form simpleformtoolbar vbox toolbar title toolbarspacer button label input sap.ui.layout.form.simpleform sap.ui.layout src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_175/"},{"area":"samples","group":"Controls","title":"Grid List features - Grouping, Header, Growing","text":"This sample illustrates subgroups with headers, custom header and lazy loading of GridList items.","code":"z2ui5_cl_smpc_app_176","terms":"gridlist grid list sap.f gridlistboxcontainergrouping slider panel toolbar title toolbarspacer searchfield gridboxlayout sap.f.gridlist src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_176/"},{"area":"samples","group":"Controls","title":"simple example","text":"CalendarDateInterval with 14 days and single day selection","code":"z2ui5_cl_smpc_app_177","terms":"calendardateinterval calendar date interval sap.ui.unified calendardateintervalbasic html verticallayout daterange button horizontallayout label sap.ui.unified.calendardateinterval src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_177/"},{"area":"samples","group":"Controls","title":"Subsection with Action buttons sample","text":"Example of a subsection displaying action buttons.","code":"z2ui5_cl_smpc_app_178","terms":"objectpagesubsection object sub section sap.uxap objectpagesubsectionwithactions objectpagelayout objectpageheader objectpagesection html button sap.uxap.objectpagesubsection src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_178/"},{"area":"samples","group":"Controls","title":"Float Format","text":"Formats and parses both integer and decimal digits.","code":"z2ui5_cl_smpc_app_179","terms":"float sap.ui.model.type typefloat simpleform label input text sap.ui.model.type.float sap.ui.core src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_179/"},{"area":"samples","group":"Controls","title":"FileSize Type","text":"This sample explains the formatting options of the FileSize type.","code":"z2ui5_cl_smpc_app_180","terms":"filesize file size sap.ui.model.type typefilesize simpleform label input text sap.ui.model.type.filesize sap.ui.core src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_180/"},{"area":"samples","group":"Controls","title":"Date Type - Source As String","text":"This sample explains the formatting options of the Date type with the date being available as string.","code":"z2ui5_cl_smpc_app_181","terms":"date sap.ui.model.type typedateasstring simpleform label datepicker text sap.ui.model.type.date sap.ui.core src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_181/"},{"area":"samples","group":"Controls","title":"Time Type","text":"This sample explains the formatting options of the Time type.","code":"z2ui5_cl_smpc_app_182","terms":"time sap.ui.model.type typetimeastime simpleform label timepicker text sap.ui.model.type.time sap.ui.core src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_182/"},{"area":"samples","group":"Controls","title":"DateTime Type","text":"This sample explains the formatting options of the DateTime type.","code":"z2ui5_cl_smpc_app_183","terms":"datetime date time sap.ui.model.type typedatetime simpleform label datetimepicker input text sap.ui.model.type.datetime sap.ui.core src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_183/"},{"area":"samples","group":"Controls","title":"Object Page Layout Section sample","text":"This example explains the rules for the rendering of sections","code":"z2ui5_cl_smpc_app_184","terms":"objectpagesection object section sap.uxap objectpagelayout objectpageheader objectattribute objectpagesubsection html sap.uxap.objectpagesection src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_184/"},{"area":"samples","group":"Controls","title":"Whitespaces Pattern","text":"Renders whitespaces properly within controls","code":"z2ui5_cl_smpc_app_185","terms":"whitespacepattern whitespace pattern sap.m messagestrip link form responsivegridlayout formcontainer formelement input listitem sap.m.whitespacepattern src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_185/"},{"area":"samples","group":"Controls","title":"Responsive Splitter","text":"ResponsiveSplitter is used to visually divide the content of its parent. It consists of PaneContainers that further agregate other PaneContainers and SplitPanes.","code":"z2ui5_cl_smpc_app_186","terms":"responsivesplitter responsive splitter sap.ui.layout panecontainer splitpane splitterlayoutdata panel text list standardlistitem vbox sap.ui.layout.responsivesplitter src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_186/"},{"area":"samples","group":"Controls","title":"Navigation to Section sample","text":"This example shows how to change the default behavior in order to be able to navigate to sections instead of subsections, using the Anchor Bar","code":"z2ui5_cl_smpc_app_187","terms":"objectpagelayout object layout sap.uxap anchorbarnopopover objectpagedynamicheadertitle title button overflowtoolbarbutton objectpagesection objectpagesubsection html sap.uxap.objectpagelayout src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_187/"},{"area":"samples","group":"Controls","title":"Object Page Header Content Priorities","text":"The sample shows how to set priorities of the ObjectPageHeader content items by using the ObjectPageHeaderContentLayoutData element","code":"z2ui5_cl_smpc_app_188","terms":"objectpageheadercontent object header content sap.uxap objectpageheadercontentpriorities objectpagelayout objectpagedynamicheadertitle title flexbox avatar text sap.uxap.objectpageheadercontent src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_188/"},{"area":"samples","group":"Controls","title":"Toolbar vs Bar vs OverflowToolbar","text":"Toolbar handles overflow by shrinking items. OverflowToolbar provides an overflow menu. Bar is able to perfectly center a text if nothing overflows.","code":"z2ui5_cl_smpc_app_189","terms":"bar sap.m toolbarvsbar button toolbar toolbarspacer title messagestrip label toolbarlayoutdata overflowtoolbar sap.m.bar src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_189/"},{"area":"samples","group":"Controls","title":"Flex Box - Render Type","text":"Flex items can be rendered differently. By default, they are wrapped in a div element. Optionally, the bare controls can be rendered directly. This can affect the resulting layout.","code":"z2ui5_cl_smpc_app_190","terms":"flexbox flex box sap.m flexboxrendertype vbox panel button flexitemdata input sap.m.flexbox src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_190/"},{"area":"samples","group":"Controls","title":"Object Attribute inside Table","text":"This is an example of Object Attribute used inside Table.","code":"z2ui5_cl_smpc_app_191","terms":"objectattribute object attribute sap.m objectattributeintable table column text columnlistitem objectidentifier sap.m.objectattribute src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_191/"},{"area":"samples","group":"Controls","title":"InfoLabel in Table","text":"InfoLabel used in content of Table","code":"z2ui5_cl_smpc_app_192","terms":"infolabel info label sap.tnt infolabelintable table toolbar title toolbarspacer combobox item column sap.tnt.infolabel src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_192/"},{"area":"samples","group":"Controls","title":"Combo box - Two columns layout","text":"Use the combo box dropdown list with two columns layout if you need to display additional information to your options, like e.g. currencies to countries or abbreviations to systems.","code":"z2ui5_cl_smpc_app_193","terms":"combobox combo box sap.m combobox2columns listitem sap.m.combobox src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_193/"},{"area":"samples","group":"Controls","title":"Grid - Info Layout","text":"You can use the Grid control to make responsive table-free layouts; here we are using a default indent and span, and specifying the Small settings such that the image and text will stack on a small display.","code":"z2ui5_cl_smpc_app_194","terms":"grid sap.ui.layout gridinfo image griddata vbox text sap.ui.layout.grid src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_194/"},{"area":"samples","group":"Controls","title":"List - Footer","text":"With the 'footerText' property you can set a message that is shown at the very end of the list.","code":"z2ui5_cl_smpc_app_195","terms":"list sap.m listfooter standardlistitem sap.m.list src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_195/"},{"area":"samples","group":"Controls","title":"Currency","text":"Display Currencies with proper Alignment","code":"z2ui5_cl_smpc_app_196","terms":"currency sap.ui.unified grid list customlistitem sap.ui.unified.currency src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_196/"},{"area":"samples","group":"Controls","title":"Object Header - markers aggregation","text":"This sample shows the different states of an Object Header, which can be set using the markers.","code":"z2ui5_cl_smpc_app_197","terms":"objectheader object header sap.m objectheadermarkers objectattribute objectmarker sap.m.objectheader src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_197/"},{"area":"samples","group":"Controls","title":"Object List Item - markers aggregation","text":"This sample shows the different states of an Object List Item, which can be set using the markers aggregation.","code":"z2ui5_cl_smpc_app_198","terms":"objectlistitem object list item sap.m objectlistitemmarkers objectstatus objectattribute objectmarker sap.m.objectlistitem src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_198/"},{"area":"samples","group":"Controls","title":"ComboBox - Grouping of items","text":"Items in the ComboBox could be grouped by a property","code":"z2ui5_cl_smpc_app_199","terms":"combobox combo box sap.m comboboxgrouping item sap.m.combobox src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_199/"},{"area":"samples","group":"Controls","title":"ObjectPage with Hidden Section Titles","text":"ObjectPage sample that demonstrates the combination of header facets and showTitle properties of sections and subsections.","code":"z2ui5_cl_smpc_app_200","terms":"headerfacetpattern header facet pattern sap.uxap objectpagesectionshowtitle objectpagelayout objectpagedynamicheadertitle title hbox avatar vbox sap.uxap.headerfacetpattern src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_200/"},{"area":"samples","group":"Controls","title":"Object Header - Condensed","text":"The Object Header is shown in condensed mode with title, number, number unit and one attribute.","code":"z2ui5_cl_smpc_app_201","terms":"objectheader object header sap.m objectheadercondensed objectattribute sap.m.objectheader src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_201/"},{"area":"samples","group":"Controls","title":"Standard List Item - Description","text":"This list item offers a standardized user interface for list content with title and description.","code":"z2ui5_cl_smpc_app_202","terms":"standardlistitem standard list item sap.m standardlistitemdescription sap.m.standardlistitem src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_202/"},{"area":"samples","group":"Controls","title":"Tokenizer in Toolbar and OverflowToolbar","text":"Tokenizer integration with sap.m.OverflowToolbar","code":"z2ui5_cl_smpc_app_203","terms":"overflowtoolbartokenizer overflow toolbar tokenizer sap.m token text input button verticallayout label overflowtoolbarlayoutdata sap.m.overflowtoolbartokenizer src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_203/"},{"area":"samples","group":"Controls","title":"Standard List Item - Info State Inverted","text":"This sample demonstrates the inverted rendering behavior of the info text and the info state of the StandardListItem control.","code":"z2ui5_cl_smpc_app_204","terms":"standardlistitem standard list item sap.m standardlistiteminfostateinverted sap.m.standardlistitem src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_204/"},{"area":"samples","group":"Controls","title":"Select - with icons","text":"Illustrates the usage of a Select with icons","code":"z2ui5_cl_smpc_app_205","terms":"select sap.m selectwithicons listitem sap.m.select src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_205/"},{"area":"samples","group":"Controls","title":"Object Header - with Image","text":"An Object Header will also make space for an image if one is specified, via a URL for the 'icon' property. Note: This example shows the image inside ObjectHeader with the responsive property set to false.","code":"z2ui5_cl_smpc_app_206","terms":"objectheader object header sap.m objectheaderimage objectstatus objectattribute sap.m.objectheader src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_206/"},{"area":"samples","group":"Controls","title":"List - Items Type","text":"You can use the 'type' property of any list item, which inherits from ListItemBase control, to demonstrate all possible types (see sap.m.ListType).","code":"z2ui5_cl_smpc_app_207","terms":"list sap.m listitemtypes overflowtoolbar title toolbarspacer label select item standardlistitem sap.m.list src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_207/"},{"area":"samples","group":"Controls","title":"Standard List Item - Info","text":"This list item offers a standardized user interface for list content with title and info.","code":"z2ui5_cl_smpc_app_208","terms":"standardlistitem standard list item sap.m standardlistiteminfo sap.m.standardlistitem src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_208/"},{"area":"samples","group":"Controls","title":"Object Header Responsive V","text":"This is a responsive Object Header without a number and with a Title, 3 Statuses/Attributes.","code":"z2ui5_cl_smpc_app_209","terms":"objectheader object header sap.m objectheaderresponsivev objectattribute objectmarker objectstatus sap.m.objectheader src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_209/"},{"area":"samples","group":"Controls","title":"Table - Alternate Row Colors","text":"Table with alternating light and dark background colors. Note: The effect of this feature is only visible in some themes (e.g. SAP Belize or SAP Quartz).","code":"z2ui5_cl_smpc_app_210","terms":"table sap.m tablealternaterowcolors overflowtoolbar title column text columnlistitem objectidentifier sap.m.table src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_210/"},{"area":"samples","group":"Controls","title":"SelectList - with icons","text":"A SelectList with icons.","code":"z2ui5_cl_smpc_app_211","terms":"selectlist select list sap.m selectlistwithicons listitem sap.m.selectlist src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_211/"},{"area":"samples","group":"Controls","title":"Standard List Item","text":"This list item offers a standardized user interface for list content with only title.","code":"z2ui5_cl_smpc_app_212","terms":"standardlistitem standard list item sap.m sap.m.standardlistitem src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_212/"},{"area":"samples","group":"Controls","title":"Grid List - Break point examples - S, M, L, XL","text":"This sample illustrates how to configure the responsive settings for different container sizes.","code":"z2ui5_cl_smpc_app_213","terms":"gridlist grid list sap.f gridlistbreakpoints slider panel toolbar title gridresponsivelayout gridsettings gridlistitem sap.f.gridlist src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_213/"},{"area":"samples","group":"Controls","title":"Block Layout","text":"The BlockLayout is intended to be used with rows and cells. The cells have predefined width, the rows have predefined rendering modes - scrollable/vertical/horizontal.","code":"z2ui5_cl_smpc_app_214","terms":"blocklayout block layout sap.ui.layout blocklayoutdefault simpleform label slider segmentedbutton segmentedbuttonitem verticallayout blocklayoutrow sap.ui.layout.blocklayout src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_214/"},{"area":"samples","group":"Controls","title":"Fix Flex - Vertical Direction with minFlexSize","text":"Shows a FixFlex control where the minFlexSize is set to 400px.","code":"z2ui5_cl_smpc_app_215","terms":"fixflex fix flex sap.ui.layout fixflexminflexsize objectheader objectattribute objectstatus objectmarker table overflowtoolbar title sap.ui.layout.fixflex src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_215/"},{"area":"samples","group":"Controls","title":"ObjectPageHeaderContent","text":"This is an example of an ObjectPageHeaderContent.","code":"z2ui5_cl_smpc_app_216","terms":"objectpageheadercontent object header content sap.uxap headercontent verticallayout objectstatus text objectnumber progressindicator label sap.uxap.objectpageheadercontent src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_216/"},{"area":"samples","group":"Controls","title":"Standard Fiori ObjectPageHeader","text":"This is an example of an ObjectPageHeader containing mainly KPIs.","code":"z2ui5_cl_smpc_app_217","terms":"objectpageheader object header sap.uxap kpiobjectpageheader objectpagelayout objectpageheaderactionbutton verticallayout label objectnumber objectattribute objectpagesection sap.uxap.objectpageheader src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_217/"},{"area":"samples","group":"Controls","title":"Shell Bar with search","text":"Shell Bar example with configured search functionality.","code":"z2ui5_cl_smpc_app_218","terms":"shellbar shell bar sap.f shellbarwithsearch menu menuitem avatar searchmanager suggestionitem sap.f.shellbar src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_218/"},{"area":"samples","group":"Controls","title":"Fix Flex - Horizontal Direction","text":"Shows a FixFlex control with a horizontal layout.","code":"z2ui5_cl_smpc_app_219","terms":"fixflex fix flex sap.ui.layout fixflexhorizontal html image text sap.ui.layout.fixflex src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_219/"},{"area":"samples","group":"Controls","title":"calendar - min., max., disabled and show/hide week numbers","text":"Calendar with minimum date 2000-01-01 and maximum date 2050-12-31, some disabled days (in January 2016) and ability to show or hide week numbers.","code":"z2ui5_cl_smpc_app_220","terms":"calendar sap.ui.unified calendarminmax html verticallayout daterange horizontallayout label text flexbox switch sap.ui.unified.calendar src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_220/"},{"area":"samples","group":"Controls","title":"ToolHeader with IconTabHeader","text":"ToolHeader can contain IconTabHeader. When both controls are combined, the IconTabHeader supports only inline text. No icons can be used.","code":"z2ui5_cl_smpc_app_221","terms":"toolheader tool header sap.tnt toolheadericontabheader text button overflowtoolbarlayoutdata icontabheader icontabfilter menubutton menu sap.tnt.toolheader src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_221/"},{"area":"samples","group":"Controls","title":"Grid List with Responsive Column Layout","text":"This layout displays a variable number of grid columns depending on available screen size. Grid row's height is dynamically determined by the height of the highest grid element on this row.","code":"z2ui5_cl_smpc_app_222","terms":"gridlist grid list sap.f gridlistresponsivecolumnlayout togglebutton slider panel toolbar title responsivecolumnlayout gridlistitem sap.f.gridlist src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_222/"},{"area":"samples","group":"Controls","title":"Block Layout with links as titles","text":"The BlockLayout Cells can have links as titles. The link text overwrites the title text.","code":"z2ui5_cl_smpc_app_223","terms":"blocklayout block layout sap.ui.layout blocklayoutlinktitle simpleform label slider segmentedbutton segmentedbuttonitem messagestrip verticallayout sap.ui.layout.blocklayout src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_223/"},{"area":"samples","group":"Controls","title":"List - Selection","text":"'Single selection' forces the user to choose exactly one out of many items. With the 'multi' selection the user can pick multiple items at the same time. This is helpful for e.g. batch processing.","code":"z2ui5_cl_smpc_app_224","terms":"list sap.m listselection overflowtoolbar title toolbarspacer select item standardlistitem sap.m.list src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_224/"},{"area":"samples","group":"Controls","title":"Table - Strict layout","text":"This example demonstrates the Strict layout and the column resizing of the table.","code":"z2ui5_cl_smpc_app_225","terms":"table sap.m tablestrictlayout columnresizer column text columnlistitem objectidentifier objectnumber sap.m.table src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_225/"},{"area":"samples","group":"Controls","title":"Grid - Features Demo","text":"The major layout features of the Grid control are shown in this example. Features like indentation, making content visible/invisible based on the screen size, moving content forward and backwards are demonstrated.","code":"z2ui5_cl_smpc_app_226","terms":"grid sap.ui.layout gridxl verticallayout title text image griddata sap.ui.layout.grid src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_226/"},{"area":"samples","group":"Controls","title":"Item Eventing","text":"Menu with Item Eventing","code":"z2ui5_cl_smpc_app_227","terms":"menu sap.ui.unified menuitemeventing horizontallayout button menuitem menutextfielditem sap.ui.unified.menu src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_227/"},{"area":"samples","group":"Controls","title":"Menu Eventing","text":"Menu with Menu Eventing","code":"z2ui5_cl_smpc_app_228","terms":"menu sap.ui.unified menumenueventing horizontallayout button menuitem menutextfielditem sap.ui.unified.menu src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_228/"},{"area":"samples","group":"Controls","title":"Popover","text":"The Popover controls allows to show contextual information without leaving the current page. Press somewhere outside the popover to close it.","code":"z2ui5_cl_smpc_app_229","terms":"popover sap.m verticallayout button overflowtoolbar toolbarspacer image sap.m.popover src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_229/"},{"area":"samples","group":"Controls","title":"Bound Model Mapping","text":"Use of dynamic bound model mapping","code":"z2ui5_cl_smpc_app_230","terms":"modelmapping model mapping sap.uxap boundmodelmapping simpleform title text sap.uxap.modelmapping src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_230/"},{"area":"samples","group":"Controls","title":"Commands","text":"This example demonstrates how to define shortcuts using commands in your application","code":"z2ui5_cl_smpc_app_232","terms":"commandexecution command execution sap.ui.core commands app popover toolbar button toolbarspacer input panel sap.ui.core.commandexecution src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_232/"},{"area":"samples","group":"Controls","title":"InitialPage Pattern","text":"The initial page floorplan allows the user to navigate to a single object to view or edit it.","code":"z2ui5_cl_smpc_app_233","terms":"initialpagepattern initial pattern sap.m selectdialog standardlistitem objectpagelayout objectpagedynamicheadertitle input listitem flexbox vbox sap.m.initialpagepattern src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_233/"},{"area":"samples","group":"Controls","title":"Flexible Column Layout (with Event Bus)","text":"Clicking on a link in a column opens the next column.","code":"z2ui5_cl_smpc_app_234","terms":"flexiblecolumnlayout flexible column layout sap.f master detail table label columnlistitem text button sap.f.flexiblecolumnlayout src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_234/"},{"area":"samples","group":"Controls","title":"Facet Filter - Simple","text":"With the Facet Filter you can offer multiple filters ('facets') to assist the user in narrowing down the data in, say, a table. With this default 'Simple' type, each filter is displayed in a row for selection.","code":"z2ui5_cl_smpc_app_235","terms":"facetfilter facet filter sap.m facetfiltersimple vbox facetfilterlist facetfilteritem table overflowtoolbar title toolbarspacer sap.m.facetfilter src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_235/"},{"area":"samples","group":"Controls","title":"Feed Input","text":"This sample shows a standalone feed input with different settings.","code":"z2ui5_cl_smpc_app_236","terms":"feedinput feed input sap.m label button dialog text sap.m.feedinput src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_236/"},{"area":"samples","group":"Controls","title":"Object Marker in a table","text":"The ObjectMarker is a small building block representing an object by an icon or text and icon. Often it is used in a table.","code":"z2ui5_cl_smpc_app_237","terms":"objectmarker object marker sap.m table column text columnlistitem objectidentifier sap.m.objectmarker src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_237/"},{"area":"samples","group":"Controls","title":"Dynamic Page with Sticky Subheader","text":"Dynamic Page containing an sap.m.IconTabBar in the sticky subheader content area.","code":"z2ui5_cl_smpc_app_238","terms":"dynamicpage dynamic sap.f dynamicpagewithstickysubheader dynamicpagetitle title breadcrumbs link label overflowtoolbar generictag objectnumber sap.f.dynamicpage src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_238/"},{"area":"samples","group":"Controls","title":"Object Page with ObjectPageHeaderActionButtons","text":"This example demonstrates ObjectPage with ObjectPageHeaderActionButtons and a GenericTag in the header.","code":"z2ui5_cl_smpc_app_239","terms":"objectpageheaderactionbutton object header action button sap.uxap objectpageheaderactionbuttons html objectpagelayout objectpagedynamicheadertitle breadcrumbs link sap.uxap.objectpageheaderactionbutton src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_239/"},{"area":"samples","group":"Controls","title":"Calendar with navigatable legend","text":"An example of adding navigatable legend to the calendar.","code":"z2ui5_cl_smpc_app_240","terms":"calendarlegend calendar legend sap.ui.unified calendarlegendnavigation html verticallayout datetyperange calendarlegenditem sap.ui.unified.calendarlegend src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_240/"},{"area":"samples","group":"Controls","title":"Side Navigation - Press Event","text":"SideNavigation with press event parameters and preventDefault.","code":"z2ui5_cl_smpc_app_241","terms":"sidenavigation side navigation sap.tnt sidenavigationpressevent vbox hbox button checkbox navigationlist navigationlistitem dialog sap.tnt.sidenavigation src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_241/"},{"area":"samples","group":"Controls","title":"Nav Container","text":"The Nav Container stacks multiple pages and offers an API to switch between them with some animation. Typically application developers would use the App control which inherits from NavContainer.","code":"z2ui5_cl_smpc_app_242","terms":"navcontainer nav container sap.m html vbox overflowtoolbar button hbox flexitemdata customdata select sap.m.navcontainer src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_242/"},{"area":"samples","group":"Controls","title":"Responsive Popover","text":"The Responsive Popover is an abstraction of Popover and Dialog. On the phone a Dialog will be shown. On tablet and desktop a Popover is shown.","code":"z2ui5_cl_smpc_app_243","terms":"responsivepopover responsive popover sap.m verticallayout button image overflowtoolbar toolbarspacer sap.m.responsivepopover src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_243/"},{"area":"samples","group":"Controls","title":"Dynamic Page with Responsive Avatar","text":"Dynamic Page demonstrating the breakpointChange event to adjust Avatar sizes responsively based on breakpoints.","code":"z2ui5_cl_smpc_app_244","terms":"dynamicpage dynamic sap.f dynamicpageresponsiveavatar dynamicpagetitle breadcrumbs link hbox title objectmarker text flexbox sap.f.dynamicpage src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_244/"},{"area":"samples","group":"Controls","title":"Subsection with hidden title","text":"Example of a subsection with showTitle property set to false.","code":"z2ui5_cl_smpc_app_245","terms":"objectpagesubsection object sub section sap.uxap objectpagesubsectionhiddentitle objectpagelayout objectpageheader objectpagesection simpleform label text sap.uxap.objectpagesubsection src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_245/"},{"area":"samples","group":"Controls","title":"Complex","text":"File Uploader Example with Parameters","code":"z2ui5_cl_smpc_app_246","terms":"fileuploader file uploader sap.ui.unified fileuploadercomplex html verticallayout fileuploaderparameter button sap.ui.unified.fileuploader src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_246/"},{"area":"samples","group":"Controls","title":"Column Resizing","text":"Example for column resizing","code":"z2ui5_cl_smpc_app_247","terms":"table sap.ui.table columnresizing overflowtoolbar title column label text link segmentedbutton segmentedbuttonitem sap.ui.table.table src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_247/"},{"area":"samples","group":"Controls","title":"JSONTreeBinding","text":"Basic example showing how a TreeTable can be built using a JSONModel","code":"z2ui5_cl_smpc_app_248","terms":"treetable tree table sap.ui.table treetable.jsontreebinding overflowtoolbar title toolbarspacer button column label text sap.ui.table.treetable src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_248/"},{"area":"samples","group":"Controls","title":"Button with Badge","text":"Button with a Badge attached","code":"z2ui5_cl_smpc_app_249","terms":"button sap.m buttonwithbadge verticallayout toolbar title badgecustomdata flexbox text stepinput input select sap.m.button src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_249/"},{"area":"samples","group":"Controls","title":"Color Palette as popover","text":"The ColorPalette in a popover (by use of thin wrapper control sap.m.ColorPalettePopover).","code":"z2ui5_cl_smpc_app_250","terms":"colorpalette color palette sap.m colorpalettepopover table column text columnlistitem label button sap.m.colorpalette src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_250/"},{"area":"samples","group":"Controls","title":"Busy Dialog - Light","text":"This is a 'light' version of the standard Busy Dialog; it also blocks the user interface until the currently running operation has been finished. It has no UI components, so you must close it programmatically when appropriate.","code":"z2ui5_cl_smpc_app_251","terms":"busydialog busy dialog sap.m busydialoglight verticallayout button sap.m.busydialog src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_251/"},{"area":"samples","group":"Controls","title":"Carousel with Multiple Items at Once","text":"The customLayout aggregation determines how many pages are displayed in Carousel's visible area.","code":"z2ui5_cl_smpc_app_252","terms":"carousel sap.m carouselwithmorepages simpleform label input switch title carousellayout scrollcontainer card header sap.m.carousel src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_252/"},{"area":"samples","group":"Controls","title":"Date Picker - Value States","text":"This example shows different DatePicker value states.","code":"z2ui5_cl_smpc_app_253","terms":"datepicker date picker sap.m datepickervaluestate flexbox vbox label sap.m.datepicker src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_253/"},{"area":"samples","group":"Controls","title":"Date Range Selection - Value States","text":"This example shows different DateRangeSelection value states.","code":"z2ui5_cl_smpc_app_254","terms":"daterangeselection date range selection sap.m daterangeselectionvaluestate flexbox vbox label sap.m.daterangeselection src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_254/"},{"area":"samples","group":"Controls","title":"Date Time Picker - Value States","text":"This example shows different DateTimePicker value states.","code":"z2ui5_cl_smpc_app_255","terms":"datetimepicker date time picker sap.m datetimepickervaluestate flexbox vbox label sap.m.datetimepicker src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_255/"},{"area":"samples","group":"Controls","title":"Date Range Selection - Open by Another Control","text":"This example shows Date Range Selection which is opened by another control.","code":"z2ui5_cl_smpc_app_256","terms":"daterangeselection date range selection sap.m daterangeselectionhidden title vbox label button link sap.m.daterangeselection src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_256/"},{"area":"samples","group":"Controls","title":"Date Time Picker - Open by Another Control","text":"This example shows Date Time Picker which is opened by another control.","code":"z2ui5_cl_smpc_app_257","terms":"datetimepicker date time picker sap.m datetimepickerhidden title vbox label button link sap.m.datetimepicker src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_257/"},{"area":"samples","group":"Controls","title":"Object Page with Translucent backgroundDesign","text":"This example demonstrates ObjectPage with ObjectPageDynamicHeaderTitle with Solid backgroundDesign and Translucent backgroundDesignAnchorBar.","code":"z2ui5_cl_smpc_app_258","terms":"objectpagedynamicheadertitle object dynamic header title sap.uxap objectpageheaderbackgrounddesign objectpagelayout breadcrumbs link text horizontallayout sap.uxap.objectpagedynamicheadertitle src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_258/"},{"area":"samples","group":"Controls","title":"Object Page Header with Progress Indicator and Rating Indicator","text":"ObjectPage sample with header content arranged using containers, called facets, ProgressIndicator and RatingIndicator.","code":"z2ui5_cl_smpc_app_259","terms":"objectpagedynamicheadertitle object dynamic header title sap.uxap objectpageprogressratingindicators objectpagelayout hbox vbox avatar label sap.uxap.objectpagedynamicheadertitle src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_259/"},{"area":"samples","group":"Controls","title":"ObjectPage with HeaderContent always shown on desktop","text":"This is an example of an ObjectPage with property alwaysShowContentHeader set to true. In this case the HeaderContent won't snap on a desktop.","code":"z2ui5_cl_smpc_app_260","terms":"objectpagelayout object layout sap.uxap objectpageheaderexpanded objectpagedynamicheadertitle title text button overflowtoolbarbutton flexbox verticallayout sap.uxap.objectpagelayout src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_260/"},{"area":"samples","group":"Controls","title":"Object Page with Title on the left","text":"Object Page sample showing a layout with subsection titles on the left.","code":"z2ui5_cl_smpc_app_261","terms":"objectpagelayout object layout sap.uxap objectpagetitleonleft objectpagedynamicheadertitle title flexbox avatar text button overflowtoolbarbutton sap.uxap.objectpagelayout src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_261/"},{"area":"samples","group":"Controls","title":"Object Page with Responsive Avatar","text":"ObjectPage sample demonstrating the breakpointChange event to adjust Avatar sizes responsively based on screen size (phone: M, tablet: L, desktop/desktop_XL: XL).","code":"z2ui5_cl_smpc_app_262","terms":"objectpagelayout object layout sap.uxap objectpageresponsiveavatar objectpagedynamicheadertitle breadcrumbs link hbox title objectmarker flexbox sap.uxap.objectpagelayout src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_262/"},{"area":"samples","group":"Controls","title":"Object Page reseting the selected section to the first visible section","text":"Object Page sample showing how to ensure the page is always scrolled to the top on any subsequent navigation to the page, regardless of its previously selected section in the preceding navigation.","code":"z2ui5_cl_smpc_app_263","terms":"objectpagelayout object layout sap.uxap objectpageresetselectedsection navcontainer verticallayout messagestrip list standardlistitem checkbox objectpagedynamicheadertitle sap.uxap.objectpagelayout src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_263/"},{"area":"samples","group":"Controls","title":"Bound Filters - Filter Bar","text":"This sample shows how bound filters work in a filter bar. As the user enters values, a toolbar with filter inputs instantly filters the customer table. It also demonstrates how to use the filter API to change the bound filters programmatically.","code":"z2ui5_cl_smpc_app_264","terms":"filter sap.ui.model boundfilters.filterbar table title toolbar label input toolbarspacer button column text sap.ui.model.filter sap.ui.core src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_264/"},{"area":"samples","group":"Controls","title":"Bound Filters - Filtered List in Table","text":"This sample shows how bound filters work. It features a table of customers with a 'Select' control in each row. The 'Select' control uses the customer's region to filter the list of available account managers.","code":"z2ui5_cl_smpc_app_265","terms":"filter sap.ui.model boundfilters.filteredlistintable table title column label text select item sap.ui.model.filter sap.ui.core src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_265/"},{"area":"samples","group":"Controls","title":"Nested Splitter Layouts - 7 Areas","text":"Nested Splitter example with 7 content areas","code":"z2ui5_cl_smpc_app_266","terms":"splitter sap.ui.layout splitternested1 app splitterlayoutdata button sap.ui.layout.splitter src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_266/"},{"area":"samples","group":"Controls","title":"Dynamic Side Content - equal split mode","text":"The side content and the main content take 50%/50% of the container on all screen sizes except on phone screens where there is a button implemented to toggle between each other.","code":"z2ui5_cl_smpc_app_267","terms":"dynamicsidecontent dynamic side content sap.ui.layout dynamicsidecontentequalsplit html vbox title image text toolbar sap.ui.layout.dynamicsidecontent src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_267/"},{"area":"samples","group":"Controls","title":"Color Picker Popover","text":"Example of ColorPicker in a popover using the thin wrapper control sap.ui.unified.ColorPickerPopover.","code":"z2ui5_cl_smpc_app_268","terms":"colorpickerpopover color picker popover sap.ui.unified table column text columnlistitem label input sap.ui.unified.colorpickerpopover src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_268/"},{"area":"samples","group":"Controls","title":"Dynamic Side Content - product page","text":"Product page with comments example.","code":"z2ui5_cl_smpc_app_269","terms":"dynamicsidecontent dynamic side content sap.ui.layout dynamicsidecontentproduct html vbox title image text toolbar sap.ui.layout.dynamicsidecontent src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_269/"},{"area":"samples","group":"Controls","title":"Nested Example","text":"CSSGrid example nested grids.","code":"z2ui5_cl_smpc_app_270","terms":"cssgrid sap.ui.layout.cssgrid nestedgrids html slider panel overflowtoolbar title vbox text griditemlayoutdata sap.ui.layout.cssgrid.cssgrid sap.ui.layout src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_270/"},{"area":"samples","group":"Controls","title":"Responsiveness","text":"Example of setting customLayout for different layout (screen) sizes.","code":"z2ui5_cl_smpc_app_271","terms":"cssgrid sap.ui.layout.cssgrid gridresponsiveness html togglebutton slider panel overflowtoolbar title text hbox segmentedbutton sap.ui.layout.cssgrid.cssgrid sap.ui.layout src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_271/"},{"area":"samples","group":"Controls","title":"Field Groups","text":"A control's field group id can be used to define a virtual group of fields that should be validated together.","code":"z2ui5_cl_smpc_app_272","terms":"sap.ui.core fieldgroup simpleform title label input griddata select item combobox messagestrip toolbar sap.ui.core.control src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_272/"},{"area":"samples","group":"Controls","title":"Message Dialog","text":"Creating a dialog for showing UI messages. The possible messages types are: 'None', 'Success', 'Warning' and 'Error'.","code":"z2ui5_cl_smpc_app_273","terms":"dialog sap.m dialogmessage verticallayout button text sap.m.dialog src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_273/"},{"area":"samples","group":"Controls","title":"Dialog - Fullscreen","text":"A dialog that can be toggled to fullscreen mode through a header button, by double-clicking the header, or by using the 'Shift+Ctrl+F' keyboard shortcut.","code":"z2ui5_cl_smpc_app_274","terms":"dialog sap.m dialogfullscreen verticallayout button list standardlistitem sap.m.dialog src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_274/"},{"area":"samples","group":"Controls","title":"Tile Statuses","text":"Shows the GenericTile while it is loading, if loading fails, and in disabled status.","code":"z2ui5_cl_smpc_app_275","terms":"generictile generic tile sap.m generictilestates html tilecontent imagecontent numericcontent feedcontent slidetile newscontent sap.m.generictile src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_275/"},{"area":"samples","group":"Controls","title":"List - Growing","text":"The Growing feature helps if your content is too big to be loaded/shown at once. It paginates the content into smaller chunks - aka pages - which are loaded/shown one after another. Random access to pages (e.","code":"z2ui5_cl_smpc_app_276","terms":"list sap.m listgrowing standardlistitem sap.m.list src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_276/"},{"area":"samples","group":"Controls","title":"Table - ContextualWidth (Dynamic)","text":"This example shows the container-based pop-in behavior. The container has dynamic width.","code":"z2ui5_cl_smpc_app_277","terms":"table sap.m tablecontextualwidthdynamic messagestrip responsivesplitter panecontainer splitpane column text columnlistitem label sap.m.table src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_277/"},{"area":"samples","group":"Controls","title":"Message Box","text":"MessageBox is an easy way of displaying a message-type dialog to the user. You can display different types of dialogs: - Types of message (Alert, Confirmation, etc.) - Initial focus can be set to the buttons or the controls used in the message","code":"z2ui5_cl_smpc_app_278","terms":"messagebox message box sap.m verticallayout text button sap.m.messagebox src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_278/"},{"area":"samples","group":"Controls","title":"Image error handling with IllustratedMessage","text":"Handle errors using the sap.m.IllustratedMessage with the error event.","code":"z2ui5_cl_smpc_app_279","terms":"image sap.m imageerrorwithillustration verticallayout grid vbox button flexitemdata illustratedmessage sap.m.image src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_279/"},{"area":"samples","group":"Controls","title":"TextArea - Value Update","text":"Since 1.30 the value property of sap.m.TextArea is not updated on every keystroke, but first when the user presses Enter or leaves the input. The change was necessary to fully support the standard UI5 data binding with formatters and types.","code":"z2ui5_cl_smpc_app_280","terms":"textarea text area sap.m textareavalueupdate simpleform label switch sap.m.textarea src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_280/"},{"area":"samples","group":"Controls","title":"MultiComboBox - showSelectAll functionality","text":"MultiComboBox with enabled Select All feature inside suggestions.","code":"z2ui5_cl_smpc_app_281","terms":"multicombobox multi combo box sap.m multicomboboxselectall verticallayout item sap.m.multicombobox src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_281/"},{"area":"samples","group":"Controls","title":"Date Type - Source As Date","text":"This sample explains the formatting options of the Date type with the date being available as date object.","code":"z2ui5_cl_smpc_app_282","terms":"date sap.ui.model.type typedateasdate simpleform label datepicker text sap.ui.model.type.date sap.ui.core src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_282/"},{"area":"samples","group":"Controls","title":"Theme-independent CSS-classes","text":"Sample display of 'sapTheme'-prefixed CSS classes for theme-independent styling of custom HTML/Controls. The set displayed is to be used to style static HTML elements.","code":"z2ui5_cl_smpc_app_283","terms":"theming sap.ui.core themecustomclasses messagestrip table column text columnlistitem html sap.ui.core.theming src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_283/"},{"area":"samples","group":"Controls","title":"Message View inside Dialog","text":"A sample with Message View placed inside a Dialog.","code":"z2ui5_cl_smpc_app_284","terms":"messageview message sap.m messageviewinsidedialog button dialog bar title messageitem link sap.m.messageview src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_284/"},{"area":"samples","group":"Controls","title":"Popover in Custom Within Area","text":"Within area of sap.ui.core.Popup determines where all popups (including popovers) are positioned.","code":"z2ui5_cl_smpc_app_285","terms":"popover sap.m popoverwithinarea horizontallayout button vbox flexitemdata flexbox image list standardlistitem sap.m.popover src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_285/"},{"area":"samples","group":"Controls","title":"Breadcrumbs sample with current page link","text":"Breadcrumbs sample with current page set as aggregation, resulting in a link","code":"z2ui5_cl_smpc_app_286","terms":"breadcrumbs sap.m breadcrumbswithcurrentpagelink verticallayout title link sap.m.breadcrumbs src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_286/"},{"area":"samples","group":"Controls","title":"Icon Tab Bar - Badges","text":"This sample illustrates the possibility to add badges to the icon tab filters.","code":"z2ui5_cl_smpc_app_287","terms":"icontabbar icon tab bar sap.m icontabbarbadges panel simpleform label radiobuttongroup radiobutton icontabfilter sap.m.icontabbar src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_287/"},{"area":"samples","group":"Controls","title":"PDF Viewer - Embedded","text":"A PDF viewer embedded in another control.","code":"z2ui5_cl_smpc_app_288","terms":"pdfviewer sap.m pdfviewerembedded scrollcontainer flexbox button flexitemdata sap.m.pdfviewer src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_288/"},{"area":"samples","group":"Controls","title":"Dynamic Message Strip Generator","text":"Generates MessageStrips with random properties.","code":"z2ui5_cl_smpc_app_289","terms":"messagestrip message strip sap.m dynamicmessagestripgenerator verticallayout button sap.m.messagestrip src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_289/"},{"area":"samples","group":"Controls","title":"MultiInput with Value Help","text":"MultiInput that includes a SelectDialog as a value help dialog","code":"z2ui5_cl_smpc_app_290","terms":"multiinput multi input sap.m multiinputvaluehelp selectdialog standardlistitem verticallayout label token item sap.m.multiinput src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_290/"},{"area":"samples","group":"Controls","title":"Notification List Group with data bindings","text":"A control suitable for grouping notifications. The sample uses JSON data bindings.","code":"z2ui5_cl_smpc_app_291","terms":"notificationlistgroup notification list group sap.m notificationlistgroupbindings vbox notificationlist flexitemdata button notificationlistitem sap.m.notificationlistgroup src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_291/"},{"area":"samples","group":"Controls","title":"Panel - Background Design","text":"Panels support different background designs for better visual distinction inside containers. [since rel. 1.150]","code":"z2ui5_cl_smpc_app_292","terms":"panel sap.m panelbackgrounddesign verticallayout horizontallayout label select item text messagestrip sap.m.panel src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_292/"},{"area":"samples","group":"Controls","title":"Subsection with transparent background","text":"This example uses the 'sapUxAPObjectPageSubSectionTransparentBackground' CSS class to set transparent background.","code":"z2ui5_cl_smpc_app_293","terms":"objectpagesubsection object sub section sap.uxap objectpagesubsectionbackground objectpagelayout objectpageheader objectpagesection list standardlistitem sap.uxap.objectpagesubsection src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_293/"},{"area":"samples","group":"Controls","title":"Message View with Grouping","text":"A sample with Message View and inside a Dialog and grouping of items","code":"z2ui5_cl_smpc_app_294","terms":"messageview message sap.m messageviewwithgrouping overflowtoolbar button toolbarspacer dialog bar text messageitem link sap.m.messageview src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_294/"},{"area":"samples","group":"Controls","title":"View Settings Dialog - Custom Filters","text":"You can have custom filters in your View Settings Dialog, as shown in this example here.","code":"z2ui5_cl_smpc_app_295","terms":"viewsettingsdialog settings dialog sap.m viewsettingsdialogcustom viewsettingscustomitem slider verticallayout button sap.m.viewsettingsdialog src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_295/"},{"area":"samples","group":"Controls","title":"View Settings Dialog - Custom Search","text":"You can filter the items in the filter details page using different string filter operators.","code":"z2ui5_cl_smpc_app_296","terms":"viewsettingsdialog settings dialog sap.m viewsettingsdialogcustomfilterdetails viewsettingsfilteritem viewsettingsitem verticallayout button sap.m.viewsettingsdialog src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_296/"},{"area":"samples","group":"Controls","title":"View Settings Dialog - Custom Tabs","text":"You can have custom tabs with your own defined content in the View Settings Dialog, as shown in this example.","code":"z2ui5_cl_smpc_app_297","terms":"viewsettingsdialog settings dialog sap.m viewsettingsdialogcustomtabs html viewsettingsitem viewsettingsfilteritem viewsettingscustomtab panel label segmentedbutton sap.m.viewsettingsdialog src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_297/"},{"area":"samples","group":"Controls","title":"Table - View Settings & Menus","text":"The View Settings Dialog is standard UI pattern for specifying sorting, grouping and filtering. For a table it should be triggered by a button in the table header with the 'drop-down-list' icon.","code":"z2ui5_cl_smpc_app_298","terms":"table sap.m tableviewsettingsdialog menu quicksort quicksortitem quickresize actionitem viewsettingsdialog viewsettingsitem viewsettingsfilteritem overflowtoolbar sap.m.table src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_298/"},{"area":"samples","group":"Controls","title":"Side Navigation - Actions","text":"SideNavigation with a quick create action button.","code":"z2ui5_cl_smpc_app_299","terms":"sidenavigation side navigation sap.tnt sidenavigationactions vbox button navigationlist navigationlistitem dialog label input sap.tnt.sidenavigation src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_299/"},{"area":"samples","group":"Controls","title":"Side Navigation - Wrapping of long texts","text":"SideNavigation with long texts that wrap.","code":"z2ui5_cl_smpc_app_300","terms":"sidenavigation side navigation sap.tnt sidenavigationwrapping vbox button navigationlist navigationlistitem navigationlistgroup dialog label sap.tnt.sidenavigation src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_300/"},{"area":"samples","group":"Controls","title":"Side Navigation - Overlay Mode","text":"SideNavigation in a responsive popover.","code":"z2ui5_cl_smpc_app_301","terms":"sidenavigation side navigation sap.tnt sidenavigationoverlaymode app toolpage shellbar avatar navcontainer scrollcontainer vbox sap.tnt.sidenavigation src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_301/"},{"area":"samples","group":"Controls","title":"Tool Page Horizontal and Vertical Navigation","text":"A tool page layout with horizontal navigation (on desktop and tablet) and vertical navigation (on phone)","code":"z2ui5_cl_smpc_app_302","terms":"toolpage tool sap.tnt toolpagenavigation toolheader button overflowtoolbarlayoutdata image title text toolbarspacer searchfield sap.tnt.toolpage src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_302/"},{"area":"samples","group":"Controls","title":"Tool Page with Horizontal Navigation","text":"A tool page layout with horizontal navigation","code":"z2ui5_cl_smpc_app_303","terms":"toolpage tool sap.tnt toolpagehorizontalnavigation toolheader image title overflowtoolbarlayoutdata text toolbarspacer searchfield button sap.tnt.toolpage src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_303/"},{"area":"samples","group":"Controls","title":"multiple months","text":"Calendar with more than one month","code":"z2ui5_cl_smpc_app_304","terms":"calendar sap.ui.unified calendarmultiplemonth verticallayout daterange horizontallayout button label text sap.ui.unified.calendar src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_304/"},{"area":"samples","group":"Controls","title":"Date deselection with shortcut for today","text":"An example of recommended implementation of deselection logic when the calendar is in single selection mode.","code":"z2ui5_cl_smpc_app_305","terms":"calendar sap.ui.unified calendardatedeselection html verticallayout horizontallayout label text sap.ui.unified.calendar src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_305/"},{"area":"samples","group":"Controls","title":"Single Interval Selection","text":"Calendar where the user can select an interval or entire week (either by selecting its week number or by using SHIFT + Space).","code":"z2ui5_cl_smpc_app_306","terms":"calendar sap.ui.unified calendarsingleintervalselection html verticallayout horizontallayout label text sap.ui.unified.calendar src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_306/"},{"area":"samples","group":"Controls","title":"Multiple Day Selection","text":"Calendar where the user can select multiple days, entire weeks (either by selecting its week number or by using SHIFT + Space) and ranges (using SHIFT + ENTER/Left mouse click).","code":"z2ui5_cl_smpc_app_307","terms":"calendar sap.ui.unified calendarmultipledayselection html verticallayout button list standardlistitem sap.ui.unified.calendar src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_307/"},{"area":"samples","group":"Controls","title":"Special Days with Legend","text":"Calendar with special days and legend","code":"z2ui5_cl_smpc_app_308","terms":"calendar sap.ui.unified calendarspecialdayslegend html verticallayout datetyperange calendarlegend calendarlegenditem togglebutton sap.ui.unified.calendar src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_308/"},{"area":"samples","group":"Controls","title":"Color Picker - displayMode: Default","text":"Basic example of Color Picker. Note that you have to set the Color Picker mode to HSL to take advantage of the responsiveness of the control on a mobile device.","code":"z2ui5_cl_smpc_app_309","terms":"colorpicker color picker sap.ui.unified vbox button responsivepopover sap.ui.unified.colorpicker src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_309/"},{"area":"samples","group":"Controls","title":"Color Picker - displayMode: Large","text":"Basic example of Color Picker. Note that you have to set the Color Picker mode to HSL to take advantage of the responsiveness of the control on a mobile device.","code":"z2ui5_cl_smpc_app_310","terms":"colorpicker color picker sap.ui.unified colorpickerlarge vbox button responsivepopover sap.ui.unified.colorpicker src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_310/"},{"area":"samples","group":"Controls","title":"Menu with Selectable Items","text":"Some menu items can be added to groups to allow single or multiple item selection.","code":"z2ui5_cl_smpc_app_311","terms":"menu sap.ui.unified menuselectable vbox button menuitem menuitemgroup sap.ui.unified.menu src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_311/"},{"area":"samples","group":"Controls","title":"Fullscreen – one group","text":"Form with one single group in a fullscreen app with a label field ratio of 3:5:4 in all sizes besides size S (12:12:0).","code":"z2ui5_cl_smpc_app_312","terms":"form sap.ui.layout.form form354 bar button vbox title responsivegridlayout formcontainer formelement text input sap.ui.layout.form.form sap.ui.layout src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_312/"},{"area":"samples","group":"Controls","title":"Fullscreen – one group with long labels","text":"Form with one single group in a fullscreen app for long labels and fields, so some more space is available on medium screens (4:7:0).","code":"z2ui5_cl_smpc_app_313","terms":"form sap.ui.layout.form form354wide bar button vbox title responsivegridlayout formcontainer formelement text input sap.ui.layout.form.form sap.ui.layout src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_313/"},{"area":"samples","group":"Controls","title":"Fullscreen – two groups (horizontal)","text":"Form with two groups with long labels and fields in a fullscreen app.","code":"z2ui5_cl_smpc_app_314","terms":"form sap.ui.layout.form form354widedual bar button vbox title responsivegridlayout formcontainer formelement text input sap.ui.layout.form.form sap.ui.layout src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_314/"},{"area":"samples","group":"Controls","title":"Splitscreen – one group","text":"Form with one single group in a split app with a label field ratio of 4:7:1 in all sizes besides size S (12:12:0).","code":"z2ui5_cl_smpc_app_315","terms":"form sap.ui.layout.form form471 splitcontainer bar button vbox title responsivegridlayout formcontainer formelement text sap.ui.layout.form.form sap.ui.layout src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_315/"},{"area":"samples","group":"Controls","title":"Fullscreen – address form with edit switch","text":"A fullscreen address form with Edit / Save / Cancel in the page header, switching between a display and a change fragment; ResponsiveGridLayout arranges the columns.","code":"z2ui5_cl_smpc_app_316","terms":"form sap.ui.layout.form form480 bar button vbox title responsivegridlayout formcontainer formelement text input sap.ui.layout.form.form sap.ui.layout src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_316/"},{"area":"samples","group":"Controls","title":"Fullscreen – two groups (vertical)","text":"Form with two groups. On large screens a two-column layout (4:8:0) is used; on medium screens a one-column layout (12:12:0); on small screens also a one-column layout (12:12:0).","code":"z2ui5_cl_smpc_app_317","terms":"form sap.ui.layout.form form480_12120 bar button vbox title responsivegridlayout formcontainer formelement text input sap.ui.layout.form.form sap.ui.layout src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_317/"},{"area":"samples","group":"Controls","title":"Fullscreen – two columns of size M","text":"Form with two groups, gets a two-column layout whenever possible.","code":"z2ui5_cl_smpc_app_318","terms":"form sap.ui.layout.form form480_12120dual bar button vbox title responsivegridlayout formcontainer formelement text input sap.ui.layout.form.form sap.ui.layout src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_318/"},{"area":"samples","group":"Controls","title":"Fullscreen – three groups (horizontal)","text":"Form with three groups in a three-column layout. On extra large screens a three-column layout (4:8:0) is used; on large and medium screens a two-column layout (4:8:0); on small screens a one-column layout (12:12:0).","code":"z2ui5_cl_smpc_app_319","terms":"form sap.ui.layout.form form480_trial bar button vbox title responsivegridlayout formcontainer formelement text link sap.ui.layout.form.form sap.ui.layout src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_319/"},{"area":"samples","group":"Controls","title":"Fullscreen – one group using ColumnLayout","text":"Form with one single group in a fullscreen app using the ColumnLayout control with default settings as layout.","code":"z2ui5_cl_smpc_app_320","terms":"form sap.ui.layout.form form_column_onegroup bar button vbox title columnlayout formcontainer formelement text input sap.ui.layout.form.form sap.ui.layout src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_320/"},{"area":"samples","group":"Controls","title":"Fullscreen – one group using ColumnLayout with up to 4 columns","text":"Form with one large single group in a fullscreen app (with 2 columns in M, 3 columns in L, and 4 columns in XL size).","code":"z2ui5_cl_smpc_app_321","terms":"form sap.ui.layout.form form_column_onegroup234 bar button vbox title columnlayout formcontainer formelement text link sap.ui.layout.form.form sap.ui.layout src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_321/"},{"area":"samples","group":"Controls","title":"Fullscreen – three groups using ColumnLayout with up to 4 columns","text":"Form with three groups in a fullscreen app (with 2 columns in M, 3 columns in L, and 4 columns in XL size).","code":"z2ui5_cl_smpc_app_322","terms":"form sap.ui.layout.form form_column_threegroups234 bar button vbox title columnlayout formcontainer formelement text link sap.ui.layout.form.form sap.ui.layout src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_322/"},{"area":"samples","group":"Controls","title":"Fullscreen – three groups using ColumnLayout with up to 6 columns","text":"Form with three groups in a fullscreen app (with 3 columns in M, 4 columns in L, and 6 columns in XL size).","code":"z2ui5_cl_smpc_app_323","terms":"form sap.ui.layout.form form_column_threegroups346 bar button vbox title columnlayout formcontainer formelement text link sap.ui.layout.form.form sap.ui.layout src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_323/"},{"area":"samples","group":"Controls","title":"Fullscreen – two groups using ColumnLayout with up to 4 columns","text":"Form with two groups in a fullscreen app (with 2 columns in M, 3 columns in L, and 4 columns in XL size).","code":"z2ui5_cl_smpc_app_324","terms":"form sap.ui.layout.form form_column_twogroups234 bar button vbox title columnlayout formcontainer formelement text link sap.ui.layout.form.form sap.ui.layout src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_324/"},{"area":"samples","group":"Controls","title":"Fullscreen – one group","text":"Form with one single group in a fullscreen app with a label field ratio of 3:5:4 in all sizes besides size S (12:12:0).","code":"z2ui5_cl_smpc_app_325","terms":"simpleform simple form sap.ui.layout.form simpleform354 bar button vbox label text input griddata sap.ui.layout.form.simpleform sap.ui.layout src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_325/"},{"area":"samples","group":"Controls","title":"Fullscreen – one group with long labels","text":"Form with one single group in a fullscreen app for long labels and fields, so some more space is available on medium screens (4:7:0).","code":"z2ui5_cl_smpc_app_326","terms":"simpleform simple form sap.ui.layout.form simpleform354wide bar button vbox label text input griddata sap.ui.layout.form.simpleform sap.ui.layout src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_326/"},{"area":"samples","group":"Controls","title":"Fullscreen – two groups (horizontal)","text":"Form with two groups with long labels and fields in a fullscreen app.","code":"z2ui5_cl_smpc_app_327","terms":"simpleform simple form sap.ui.layout.form simpleform354widedual bar button vbox title label text input sap.ui.layout.form.simpleform sap.ui.layout src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_327/"},{"area":"samples","group":"Controls","title":"Splitscreen – one group","text":"Form with one single group in a split app with a label field ratio of 4:7:1 in all sizes besides size S (12:12:0).","code":"z2ui5_cl_smpc_app_328","terms":"simpleform simple form sap.ui.layout.form simpleform471 splitcontainer bar button vbox label text input sap.ui.layout.form.simpleform sap.ui.layout src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_328/"},{"area":"samples","group":"Controls","title":"Fullscreen – address form with edit switch","text":"The same fullscreen address form built with SimpleForm: Edit / Save / Cancel in the page header switch it between display and change mode.","code":"z2ui5_cl_smpc_app_329","terms":"simpleform simple form sap.ui.layout.form simpleform480 bar button vbox title label text input sap.ui.layout.form.simpleform sap.ui.layout src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_329/"},{"area":"samples","group":"Controls","title":"Fullscreen – two groups (vertical)","text":"Form with two groups. On large screens a two-column layout (4:8:0) is used; on medium screens a one-column layout (12:12:0); on small screens also a one-column layout (12:12:0).","code":"z2ui5_cl_smpc_app_330","terms":"simpleform simple form sap.ui.layout.form simpleform480_12120 bar button vbox title label text input sap.ui.layout.form.simpleform sap.ui.layout src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_330/"},{"area":"samples","group":"Controls","title":"Fullscreen – two columns of size M","text":"Form with two groups, gets a two-column layout whenever possible.","code":"z2ui5_cl_smpc_app_331","terms":"simpleform simple form sap.ui.layout.form simpleform480_12120dual bar button vbox title label text input sap.ui.layout.form.simpleform sap.ui.layout src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_331/"},{"area":"samples","group":"Controls","title":"Fullscreen – three groups (horizontal)","text":"Form with three groups in a three-column layout. On extra large screens a three-column layout (4:8:0) is used; on large and medium screens a two-column layout (4:8:0); on small screens a one-column layout (12:12:0).","code":"z2ui5_cl_smpc_app_332","terms":"simpleform simple form sap.ui.layout.form simpleform480_trial bar button vbox title label text ratingindicator sap.ui.layout.form.simpleform sap.ui.layout src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_332/"},{"area":"samples","group":"Controls","title":"Fullscreen – one group using ColumnLayout","text":"Form with one single group in a fullscreen app using the ColumnLayout control with default settings as layout.","code":"z2ui5_cl_smpc_app_333","terms":"simpleform simple form sap.ui.layout.form simpleform_column_onegroup bar button vbox label text input columnelementdata sap.ui.layout.form.simpleform sap.ui.layout src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_333/"},{"area":"samples","group":"Controls","title":"Fullscreen – one group using ColumnLayout with up to 4 columns","text":"Form with one large single group in a fullscreen app (with 2 columns in M, 3 columns in L, and 4 columns in XL size).","code":"z2ui5_cl_smpc_app_334","terms":"simpleform simple form sap.ui.layout.form simpleform_column_onegroup234 bar button vbox label text link input sap.ui.layout.form.simpleform sap.ui.layout src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_334/"},{"area":"samples","group":"Controls","title":"Fullscreen – three groups using ColumnLayout with up to 4 columns","text":"Form with three groups in a fullscreen app (with 2 columns in M, 3 columns in L, and 4 columns in XL size).","code":"z2ui5_cl_smpc_app_335","terms":"simpleform simple form sap.ui.layout.form simpleform_column_threegroups234 bar button vbox title label text link sap.ui.layout.form.simpleform sap.ui.layout src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_335/"},{"area":"samples","group":"Controls","title":"Fullscreen – three groups using ColumnLayout with up to 6 columns","text":"Form with three groups in a fullscreen app (with 3 columns in M, 4 columns in L, and 6 columns in XL size).","code":"z2ui5_cl_smpc_app_336","terms":"simpleform simple form sap.ui.layout.form simpleform_column_threegroups346 bar button vbox title label text link sap.ui.layout.form.simpleform sap.ui.layout src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_336/"},{"area":"samples","group":"Controls","title":"Fullscreen – two groups using ColumnLayout with up to 4 columns","text":"Form with two groups in a fullscreen app (with 2 columns in M, 3 columns in L, and 4 columns in XL size).","code":"z2ui5_cl_smpc_app_337","terms":"simpleform simple form sap.ui.layout.form simpleform_column_twogroups234 bar button vbox title label text link sap.ui.layout.form.simpleform sap.ui.layout src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_337/"},{"area":"samples","group":"Controls","title":"Fix Flex - Fix container size","text":"Shows a FixFlex control where fixContentSize is set to a specific value(200px) and sap.m.scrollContainer is enabling vertical scrolling.","code":"z2ui5_cl_smpc_app_338","terms":"fixflex fix flex sap.ui.layout fixflexfixedsize html scrollcontainer text sap.ui.layout.fixflex src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_338/"},{"area":"samples","group":"Controls","title":"Splitter Layout - 2 non-resizable areas","text":"Simple splitter example with two content areas that cannot be resized","code":"z2ui5_cl_smpc_app_339","terms":"splitter sap.ui.layout splitter3 app text splitterlayoutdata sap.ui.layout.splitter src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_339/"},{"area":"samples","group":"Controls","title":"Splitter Layout - 3 areas","text":"Simple splitter example with three content areas","code":"z2ui5_cl_smpc_app_340","terms":"splitter sap.ui.layout splitter4 app button splitterlayoutdata sap.ui.layout.splitter src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_340/"},{"area":"samples","group":"Controls","title":"Home page with cards loading","text":"Different types of cards types and their loading placeholder","code":"z2ui5_cl_smpc_app_341","terms":"card sap.ui.integration.widgets cardsloading simpleform label input button gridcontainer gridcontaineritemlayoutdata sap.ui.integration.widgets.card sap.ui.integration src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_341/"},{"area":"samples","group":"Controls","title":"Lazy loading of cards on home page","text":"dataMode:'Auto' activates lazy loading behavior of an integration card","code":"z2ui5_cl_smpc_app_342","terms":"card sap.ui.integration.widgets lazyloading simpleform label input checkbox button gridcontainer gridcontaineritemlayoutdata sap.ui.integration.widgets.card sap.ui.integration src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_342/"},{"area":"samples","group":"Controls","title":"Block Layout with custom background color set per cell","text":"Block Layout in which all cells use different background color set and different shade.","code":"z2ui5_cl_smpc_app_343","terms":"blocklayout block layout sap.ui.layout blocklayoutcustombackgroundpercell html blocklayoutrow blocklayoutcell vbox label select item sap.ui.layout.blocklayout src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_343/"},{"area":"samples","group":"Controls","title":"Dynamic Side Content - position","text":"The side content is positioned on the left side of the main content in left-to-right mode and on the right side of the main content in right-to-left mode.","code":"z2ui5_cl_smpc_app_344","terms":"dynamicsidecontent dynamic side content sap.ui.layout dynamicsidecontentposition html title text toolbar button slider sap.ui.layout.dynamicsidecontent src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_344/"},{"area":"samples","group":"Controls","title":"Grid - Own properties","text":"You can see how the different properties of the sap.ui.layout.Grid affect it's final appearance.","code":"z2ui5_cl_smpc_app_345","terms":"grid sap.ui.layout gridproperties html verticallayout messagestrip title formattedtext slider sap.ui.layout.grid src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_345/"},{"area":"samples","group":"Controls","title":"Automatic Sizing for Additional Rows and Columns","text":"Example of setting gridAutoRows and gridAutoColumns properties.","code":"z2ui5_cl_smpc_app_346","terms":"cssgrid sap.ui.layout.cssgrid gridautorows html panel togglebutton overflowtoolbar title text simpleform label vbox sap.ui.layout.cssgrid.cssgrid sap.ui.layout src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_346/"},{"area":"samples","group":"Controls","title":"Grid Gap and Layout Data","text":"Example of setting the gridGap property and using of Layout Data.","code":"z2ui5_cl_smpc_app_347","terms":"cssgrid sap.ui.layout.cssgrid gridgap html slider panel overflowtoolbar title text simpleform label input sap.ui.layout.cssgrid.cssgrid sap.ui.layout src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_347/"},{"area":"samples","group":"Controls","title":"Responsive Column Layout","text":"Example of using ResponsiveColumnLayout.","code":"z2ui5_cl_smpc_app_348","terms":"cssgrid sap.ui.layout.cssgrid gridresponsivecolumnlayout togglebutton slider panel toolbar title text responsivecolumnlayout card responsivecolumnitemlayoutdata sap.ui.layout.cssgrid.cssgrid sap.ui.layout src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_348/"},{"area":"samples","group":"Controls","title":"Configuring Rows and Columns","text":"Example of setting gridTemplateRows and gridTemplateColumns properties.","code":"z2ui5_cl_smpc_app_349","terms":"cssgrid sap.ui.layout.cssgrid gridtemplaterows html slider panel overflowtoolbar title simpleform label combobox item sap.ui.layout.cssgrid.cssgrid sap.ui.layout src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_349/"},{"area":"samples","group":"Controls","title":"Product Home Layout","text":"Example of using several grids nested in one main grid with ResponsiveColumnLayout, in order to achieve responsive home page design.","code":"z2ui5_cl_smpc_app_350","terms":"cssgrid sap.ui.layout.cssgrid producthomelayout toolpage toolheader image text toolbarspacer button avatar scrollcontainer togglebutton sap.ui.layout.cssgrid.cssgrid sap.ui.layout src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_350/"},{"area":"samples","group":"Controls","title":"Splitter Layout","text":"Splitter where you can change contentAreas and their sizes live","code":"z2ui5_cl_smpc_app_351","terms":"splitter sap.ui.layout html app button splitterlayoutdata horizontallayout text verticallayout hbox checkbox input sap.ui.layout.splitter src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_351/"},{"area":"samples","group":"Controls","title":"Aggregations","text":"Example which shows the different aggregations of the table","code":"z2ui5_cl_smpc_app_352","terms":"table sap.ui.table aggregations hbox icon title overflowtoolbar toolbarspacer searchfield facetfilter facetfilterlist facetfilteritem sap.ui.table.table src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_352/"},{"area":"samples","group":"Controls","title":"Drag and Drop","text":"Shows various drag-and-drop capabilities along with custom context menu alternatives for each action.","code":"z2ui5_cl_smpc_app_353","terms":"table sap.ui.table dnd hbox overflowtoolbar title contextmenusetting menu menuitem column text draginfo sap.ui.table.table src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_353/"},{"area":"samples","group":"Controls","title":"Filtering","text":"Example showing the different facets of filtering within a table","code":"z2ui5_cl_smpc_app_354","terms":"table sap.ui.table filtering overflowtoolbar title toolbarspacer togglebutton button toolbarseparator searchfield column label sap.ui.table.table src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_354/"},{"area":"samples","group":"Controls","title":"Table related Menus","text":"Example which focuses the handling of the table related Menus","code":"z2ui5_cl_smpc_app_355","terms":"table sap.ui.table menus menu menuitem overflowtoolbar title toolbarspacer togglebutton column label text sap.ui.table.table src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_355/"},{"area":"samples","group":"Controls","title":"MultiSelectionPlugin","text":"Example showing the behavior of MultiSelectionPlugin","code":"z2ui5_cl_smpc_app_356","terms":"table sap.ui.table multiselectionplugin overflowtoolbar title toolbarspacer label select item input toolbarseparator togglebutton sap.ui.table.table src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_356/"},{"area":"samples","group":"Controls","title":"OData","text":"OData related example","code":"z2ui5_cl_smpc_app_357","terms":"table sap.ui.table odata busyindicator overflowtoolbar title toolbarspacer button column label text currency sap.ui.table.table src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_357/"},{"area":"samples","group":"Controls","title":"OData Metadata","text":"Shows an example how an OData metadata driven table creation can look like.","code":"z2ui5_cl_smpc_app_358","terms":"table sap.ui.table odata2 overflowtoolbar title busyindicator column label text currency sap.ui.table.table src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_358/"},{"area":"samples","group":"Controls","title":"Row Actions","text":"Shows how row actions can be used.","code":"z2ui5_cl_smpc_app_359","terms":"table sap.ui.table rowaction overflowtoolbar title toolbarspacer select item togglebutton column label text sap.ui.table.table src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_359/"},{"area":"samples","group":"Controls","title":"Cell Selection, Copy & Paste","text":"Shows cell selection, copy and paste interaction in the table.","code":"z2ui5_cl_smpc_app_360","terms":"table sap.ui.table selectcopypaste multiselectionplugin fixed busyindicator overflowtoolbar title toolbarspacer select item button sap.ui.table.table src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_360/"},{"area":"samples","group":"Controls","title":"Selection","text":"Selection example showing selection modes and selection behaviors of table.","code":"z2ui5_cl_smpc_app_361","terms":"table sap.ui.table selection label select item overflowtoolbar title toolbarspacer button switch column sap.ui.table.table src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_361/"},{"area":"samples","group":"Controls","title":"Sorting","text":"Example showing the different kinds of sorting capabilities","code":"z2ui5_cl_smpc_app_362","terms":"table sap.ui.table sorting overflowtoolbar title toolbarspacer button column label text link sap.ui.table.table src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_362/"},{"area":"samples","group":"Controls","title":"Table Freeze","text":"Example which shows table freeze with fixed columns","code":"z2ui5_cl_smpc_app_363","terms":"table sap.ui.table tablefreeze overflowtoolbar title toolbarspacer input button fixed column label text sap.ui.table.table src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_363/"},{"area":"samples","group":"Controls","title":"Basic OData TreeBinding","text":"Illustrates how to bind to data from an OData model without using $metadata annotations or navigation properties. Instead, treeAnnotationProperties is filled for the TreeBinding.","code":"z2ui5_cl_smpc_app_364","terms":"treetable tree table sap.ui.table treetable.basicodatatreebinding column label text sap.ui.table.treetable src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_364/"},{"area":"samples","group":"Controls","title":"Hierarchy Maintenance with a JSONModel","text":"Shows how hierarchy maintenance can be done using drag and drop.","code":"z2ui5_cl_smpc_app_365","terms":"treetable tree table sap.ui.table treetable.hierarchymaintenancejsontreebinding overflowtoolbar title button toolbarspacer dragdropinfo column label sap.ui.table.treetable src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_365/"},{"area":"samples","group":"Controls","title":"OData Annotations TreeBinding","text":"Illustrates how to bind to data from an OData model using $metadata annotations.","code":"z2ui5_cl_smpc_app_366","terms":"treetable tree table sap.ui.table treetable.odataannotationstreebinding column label text sap.ui.table.treetable src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_366/"},{"area":"samples","group":"Controls","title":"Input - Description","text":"This sample illustrates the usage of the description with input fields, e.g. description for units of measurements and currencies.","code":"z2ui5_cl_smpc_app_367","terms":"input sap.m inputdescription verticallayout invisibletext sap.m.input src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_367/"},{"area":"samples","group":"Controls","title":"Input - Password","text":"To make sure the password is not shown as clear text you set the 'type' of an input control to 'Password'.","code":"z2ui5_cl_smpc_app_368","terms":"input sap.m inputpassword verticallayout label sap.m.input src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_368/"},{"area":"samples","group":"Controls","title":"Input - Suggestions wrapping","text":"Suggestions wrap automatically when longer then the dropdown width","code":"z2ui5_cl_smpc_app_369","terms":"input sap.m inputwrapping verticallayout label item sap.m.input src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_369/"},{"area":"samples","group":"Controls","title":"TextArea - Growing","text":"Since 1.38 the growing property of sap.m.TextArea gives the ability of a control to automatically grow and shrink dynamically with its content.","code":"z2ui5_cl_smpc_app_370","terms":"textarea text area sap.m textareagrowing verticallayout messagestrip simpleform label sap.m.textarea src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_370/"},{"area":"samples","group":"Controls","title":"TextArea - Value States","text":"This sample illustrates the different value states of the sap.m.TextArea control.","code":"z2ui5_cl_smpc_app_371","terms":"textarea text area sap.m textareavaluestates verticallayout sap.m.textarea src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_371/"},{"area":"samples","group":"Controls","title":"Text - Max Lines","text":"The Text control has a property to limit the number of lines for wrapping texts.","code":"z2ui5_cl_smpc_app_372","terms":"text sap.m textmaxlines verticallayout messagestrip sap.m.text src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_372/"},{"area":"samples","group":"Controls","title":"Select - Validation states","text":"Visualizes the validation state of the control, for example, Error, Warning and Success.","code":"z2ui5_cl_smpc_app_373","terms":"select sap.m selectvaluestate hbox label item sap.m.select src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_373/"},{"area":"samples","group":"Controls","title":"Select - Wrapping text","text":"Illustrates how the text in items wrap.","code":"z2ui5_cl_smpc_app_374","terms":"select sap.m selectwithwrappeditemtext item sap.m.select src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_374/"},{"area":"samples","group":"Controls","title":"Step Input - Value States","text":"This example shows different StepInput value states.","code":"z2ui5_cl_smpc_app_375","terms":"stepinput step input sap.m stepinputvaluestate flexbox vbox label sap.m.stepinput src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_375/"},{"area":"samples","group":"Controls","title":"Standard List Item - Wrapping","text":"This sample demonstrates the wrapping behavior of the title text and the description text. In desktop mode, the character limit is set to 300 characters, whereas in the phone mode, the character limit is set to 100 characters.","code":"z2ui5_cl_smpc_app_376","terms":"standardlistitem standard list item sap.m standardlistitemwrapping toolbar title toolbarspacer togglebutton sap.m.standardlistitem src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_376/"},{"area":"samples","group":"Controls","title":"Icon Tab Bar - Filter","text":"In this example, the Icon Tab Bar is used to apply filters on a table and display the count of the items for each view.","code":"z2ui5_cl_smpc_app_377","terms":"icontabbar icon tab bar sap.m icontabfilter icontabseparator table overflowtoolbar label column text sap.m.icontabbar src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_377/"},{"area":"samples","group":"Controls","title":"Icon Tab Bar - Text and Count","text":"In this example, the Icon Tab Bar tabs display text and corresponding count.","code":"z2ui5_cl_smpc_app_378","terms":"icontabbar icon tab bar sap.m icontabbarfiori2 icontabfilter text sap.m.icontabbar src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_378/"},{"area":"samples","group":"Controls","title":"Icon Tab Bar - Inline Mode","text":"In this example, the Icon Tab Bar tabs display the text and the count in one line.","code":"z2ui5_cl_smpc_app_379","terms":"icontabbar icon tab bar sap.m icontabbarinlinemode icontabfilter text sap.m.icontabbar src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_379/"},{"area":"samples","group":"Controls","title":"Icon Tab Bar - Icons Only","text":"In this example, the Icon Tab Bar tabs display icons only.","code":"z2ui5_cl_smpc_app_380","terms":"icontabbar icon tab bar sap.m icontabbarmulti icontabfilter text sap.m.icontabbar src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_380/"},{"area":"samples","group":"Controls","title":"Icon Tab Bar - Text Only","text":"In this example, the Icon Tab Bar tabs display text only.","code":"z2ui5_cl_smpc_app_381","terms":"icontabbar icon tab bar sap.m icontabbarnoicons icontabfilter text sap.m.icontabbar src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_381/"},{"area":"samples","group":"Controls","title":"Icon Tab Bar - Sub tabs","text":"This sample illustrates nested tabs with or without own content in their root-level tab.","code":"z2ui5_cl_smpc_app_382","terms":"icontabbar icon tab bar sap.m icontabbarsubtabs label icontabfilter text sap.m.icontabbar src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_382/"},{"area":"samples","group":"Controls","title":"Icon Tab Bar - Separator","text":"This is an example how to use separators in the Icon Tab Bar. You can choose an icon as a separator or use the default vertical line.","code":"z2ui5_cl_smpc_app_383","terms":"icontabbar icon tab bar sap.m icontabseparator label icontabfilter text sap.m.icontabbar src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_383/"},{"area":"samples","group":"Controls","title":"ComboBox - Suggestions wrapping","text":"Suggestions wrap automatically when longer then the dropdown width","code":"z2ui5_cl_smpc_app_384","terms":"combobox combo box sap.m comboboxwrapping verticallayout label item sap.m.combobox src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_384/"},{"area":"samples","group":"Controls","title":"MultiComboBox - Suggestions wrapping","text":"Suggestions wrap automatically when longer then the dropdown width","code":"z2ui5_cl_smpc_app_385","terms":"multicombobox multi combo box sap.m multicomboboxwrapping verticallayout label item sap.m.multicombobox src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_385/"},{"area":"samples","group":"Controls","title":"MultiInput - Value States","text":"This sample illustrates the different value states of the sap.m.MultiInput control.","code":"z2ui5_cl_smpc_app_386","terms":"multiinput multi input sap.m multiinputvaluestates verticallayout label sap.m.multiinput src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_386/"},{"area":"samples","group":"Controls","title":"MultiInput - Suggestions wrapping","text":"Suggestions wrap automatically when longer then the dropdown width","code":"z2ui5_cl_smpc_app_387","terms":"multiinput multi input sap.m multiinputwrapping verticallayout label item sap.m.multiinput src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_387/"},{"area":"samples","group":"Controls","title":"Feed and News Tile","text":"Shows Feed Tile and News Tile samples that can contain feed content, news content, and a footer.","code":"z2ui5_cl_smpc_app_388","terms":"generictile generic tile sap.m generictileasfeedtile html tilecontent feedcontent slidetile newscontent sap.m.generictile src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_388/"},{"area":"samples","group":"Controls","title":"Monitor Tile","text":"Shows Monitor Tile samples that can contain header, subheader, icon, key value, unit, and a footer.","code":"z2ui5_cl_smpc_app_389","terms":"generictile generic tile sap.m generictileasmonitortile html tilecontent numericcontent sap.m.generictile src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_389/"},{"area":"samples","group":"Controls","title":"Numeric Content Without Margins","text":"This is an example of the NumericContent that contains no margins, so the control is aligned to the left and to the top without any margins.","code":"z2ui5_cl_smpc_app_390","terms":"numericcontent numeric content sap.m numericcontentwithoutmargin label sap.m.numericcontent src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_390/"},{"area":"samples","group":"Controls","title":"Segmented Button in Input List Item","text":"Segmented Button used in Input List Item component","code":"z2ui5_cl_smpc_app_391","terms":"segmentedbutton segmented button sap.m segmentedbuttonli list inputlistitem segmentedbuttonitem sap.m.segmentedbutton src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_391/"},{"area":"samples","group":"Controls","title":"Flex Box - Basic Alignment","text":"Flex Box items can be placed in different areas using the justifyContent and alignItem properties.","code":"z2ui5_cl_smpc_app_392","terms":"flexbox flex box sap.m flexboxbasicalignment vbox panel button sap.m.flexbox src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_392/"},{"area":"samples","group":"Controls","title":"Flex Box - Direction & Order","text":"You can influence the direction and order of elements in horizontal and vertical Flex Box controls with the direction property.","code":"z2ui5_cl_smpc_app_393","terms":"flexbox flex box sap.m flexboxdirectionorder vbox panel button flexitemdata sap.m.flexbox src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_393/"},{"area":"samples","group":"Controls","title":"Flex Box - Opposing Alignment","text":"In this Flex Box the items are aligned at opposing ends of the container with justifyContent set to 'SpaceBetween'.","code":"z2ui5_cl_smpc_app_394","terms":"flexbox flex box sap.m flexboxopposingalignment panel button sap.m.flexbox src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_394/"},{"area":"samples","group":"Controls","title":"Placing a Title in OverflowToolbar/Toolbar","text":"The sap.m.Title control can be used to place a title inside an OverflowToolbar/Toolbar.","code":"z2ui5_cl_smpc_app_395","terms":"overflowtoolbar overflow toolbar sap.m titletoolbar title toolbarspacer button sap.m.overflowtoolbar src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_395/"},{"area":"samples","group":"Controls","title":"OverflowToolbar - Alignment","text":"OverflowToolbar and Toolbar are often used for left/right alignment. This is easily achieved with ToolbarSpacer.","code":"z2ui5_cl_smpc_app_396","terms":"overflowtoolbar overflow toolbar sap.m toolbaralignment invisibletext messagestrip button toolbarspacer checkbox radiobutton input sap.m.overflowtoolbar src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_396/"},{"area":"samples","group":"Controls","title":"Panel","text":"Panels are helpful to group custom content. They can be decorated with header and info toolbars.","code":"z2ui5_cl_smpc_app_397","terms":"panel sap.m overflowtoolbar title horizontallayout image text toolbarspacer button sap.m.panel src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_397/"},{"area":"samples","group":"Controls","title":"Carousel","text":"A sample of a Carousel that contains images.","code":"z2ui5_cl_smpc_app_398","terms":"carousel sap.m title image sap.m.carousel src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_398/"},{"area":"samples","group":"Controls","title":"Image","text":"Images are faster than words and attract people's attention. Images can also have an active state or be used in SVG format.","code":"z2ui5_cl_smpc_app_399","terms":"image sap.m vbox hbox text sap.m.image src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_399/"},{"area":"samples","group":"Controls","title":"Object Header - with Circle-shaped Image","text":"An Object Header can set shape of the image by using 'imageShape' property. The shapes could be Square (by default) and Circle. Note: This example shows the image inside ObjectHeader with the responsive property set to true.","code":"z2ui5_cl_smpc_app_400","terms":"objectheader object header sap.m objectheadercircleimage objectattribute sap.m.objectheader src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_400/"},{"area":"samples","group":"Controls","title":"Object Page with Title on top","text":"Object Page sample showing a layout with subsection titles on top. This is the default layout. The sample also shows the 'Edit header' button in the Header Content area.","code":"z2ui5_cl_smpc_app_401","terms":"objectpagelayout object layout sap.uxap objectpageonjson objectpagedynamicheadertitle breadcrumbs link hbox title objectmarker flexbox sap.uxap.objectpagelayout src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_401/"},{"area":"samples","group":"Controls","title":"Object Page with Header Container","text":"ObjectPage sample with Header Container","code":"z2ui5_cl_smpc_app_402","terms":"objectpagelayout object layout sap.uxap objectpagewithheadercontainer objectpagedynamicheadertitle title hbox vbox avatar label button sap.uxap.objectpagelayout src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_402/"},{"area":"samples","group":"Controls","title":"Negative Margins","text":"Use standard negative margin classes 'sapUiTinyNegativeMarginBeginEnd', 'sapUiSmallNegativeMarginBeginEnd', 'sapUiMediumNegativeMarginBeginEnd' or 'sapUiLargeNegativeMarginBeginEnd' to remove 0.5rem, 1rem, 2rem, or 3rem margin to the left...","code":"z2ui5_cl_smpc_app_403","terms":"standardmargins standard margins sap.ui.core standardnegativemarginstwosided toolbar icon text panel sap.ui.core.standardmargins src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_403/"},{"area":"samples","group":"Controls","title":"Time Picker - Value States","text":"This example shows different TimePicker value states.","code":"z2ui5_cl_smpc_app_404","terms":"timepicker time picker sap.m timepickervaluestate flexbox vbox label sap.m.timepicker src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_404/"},{"area":"samples","group":"Controls","title":"Flexible sizing - Toolbar","text":"This page shows flexible sizing with a Toolbar. The upper part extends with its content, but doesn't react to viewport changes. The lower part reacts to the viewport size. The table inside takes the available space.","code":"z2ui5_cl_smpc_app_405","terms":"sap.m pagelistreporttoolbar vbox simpleform title label text flexitemdata analyticaltable auto overflowtoolbar toolbarspacer sap.m.page src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_405/"},{"area":"samples","group":"Controls","title":"Flexible sizing - Icon Tab Bar","text":"This page shows flexible sizing with an Icon Tab Bar: The upper part extends with its content, but doesn't react to viewport changes. The Icon Tab Bar reacts to the viewport size. The table inside takes the available space.","code":"z2ui5_cl_smpc_app_406","terms":"sap.m pagelistreporticontabbar vbox simpleform title label text flexitemdata icontabbar icontabfilter analyticaltable auto sap.m.page src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_406/"},{"area":"samples","group":"Controls","title":"Side Navigation with Search","text":"SideNavigation with a search field in the filter section and filterable navigation items.","code":"z2ui5_cl_smpc_app_407","terms":"sidenavigation side navigation sap.tnt sidenavigationsearch toolpage toolheader button image title text toolbarspacer sap.tnt.sidenavigation src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_407/"},{"area":"samples","group":"Controls","title":"ObjectPage Blockbase","text":"This example shows the different layout of the blocks based on their ColumnLayout.","code":"z2ui5_cl_smpc_app_408","terms":"blockbase block base sap.uxap objectpageblockbase objectpagelayout objectpageheader objectpageheaderactionbutton objectpagesection objectpagesubsection html text sap.uxap.blockbase src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_408/"},{"area":"samples","group":"Controls","title":"Block in a block","text":"Uses a block in a view of another block","code":"z2ui5_cl_smpc_app_409","terms":"blockbase block base sap.uxap blockbaseblockinblock objectpagelayout objectpageheader objectpagesection objectpagesubsection html sap.uxap.blockbase src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_409/"},{"area":"samples","group":"Controls","title":"Eventing blocks","text":"Uses of a block that is firing a dummy event","code":"z2ui5_cl_smpc_app_410","terms":"blockbase block base sap.uxap blockbaseeventing html objectpagelayout objectpageheader objectpagesection objectpagesubsection vbox button sap.uxap.blockbase src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_410/"},{"area":"samples","group":"Controls","title":"Model Mapping","text":"Use of dynamic model mapping","code":"z2ui5_cl_smpc_app_411","terms":"modelmapping model mapping sap.uxap mpmodelmapping simpleform title text sap.uxap.modelmapping src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_411/"},{"area":"samples","group":"Controls","title":"Object Page Header with Links, Rating Indicator, and Object Status","text":"ObjectPage sample with header content arranged using containers, called facets, Links, RatingIndicator and ObjectStatus.","code":"z2ui5_cl_smpc_app_412","terms":"headerfacetpattern header facet pattern sap.uxap objectpagewithlinksandobjectstatus objectpagelayout objectpagedynamicheadertitle title hbox vbox avatar sap.uxap.headerfacetpattern src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_412/"},{"area":"samples","group":"Controls","title":"ObjectPageHeader with placeholder","text":"This is an example of ObjectPageHeader using the showPlaceholder property.","code":"z2ui5_cl_smpc_app_413","terms":"objectpageheader object header sap.uxap profileobjectpageheader objectpagelayout bar button text objectpageheaderactionbutton verticallayout objectstatus sap.uxap.objectpageheader src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_413/"},{"area":"samples","group":"Controls","title":"ObjectPageHeader options","text":"This is a different example of ObjectPageHeader hiding the headerTitle area entirely until user scrolls down.","code":"z2ui5_cl_smpc_app_414","terms":"objectpageheader object header sap.uxap alternativeprofileobjectpageheader objectpagelayout objectpageheaderactionbutton verticallayout link label horizontallayout image sap.uxap.objectpageheader src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_414/"},{"area":"samples","group":"Controls","title":"ObjectPageHeader with all controls","text":"This is an example of an ObjectPageHeader containing all possible controls in it.","code":"z2ui5_cl_smpc_app_415","terms":"objectpageheader object header sap.uxap objectpageheaderwithallcontrols objectpagelayout objectpageheaderactionbutton breadcrumbs link verticallayout objectstatus text sap.uxap.objectpageheader src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_415/"},{"area":"samples","group":"Controls","title":"ObjectPage as a child page","text":"This is an example of an ObjectPage Child page.","code":"z2ui5_cl_smpc_app_416","terms":"objectpageheader object header sap.uxap childobjectpage objectpagelayout objectpageheaderactionbutton breadcrumbs link verticallayout objectstatus text sap.uxap.objectpageheader src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_416/"},{"area":"samples","group":"Controls","title":"ObjectPage with DynamicSideContent Button","text":"The sample shows Object Page inside a main content of DynamicSideContent. The ObjectPageHeader has property DynamicSideContentButton set to true which is used to show the side panel of DynamicSideContent.","code":"z2ui5_cl_smpc_app_417","terms":"objectpageheader object header sap.uxap objectpagedynamicsidecontentbtn html dynamicsidecontent objectpagelayout button objectpageheaderactionbutton verticallayout link sap.uxap.objectpageheader src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_417/"},{"area":"samples","group":"Controls","title":"Title Properties","text":"This sample shows the different behaviors of a title.","code":"z2ui5_cl_smpc_app_418","terms":"title sap.m titlewrapping simpleform label switch slider panel messagestrip sap.m.title src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_418/"},{"area":"samples","group":"Controls","title":"Menu with Selectable Items","text":"Some menu items can be added to groups to allow single or multiple item selection.","code":"z2ui5_cl_smpc_app_419","terms":"menu sap.m menuselectable vbox button menuitem menuitemgroup sap.m.menu src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_419/"},{"area":"samples","group":"Controls","title":"Search Field - Suggestions","text":"Add suggestion capabilities to a basic Search Field.","code":"z2ui5_cl_smpc_app_420","terms":"searchfield search field sap.m searchfieldsuggestions label suggestionitem sap.m.searchfield src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_420/"},{"area":"samples","group":"Controls","title":"QuickViewCard Scroll Example","text":"QuickViewCard embedded in container with scroll bar","code":"z2ui5_cl_smpc_app_421","terms":"quickviewcard quick card sap.m quickviewcardscrollbar button grid label griddata switch panel quickviewpage sap.m.quickviewcard src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_421/"},{"area":"samples","group":"Controls","title":"Select Dialog Lazy Loading","text":"Select Dialog lazy loading example with JSON model.","code":"z2ui5_cl_smpc_app_422","terms":"selectdialog select dialog sap.m selectdialoglazyloading button standardlistitem sap.m.selectdialog src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_422/"},{"area":"samples","group":"Controls","title":"Segmented Button Content Modes","text":"Segmented Button different Content Modes","code":"z2ui5_cl_smpc_app_423","terms":"segmentedbutton segmented button sap.m segmentedbuttoncontentmodes segmentedbuttonitem sap.m.segmentedbutton src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_423/"},{"area":"samples","group":"Controls","title":"OverflowToolbar - Active","text":"Making an OverflowToolbar or a Toolbar active allows them to react to the click event.","code":"z2ui5_cl_smpc_app_424","terms":"overflowtoolbar overflow toolbar sap.m toolbaractive checkbox text toolbarspacer icon sap.m.overflowtoolbar src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_424/"},{"area":"samples","group":"Controls","title":"OverflowToolbar - Enabled","text":"The Enabled property can be used to enable or disable all the controls inside the OverflowToolbar/Toolbar.","code":"z2ui5_cl_smpc_app_425","terms":"overflowtoolbar overflow toolbar sap.m toolbarenabled invisibletext checkbox button toolbarspacer input radiobutton sap.m.overflowtoolbar src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_425/"},{"area":"samples","group":"Controls","title":"Flex Box - Equal Height Cols","text":"You can create balanced areas with Flex Box, such as these columns with equal height regardless of content.","code":"z2ui5_cl_smpc_app_426","terms":"flexbox flex box sap.m flexboxcols html verticallayout text flexitemdata sap.m.flexbox src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_426/"},{"area":"samples","group":"Controls","title":"Carousel Without Pages","text":"When the carousel has no pages loaded or provided illustrated message will be shown.","code":"z2ui5_cl_smpc_app_427","terms":"carousel sap.m carouselemptymessages hbox panel slider title sap.m.carousel src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_427/"},{"area":"samples","group":"Controls","title":"Header Container Without Dividers","text":"The Header Container without divider lines.","code":"z2ui5_cl_smpc_app_428","terms":"headercontainer header container sap.m headercontainernodividers numericcontent invisibletext sap.m.headercontainer src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_428/"},{"area":"samples","group":"Controls","title":"List - Navigation Indication","text":"If only a subset of the list items are navigable you should indicate those by setting their 'type' to 'Navigation'. This displays an navigation arrow. Do not show arrows if all items are navigable.","code":"z2ui5_cl_smpc_app_429","terms":"list sap.m listnavtype standardlistitem sap.m.list src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_429/"},{"area":"samples","group":"Controls","title":"Single-Sided Margins","text":"Clear the space to the left, right, top or bottom of your control.","code":"z2ui5_cl_smpc_app_430","terms":"standardmargins standard margins sap.ui.core standardmarginssinglesided panel text sap.ui.core.standardmargins src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_430/"},{"area":"samples","group":"Controls","title":"Responsive Container Content Padding","text":"Apply the CSS class 'sapUiResponsiveContentPadding' on a UI5 container control to add a responsive padding based on the screen size around the container content area.","code":"z2ui5_cl_smpc_app_431","terms":"containerpadding container padding sap.ui.core containerresponsivepadding messagestrip panel toolbar text toolbarspacer button horizontallayout sap.ui.core.containerpadding src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_431/"},{"area":"samples","group":"Controls","title":"Tokenizer Multi-line and Clear All","text":"Tokenizer with Multi-line support and Clear All button","code":"z2ui5_cl_smpc_app_432","terms":"tokenizer sap.m tokenizermultiline verticallayout text token sap.m.tokenizer src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_432/"},{"area":"samples","group":"Controls","title":"Container Content Padding and Margins","text":"By combining the margin and padding concepts you can flexibly design your application layout without having to write any custom CSS.","code":"z2ui5_cl_smpc_app_433","terms":"containerpadding container padding sap.ui.core containerpaddingandmargin messagestrip scrollcontainer horizontallayout image flexitemdata sap.ui.core.containerpadding src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_433/"},{"area":"samples","group":"Controls","title":"Container Content Padding","text":"Apply the CSS class 'sapUiContentPadding' on a UI5 container control to add a default padding of 1rem (16px) around the container content area.","code":"z2ui5_cl_smpc_app_434","terms":"containerpadding container padding sap.ui.core messagestrip button dialog text sap.ui.core.containerpadding src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_434/"},{"area":"samples","group":"Controls","title":"Progress Indicator With Announcement","text":"Announce the progress of the ProgressIndicator.","code":"z2ui5_cl_smpc_app_435","terms":"progressindicator progress indicator sap.m progressindicatorwithannouncement verticallayout text flexbox button sap.m.progressindicator src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_435/"},{"area":"samples","group":"Controls","title":"Tree - Icon & Context Menu","text":"Tree item with icon. This example also shows the context menu for the items in the Tree control.","code":"z2ui5_cl_smpc_app_436","terms":"tree sap.m treeicon overflowtoolbar title toolbarspacer togglebutton menu menuitem sap.m.tree src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_436/"},{"area":"samples","group":"Controls","title":"Tree - Selection","text":"This example shows different selection modes of Tree.","code":"z2ui5_cl_smpc_app_437","terms":"tree sap.m treeselection overflowtoolbar title toolbarspacer select item standardtreeitem sap.m.tree src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_437/"},{"area":"samples","group":"Controls","title":"Responsive Refresh","text":"An 'Responsive Refresh' can be achieved by the combination of a Search Field's refresh button and a Pull To Refresh, both of which appear depending on whether the device is touch-enabled. A growing stream of backend data is simulated here.","code":"z2ui5_cl_smpc_app_438","terms":"pulltorefresh pull refresh sap.m refreshresponsive bar searchfield list standardlistitem sap.m.pulltorefresh src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_438/"},{"area":"samples","group":"Controls","title":"Text - Empty Indicator","text":"The Text control has a property allowing an empty text indicator to be displayed.","code":"z2ui5_cl_smpc_app_439","terms":"text sap.m textemptyindicator panel simpleform label switch sap.m.text src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_439/"},{"area":"samples","group":"Controls","title":"Menu with EndContent Items","text":"EndContent (Button and/or Icon) can be added to some of the menu items.","code":"z2ui5_cl_smpc_app_440","terms":"menu sap.m menuendcontent vbox button menuitem sap.m.menu src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_440/"},{"area":"samples","group":"Controls","title":"Breadcrumbs sample without current page","text":"The breadcrumb shows the position of the object page in the application hiearchy, without the current page. Use this breadcrumb for the object page only.","code":"z2ui5_cl_smpc_app_441","terms":"breadcrumbs sap.m breadcrumbswithoutcurrentpage verticallayout link hbox label select item sap.m.breadcrumbs src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_441/"},{"area":"samples","group":"Controls","title":"PDF Viewer - Two PDF Documents","text":"Two PDF viewer frames displayed side by side. The second frame has the property isTrustedSource set to false which opens the PDF viewer with the displayType set to Link","code":"z2ui5_cl_smpc_app_442","terms":"pdfviewer sap.m pdfviewermultiple scrollcontainer flexbox button flexitemdata sap.m.pdfviewer src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_442/"},{"area":"samples","group":"Controls","title":"Text - Render Whitespace","text":"The Text control has a property allowing browsers to render whitespace and tabs.","code":"z2ui5_cl_smpc_app_443","terms":"text sap.m textrenderwhitespace simpleform label switch slider panel sap.m.text src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_443/"},{"area":"samples","group":"Controls","title":"Notification List Group with max number of notifications reached","text":"Notification List Group with max number of notifications reached. The group will render the max amount of notificatons, depending on device type allowed and then show a warning messge.","code":"z2ui5_cl_smpc_app_444","terms":"notificationlistgroup notification list group sap.m maxnumberofnotificationsreached vbox flexitemdata button notificationlistitem sap.m.notificationlistgroup src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_444/"},{"area":"samples","group":"Controls","title":"Text - Hyphenation","text":"The Text control has a property allowing hyphenation.","code":"z2ui5_cl_smpc_app_445","terms":"text sap.m texthyphenation simpleform label switch slider panel title blocklayout blocklayoutrow blocklayoutcell sap.m.text src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_445/"},{"area":"samples","group":"Controls","title":"Link - Subtle","text":"Subtle links should be used to indicate less important links in tables with a large number of links. In this example all columns contain links, only the first column is non-subtle.","code":"z2ui5_cl_smpc_app_446","terms":"link sap.m linksubtle table toolbar title column text columnlistitem objectidentifier sap.m.link src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_446/"},{"area":"samples","group":"Controls","title":"Message Box Details","text":"MessageBox with the option to display detailed information.","code":"z2ui5_cl_smpc_app_447","terms":"messagebox message box sap.m messageboxinfo verticallayout button sap.m.messagebox src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_447/"},{"area":"samples","group":"Controls","title":"Semantic Page using Draft Indicator","text":"Integration of Draft Indicator inside Semantic Page","code":"z2ui5_cl_smpc_app_448","terms":"draftindicator draft indicator sap.m semanticpagedraftindicator fullscreenpage addaction flagaction favoriteaction messagesindicator messagepopover messageitem sap.m.draftindicator src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_448/"},{"area":"samples","group":"Controls","title":"Flexible Column Layout Landmark Info For Columns","text":"Flexible Column Layout where the first and the last columns have custom Landmark Info","code":"z2ui5_cl_smpc_app_449","terms":"flexiblecolumnlayout flexible column layout sap.f flexiblecolumnlayoutlandmarkinfo flexiblecolumnlayoutaccessiblelandmarkinfo button vbox sap.f.flexiblecolumnlayout src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_449/"},{"area":"samples","group":"Controls","title":"Flexible Column Layout Landmark Info For Arrows","text":"Flexible Column Layout where the all the arrows have custom Landmark Info","code":"z2ui5_cl_smpc_app_450","terms":"flexiblecolumnlayout flexible column layout sap.f flexiblecolumnlayoutlandmarkinfoarrow flexiblecolumnlayoutaccessiblelandmarkinfo button vbox sap.f.flexiblecolumnlayout src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_450/"},{"area":"samples","group":"Controls","title":"Tab Container - with icons and additional text","text":"This example shows how you can add additional text and an Icon to the tabs in TabContainer.","code":"z2ui5_cl_smpc_app_451","terms":"tabcontainer tab container sap.m tabcontainericons tabcontaineritem form title responsivegridlayout formcontainer formelement text sap.m.tabcontainer src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_451/"},{"area":"samples","group":"Controls","title":"Custom Message Strip Design","text":"Demonstrates MessageStrips with different colorSet and colorScheme properties.","code":"z2ui5_cl_smpc_app_452","terms":"messagestrip message strip sap.m custommessagestripdesign verticallayout panel horizontallayout label select item sap.m.messagestrip src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_452/"},{"area":"samples","group":"Controls","title":"Object Header Responsive I","text":"This is a responsive Object Header with a Title, 2 Statuses/Attributes rendered next to the title in a fullScreenOptimized mode (fullScreenOptimized = true).","code":"z2ui5_cl_smpc_app_453","terms":"objectattribute object attribute sap.m objectheaderresponsivei objectheader objectstatus objectmarker icontabbar icontabfilter verticallayout image sap.m.objectattribute src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_453/"},{"area":"samples","group":"Controls","title":"Table Select Dialog Growing","text":"Table Select Dialog can be created with property growing set to true or false.","code":"z2ui5_cl_smpc_app_454","terms":"tableselectdialog table select dialog sap.m tableselectdialoggrowing verticallayout button customdata column text columnlistitem sap.m.tableselectdialog src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_454/"},{"area":"samples","group":"Controls","title":"ComboBox - Clear Icon","text":"The combo box control can show 'clear' icon, which when pressed will remove the user's input and selected key.","code":"z2ui5_cl_smpc_app_455","terms":"combobox combo box sap.m comboboxclearicon item sap.m.combobox src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_455/"},{"area":"samples","group":"Controls","title":"Input - Assisted Two Values","text":"This example shows how to easily implement an assisted input with two-value suggestions.","code":"z2ui5_cl_smpc_app_456","terms":"input sap.m inputassistedtwovalues verticallayout label listitem sap.m.input src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_456/"},{"area":"samples","group":"Controls","title":"MultiInput Data Binding","text":"MultiInput data binding allows data to be bound to tokens in MultiInput.","code":"z2ui5_cl_smpc_app_457","terms":"multiinput multi input sap.m multiinputdatabinding verticallayout label token sap.m.multiinput src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_457/"},{"area":"samples","group":"Controls","title":"MultiComboBox - Two columns layout","text":"Use the dropdown list with two columns layout if you need to display additional information to your options, like e.g. currencies to countries or abbreviations to systems.","code":"z2ui5_cl_smpc_app_458","terms":"multicombobox multi combo box sap.m multicomboboxtwocolumnslayout verticallayout listitem sap.m.multicombobox src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_458/"},{"area":"samples","group":"Controls","title":"MultiComboBox - Filtering and Suggestions","text":"The default filtering is 'starts with per term', which filters by the beginning of every word in every column.","code":"z2ui5_cl_smpc_app_459","terms":"multicombobox multi combo box sap.m multicomboboxdefaultfiltering verticallayout label item sap.m.multicombobox src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_459/"},{"area":"samples","group":"Controls","title":"Input - Suggestions - Custom","text":"The default filtering for the suggestionItems aggregation uses a 'begins with' style operator. You can override this with your own custom filter function using the Input control's setFilterFunction method.","code":"z2ui5_cl_smpc_app_460","terms":"input sap.m inputsuggestionscustomfilter verticallayout label item sap.m.input src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_460/"},{"area":"samples","group":"Controls","title":"MultiInput with Max Tokens","text":"Number of Tokens in MultiInput cannot exceed the maxToken number.","code":"z2ui5_cl_smpc_app_461","terms":"multiinput multi input sap.m multiinputmaxtokens verticallayout label item sap.m.multiinput src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_461/"},{"area":"samples","group":"Controls","title":"Input - Value Update","text":"Since 1.24 the value property of sap.m.Input is not updated on every keystroke, but first when the user presses Enter or leaves the input. The change was necessary to fully support the standard UI5 data binding with formatters and types.","code":"z2ui5_cl_smpc_app_462","terms":"input sap.m inputvalueupdate simpleform label switch text sap.m.input src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_462/"},{"area":"samples","group":"Controls","title":"Combo box - Default Filtering","text":"The default filtering is 'starts with per term', which filters by the beginning of every word in every column. Autocomplete (type-ahead) works only for the first column, the leading value.","code":"z2ui5_cl_smpc_app_463","terms":"combobox combo box sap.m comboboxdefaultfiltering vbox label listitem sap.m.combobox src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_463/"},{"area":"samples","group":"Controls","title":"Two-Sided Margins","text":"Clear the space to the left and right, top and bottom of your control.","code":"z2ui5_cl_smpc_app_464","terms":"standardmargins standard margins sap.ui.core standardmarginstwosided text panel sap.ui.core.standardmargins src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_464/"},{"area":"samples","group":"Controls","title":"Icon Tab Bar - Overflow Behavior","text":"In this example when there is not enough space for all tab items to fit on the screen, the rest are displayed in an overflow select list for easier selection.","code":"z2ui5_cl_smpc_app_465","terms":"icontabbar icon tab bar sap.m icontabbaroverflowselectlist icontabfilter text sap.m.icontabbar src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_465/"},{"area":"samples","group":"Controls","title":"Icon Tab Bar - Start and End Overflow","text":"This sample illustrates the start and end overflow mode of the Icon Tab Bar.","code":"z2ui5_cl_smpc_app_466","terms":"icontabbar icon tab bar sap.m icontabbarstartandendoverflow icontabfilter text sap.m.icontabbar src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_466/"},{"area":"samples","group":"Controls","title":"Icon Tab Bar - Inline mode tab icons","text":"This sample illustrates tab icons for inline mode.","code":"z2ui5_cl_smpc_app_467","terms":"icontabbar icon tab bar sap.m icontabbarinlineicons icontabfilter text sap.m.icontabbar src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_467/"},{"area":"samples","group":"Controls","title":"Standard List Item - Icon","text":"This list item offers a standardized user interface for list content with title, description and icon.","code":"z2ui5_cl_smpc_app_468","terms":"standardlistitem standard list item sap.m standardlistitemicon sap.m.standardlistitem src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_468/"},{"area":"samples","group":"Controls","title":"Collapsing Margins","text":"See how adjacent margins collapse to a single margin.","code":"z2ui5_cl_smpc_app_469","terms":"standardmargins standard margins sap.ui.core standardmarginscollapse panel text sap.ui.core.standardmargins src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_469/"},{"area":"samples","group":"Controls","title":"Combo box - Custom filtering \"Contains\"","text":"You can override the default filtering \"Starts with per term\" with your own filter function using the setFilterFunction method. The \"Contains\" approach searches everywhere in the entries.","code":"z2ui5_cl_smpc_app_470","terms":"combobox combo box sap.m comboboxfilteringcontains vbox label listitem sap.m.combobox src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_470/"},{"area":"samples","group":"Controls","title":"Combo box - Custom filtering \"Starts with\"","text":"You can override the default filtering \"Starts with per term\" with your own filter function using the setFilterFunction method. The \"Starts with\" approach searches only in the beginning of the entries in both columns.","code":"z2ui5_cl_smpc_app_471","terms":"combobox combo box sap.m comboboxfilteringstartswith vbox label listitem sap.m.combobox src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_471/"},{"area":"samples","group":"Controls","title":"Responsive Margins","text":"Clear the space around your control, where the margin depends on the device your are using.","code":"z2ui5_cl_smpc_app_472","terms":"standardmargins standard margins sap.ui.core standardmarginsresponsive panel text sap.ui.core.standardmargins src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_472/"},{"area":"samples","group":"Controls","title":"Input - Suggestions - Dynamic","text":"With the Input control's suggest event, you can handle the suggestionItems yourself dynamically.","code":"z2ui5_cl_smpc_app_473","terms":"input sap.m inputsuggestionsdynamic verticallayout label item sap.m.input src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_473/"},{"area":"samples","group":"Controls","title":"Flex Box - Navigation Examples","text":"Here is an example of how you can use navigation items as unordered list items in a Flex Box.","code":"z2ui5_cl_smpc_app_474","terms":"flexbox flex box sap.m flexboxnav html vbox panel flexitemdata sap.m.flexbox src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_474/"},{"area":"samples","group":"Controls","title":"ComboBox - Validation","text":"The combo box control could be restricted to allow selection only from the items in the list.","code":"z2ui5_cl_smpc_app_475","terms":"combobox combo box sap.m comboboxvalidation verticallayout label item sap.m.combobox src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_475/"},{"area":"samples","group":"Controls","title":"Object Header Responsive VI","text":"A responsive Object Header whose intro and title are active links to sap.com, with a Currency-typed number, one attribute, a status and two markers.","code":"z2ui5_cl_smpc_app_476","terms":"objectheader object header sap.m objectheaderresponsivevi objectattribute objectstatus objectmarker sap.m.objectheader src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_476/"},{"area":"samples","group":"Controls","title":"Header Container with Object Header","text":"The Header Container combined with sap.m.ObjectHeader.","code":"z2ui5_cl_smpc_app_477","terms":"headercontainer header container sap.m headercontaineroh objectheader objectattribute objectstatus objectmarker numericcontent sap.m.headercontainer src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_477/"},{"area":"samples","group":"Controls","title":"MultiInput Custom Filtering","text":"The default filtering for the suggestionItems aggregation uses is a 'starts with per term' style operator. You can overwrite this with your own custom filter function using the Input control's setFilterFunction method.","code":"z2ui5_cl_smpc_app_478","terms":"multiinput multi input sap.m multiinputcustomfiltering verticallayout label item sap.m.multiinput src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_478/"},{"area":"samples","group":"Controls","title":"Combo box - Search in both columns","text":"Combo box dropdown list with search functionality which checks both columns. When you need to display additional information on your options, like e.g. keys of countries or system abbreviations, and want to search in those as well.","code":"z2ui5_cl_smpc_app_479","terms":"combobox combo box sap.m comboboxsearchboth verticallayout listitem label text sap.m.combobox src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_479/"},{"area":"samples","group":"Controls","title":"List - Unread Indication","text":"With the Unread Indicator you can highlight new items making it easier for the user to discover them.","code":"z2ui5_cl_smpc_app_480","terms":"list sap.m listunread standardlistitem sap.m.list src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_480/"},{"area":"samples","group":"Controls","title":"MultiComboBox - Custom Filtering and Suggestions","text":"The default filtering for the suggestionsItems aggregation uses a 'starts with per term' style operator. You can override this with your own custom filter function using the setFilterFunction method.","code":"z2ui5_cl_smpc_app_481","terms":"multicombobox multi combo box sap.m multicomboboxcustomfiltering verticallayout label item sap.m.multicombobox src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_481/"},{"area":"samples","group":"Controls","title":"Standard List Item - Navigated","text":"This example demonstrates the navigated property of the list item.","code":"z2ui5_cl_smpc_app_482","terms":"standardlistitem standard list item sap.m standardlistitemnavigated sap.m.standardlistitem src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_482/"},{"area":"samples","group":"Controls","title":"Standard List Item - Adapt Title","text":"By default the title size adapts to the available space and gets bigger if the description is empty. List items with and without descriptions results in titles with different sizes. In this cases it is better to switch the size adaption off.","code":"z2ui5_cl_smpc_app_483","terms":"standardlistitem standard list item sap.m standardlistitemtitle sap.m.standardlistitem src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_483/"},{"area":"samples","group":"Controls","title":"Enforce Width 'auto'","text":"Some controls (for example the IconTabBar) do not have a 'width' property but still have a default width of 100%. We provide css class 'sapUiForceWidthAuto' to overwrite the control's width in such a case.","code":"z2ui5_cl_smpc_app_484","terms":"standardmargins standard margins sap.ui.core standardmarginsenforcewidthauto icontabbar icontabfilter simpleform title label text list sap.ui.core.standardmargins src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_484/"},{"area":"samples","group":"Controls","title":"TextArea with MaxLength = true","text":"Shows the behavior of the control with the new showExceededText property (since 1.48) and maxLength = true","code":"z2ui5_cl_smpc_app_485","terms":"textarea text area sap.m textareamaxlength verticallayout sap.m.textarea src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_485/"},{"area":"samples","group":"Controls","title":"Object Header - Active Title","text":"The Object Header's title can be active to trigger further actions like showing additional information in a Popover.","code":"z2ui5_cl_smpc_app_486","terms":"objectheader object header sap.m objectheadertitleactive objectattribute responsivepopover text sap.m.objectheader src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_486/"},{"area":"samples","group":"Controls","title":"Panel - Sticky header","text":"Panels can also have a sticky header. [since rel. 1.117]","code":"z2ui5_cl_smpc_app_487","terms":"panel sap.m panelsticky text sap.m.panel src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_487/"},{"area":"samples","group":"Controls","title":"Table - Item Navigated","text":"This example demonstrates the navigated property of the item.","code":"z2ui5_cl_smpc_app_488","terms":"table sap.m tablenavigated column text columnlistitem objectidentifier sap.m.table src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_488/"},{"area":"samples","group":"Controls","title":"Segmented Button in Dialog","text":"Segmented Button used in Dialog component","code":"z2ui5_cl_smpc_app_489","terms":"segmentedbutton segmented button sap.m segmentedbuttondialog verticallayout dialog segmentedbuttonitem sap.m.segmentedbutton src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_489/"},{"area":"samples","group":"Controls","title":"MultiComboBox","text":"Choose one or more out of multiple options with the MultiComboBox control.","code":"z2ui5_cl_smpc_app_490","terms":"multicombobox multi combo box sap.m verticallayout item sap.m.multicombobox src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_490/"},{"area":"samples","group":"Controls","title":"MultiComboBox - Clear Icon","text":"The multi combo box control can show 'clear' icon, which when pressed will remove the user's input.","code":"z2ui5_cl_smpc_app_491","terms":"multicombobox multi combo box sap.m multicomboboxclearicon verticallayout item sap.m.multicombobox src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_491/"},{"area":"samples","group":"Controls","title":"List - Grouping & Context Menu","text":"Grouping your items makes it easier for the user to browse and find the desired content. This example also shows the context menu for the items in the List control.","code":"z2ui5_cl_smpc_app_492","terms":"list sap.m listgrouping overflowtoolbar title toolbarspacer togglebutton menu menuitem sap.m.list src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_492/"},{"area":"samples","group":"Controls","title":"Combo box - Deferred loading of the items","text":"Use this feature to defer initialization of items until the point at which the items are needed. It can improve performance, reduce memory usage and unnecessary client/server round-trips.","code":"z2ui5_cl_smpc_app_493","terms":"combobox combo box sap.m comboboxlazyloading listitem sap.m.combobox src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_493/"},{"area":"samples","group":"Controls","title":"ComboBox - maxPickerHeight","text":"Limit the picker popup height using maxPickerHeight property","code":"z2ui5_cl_smpc_app_494","terms":"combobox combo box sap.m comboboxmaxpickerheight verticallayout label item sap.m.combobox src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_494/"},{"area":"samples","group":"Controls","title":"MultiComboBox - maxPickerHeight","text":"Limit the picker popup height using maxPickerHeight property","code":"z2ui5_cl_smpc_app_495","terms":"multicombobox multi combo box sap.m multicomboboxmaxpickerheight verticallayout label item sap.m.multicombobox src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_495/"},{"area":"samples","group":"Controls","title":"Tree - Lazy loading with a JSON model","text":"Shows how lazy loading with a JSON model can be done using the toggleOpenState event.","code":"z2ui5_cl_smpc_app_496","terms":"tree sap.m treejsonlazyloading standardtreeitem sap.m.tree src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_496/"},{"area":"samples","group":"Controls","title":"List - Swipe","text":"With a swipe gesture you can show additional content for an item without having to navigate to a detail page. This feature is only available for touch devices.","code":"z2ui5_cl_smpc_app_497","terms":"list sap.m listswipe standardlistitem button sap.m.list src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_497/"},{"area":"samples","group":"Controls","title":"List - Custom Actions","text":"This example demonstrates how to add custom actions to list items. Dedicated 'Delete' and 'Edit' types can be used to add predefined actions to the list items. The 'Custom' type can be used to add custom actions to the list items.","code":"z2ui5_cl_smpc_app_498","terms":"list sap.m listactions overflowtoolbar title toolbarspacer text slider standardlistitem listitemaction sap.m.list src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_498/"},{"area":"samples","group":"Controls","title":"List - Selection & Search","text":"When searching a list with multi selection the previously selected items will stay selected. This is managed by the list control for you.","code":"z2ui5_cl_smpc_app_499","terms":"list sap.m listselectionsearch overflowtoolbar searchfield label standardlistitem sap.m.list src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_499/"},{"area":"samples","group":"Controls","title":"Remove Margins","text":"Use our standard 'No-Margins' classes to remove existing margins from your control. You can either remove all margins at once or remove the margin on one or more sides.","code":"z2ui5_cl_smpc_app_500","terms":"standardmargins standard margins sap.ui.core standardnomargins text objectheader objectstatus objectattribute sap.ui.core.standardmargins src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_500/"},{"area":"samples","group":"Controls","title":"MultiInput Validators","text":"MultiInput uses validators to accept, decline and change tokens.","code":"z2ui5_cl_smpc_app_501","terms":"multiinput multi input sap.m multiinputvalidators vbox label hbox token checkbox sap.m.multiinput src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_501/"},{"area":"samples","group":"Controls","title":"Object Header - Select Title","text":"This is a Object Header with a title selection. This can be used to switch between variants of the business object being shown.","code":"z2ui5_cl_smpc_app_502","terms":"objectheader object header sap.m objectheadertitlesel objectattribute responsivepopover list standardlistitem sap.m.objectheader src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_502/"},{"area":"samples","group":"Controls","title":"Input - Key and Value Tabular Suggestions","text":"This sample illustrates how the Input works with key and value values, when the data is provided with table-like suggestions.","code":"z2ui5_cl_smpc_app_503","terms":"input sap.m inputkeyvaluetabularsuggestions verticallayout label column columnlistitem text sap.m.input src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_503/"},{"area":"samples","group":"Controls","title":"MultiInput tokenUpdate event example","text":"MultiInput fires several tokenUpdate events depending on when the tokens were validated.","code":"z2ui5_cl_smpc_app_504","terms":"multiinput multi input sap.m multiinputtokenupdate vbox text token sap.m.multiinput src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_504/"},{"area":"samples","group":"Controls","title":"Table - Outdated Data","text":"You can use the 'showOverlay' property to indicate that the table data is no longer up to date. When the user modifies the filter values of the table, this results in displaying an overlay, which disables operations on the table.","code":"z2ui5_cl_smpc_app_505","terms":"table sap.m tableoutdated overflowtoolbar combobox item button toolbarspacer segmentedbutton segmentedbuttonitem verticallayout column sap.m.table src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_505/"},{"area":"samples","group":"Controls","title":"Icon Tab Bar - Tabs drag and drop","text":"This example shows how the tab filters can be reordered and nested with drag and drop. Works only on desktop devices.","code":"z2ui5_cl_smpc_app_506","terms":"icontabbar icon tab bar sap.m icontabbardragdrop simpleform label stepinput icontabfilter text sap.m.icontabbar src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_506/"},{"area":"samples","group":"Controls","title":"Input - Grouping of items","text":"Items in the Input could be grouped by a property","code":"z2ui5_cl_smpc_app_507","terms":"input sap.m inputgrouping verticallayout label item column columnlistitem sap.m.input src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_507/"},{"area":"samples","group":"Controls","title":"List - Header & Info Toolbar","text":"The 'headerText' property is an easy but limited way of setting the list header. If you need more flexibility you should assemble your own header or info toolbar that can also contain buttons.","code":"z2ui5_cl_smpc_app_508","terms":"list sap.m listtoolbar standardlistitem overflowtoolbar title toolbarspacer multicombobox item togglebutton button label sap.m.list src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_508/"},{"area":"samples","group":"Controls","title":"Input - Suggestions - OSP","text":"If you need to use an Open Search Provider (OSP) to supply possible values, you can do this with the Input control's suggest event, and build the suggestionItems dynamically according to the results of the Open Search call.","code":"z2ui5_cl_smpc_app_509","terms":"input sap.m inputsuggestionsopensearch verticallayout label item sap.m.input src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_509/"},{"area":"samples","group":"Controls","title":"Input - Custom Value Help Icon","text":"This example shows the usage of a custom value help icon instead of the default one.","code":"z2ui5_cl_smpc_app_510","terms":"input sap.m inputcustomvaluehelpicon verticallayout label selectdialog standardlistitem sap.m.input src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_510/"},{"area":"samples","group":"Controls","title":"Select - Change Events","text":"Demonstrates the use of 'change' and 'liveChange' events.","code":"z2ui5_cl_smpc_app_511","terms":"select sap.m selectchangeevents listitem sap.m.select src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_511/"},{"area":"samples","group":"Controls","title":"MultiInput - Model update","text":"This sample illustrates how the model bound to the MultiInput can be updated upon token creation or deletion.","code":"z2ui5_cl_smpc_app_512","terms":"multiinput multi input sap.m multiinputmodelupdate verticallayout label item multiinputext list standardlistitem sap.m.multiinput src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_512/"},{"area":"samples","group":"Controls","title":"Object Header Responsive II","text":"This is a responsive Object Header with a Title, 2 Statuses/Attributes rendered below the title in a Master/Detail mode (fullScreenOptimized = false).","code":"z2ui5_cl_smpc_app_513","terms":"objectheader object header sap.m objectheaderresponsiveii objectattribute objectstatus objectmarker icontabbar icontabfilter verticallayout image sap.m.objectheader src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_513/"},{"area":"samples","group":"Controls","title":"Flex Box - Size Adjustments","text":"Automatic size adjustments can be achieved for Flex Items with the use of Flex Item Data settings on the contained controls.","code":"z2ui5_cl_smpc_app_514","terms":"flexbox flex box sap.m flexboxsizeadjustments html vbox panel button flexitemdata sap.m.flexbox src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_514/"},{"area":"samples","group":"Controls","title":"Input - Assisted","text":"Assisted input is available via suggestions - shown as you type - and a value help dialog.","code":"z2ui5_cl_smpc_app_515","terms":"input sap.m inputassisted verticallayout label item selectdialog standardlistitem sap.m.input src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_515/"},{"area":"samples","group":"Controls","title":"Segmented Button in View Settings Dialog","text":"Segmented Button used in View Settings Dialog component","code":"z2ui5_cl_smpc_app_516","terms":"segmentedbutton segmented button sap.m segmentedbuttonvsd verticallayout viewsettingsdialog viewsettingsitem viewsettingsfilteritem sap.m.segmentedbutton src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_516/"},{"area":"samples","group":"Controls","title":"Launch Tile","text":"Shows Launch Tile samples that can contain header, subheader, image content, unit, and a footer.","code":"z2ui5_cl_smpc_app_517","terms":"generictile generic tile sap.m generictileaslaunchtile simpleform label input button html tilecontent imagecontent sap.m.generictile src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_517/"},{"area":"samples","group":"Controls","title":"Object Header – Active Attributes","text":"Active Object Attributes can trigger actions, such as navigating to related content inside or outside of the current application, or displaying additional information in a popover.","code":"z2ui5_cl_smpc_app_518","terms":"objectattribute object attribute sap.m objectheaderactiveattributes objectheader objectstatus dialog ratingindicator textarea button sap.m.objectattribute src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_518/"},{"area":"samples","group":"Controls","title":"MultiComboBox - Suggestions with Value State","text":"MultiComboBox with suggestions and Value State Message containing a link.","code":"z2ui5_cl_smpc_app_519","terms":"multicombobox multi combo box sap.m multicomboboxsuggestionsandvaluestate verticallayout label item formattedtext link sap.m.multicombobox src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_519/"},{"area":"samples","group":"Controls","title":"Notification List Group with lazy loading of the notifications","text":"Notification List Group with lazy loading of the notifications.","code":"z2ui5_cl_smpc_app_520","terms":"notificationlistgroup notification list group sap.m notificationlistgrouplazyloading vbox notificationlist flexitemdata button notificationlistitem sap.m.notificationlistgroup src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_520/"},{"area":"samples","group":"Controls","title":"Input - Key and Value","text":"This sample illustrates how the Input works with key and value values, when the data is available via list of suggestions.","code":"z2ui5_cl_smpc_app_521","terms":"input sap.m inputkeyvalue verticallayout label listitem text selectdialog standardlistitem sap.m.input src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_521/"},{"area":"samples","group":"Controls","title":"List - Loading Indication","text":"You can use enableBusyIndicator property to display loading animation while the data is being loaded from server. By default, this property is true and busy indicator will be shown after 1000ms.","code":"z2ui5_cl_smpc_app_522","terms":"list sap.m listloading overflowtoolbar title toolbarspacer button standardlistitem sap.m.list src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_522/"},{"area":"samples","group":"Controls","title":"Table - CellSelector, CopyProvider","text":"This example demonstrates how the Table data can be copied to the clipboard via CopyProvider plugin.","code":"z2ui5_cl_smpc_app_523","terms":"table sap.m tableselectcopy cellselector overflowtoolbar title toolbarspacer checkbox column text columnlistitem objectidentifier sap.m.table src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_523/"},{"area":"samples","group":"Controls","title":"List - Deletion","text":"Setting 'Delete' mode on a List means you can trigger the deletion of single items with a single press. The application has to decide if an additional confirmation is required.","code":"z2ui5_cl_smpc_app_524","terms":"list sap.m listdeletion standardlistitem sap.m.list src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_524/"},{"area":"samples","group":"Controls","title":"List - Growing Upwards","text":"The Upwards Growing","code":"z2ui5_cl_smpc_app_525","terms":"list sap.m listgrowingupwards standardlistitem sap.m.list src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_525/"},{"area":"samples","group":"Controls","title":"Grid Container - Drag and Drop","text":"This sample represents GridContainer with enabled Drag and Drop functionality.","code":"z2ui5_cl_smpc_app_526","terms":"gridcontainer grid container sap.f gridcontainerdraganddrop scrollcontainer draginfo griddropinfo gridcontainersettings gridcontaineritemlayoutdata imagecontent header sap.f.gridcontainer src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_526/"},{"area":"samples","group":"Controls","title":"Grid Container - Drag and Drop From List to GridContainer","text":"This sample represents how items from a control which is not GridContainer can be dragged and dropped over a GridContainer.","code":"z2ui5_cl_smpc_app_527","terms":"gridcontainer grid container sap.f gridcontainerdraganddropfromlist scrollcontainer togglebutton hbox list draginfo dropinfo standardlistitem sap.f.gridcontainer src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_527/"},{"area":"samples","group":"Controls","title":"Grid Container - Keyboard navigation between multiple grids","text":"This sample demonstrates the keyboard navigation between multiple grids","code":"z2ui5_cl_smpc_app_528","terms":"gridcontainer grid container sap.f gridcontainersnavigation scrollcontainer togglebutton hbox panel flexitemdata generictile gridcontaineritemlayoutdata sap.f.gridcontainer src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_528/"},{"area":"samples","group":"Controls","title":"Semantic Page - Freestyle Sample","text":"This sample demonstrates a SemanticPage with all semantic-specific actions both in the title and in the footer areas.","code":"z2ui5_cl_smpc_app_529","terms":"semanticpage semantic sap.f.semantic semanticpagefreestyle title breadcrumbs link image text horizontallayout verticallayout objectattribute sap.f.semantic.semanticpage sap.f src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_529/"},{"area":"samples","group":"Controls","title":"Overflow Toolbar - layout","text":"Overflow Toolbar can contain the same controls as Toolbar with the added benefit that buttons that do not fit are moved to an overflow area when overflow occurs.","code":"z2ui5_cl_smpc_app_530","terms":"generictag generic tag sap.m overflowtoolbarsimple messagestrip slider overflowtoolbar label toolbarspacer button overflowtoolbarlayoutdata sap.m.generictag src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_530/"},{"area":"samples","group":"Controls","title":"QuickView with Different Configurations of Avatar","text":"QuickView with fallback icon, initials, display shape and other avatar properties.","code":"z2ui5_cl_smpc_app_531","terms":"quickview quick sap.m quickviewavatarconfiguration button quickviewpage avatar quickviewgroup quickviewgroupelement sap.m.quickview src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_531/"},{"area":"samples","group":"Controls","title":"QuickView with Navigation and Data Binding","text":"QuickView using navOrigin parameter when navigating.","code":"z2ui5_cl_smpc_app_532","terms":"quickview quick sap.m quickviewnavorigin button quickviewpage avatar quickviewgroup quickviewgroupelement sap.m.quickview src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_532/"},{"area":"samples","group":"Controls","title":"Wizard page mode","text":"Demonstrates the usage of the renderMode property. The Wizard is displayed inside a Dialog to allow blocking of the interface without using page context. The dynamic page is used to provide a consistent and standards-compliant look.","code":"z2ui5_cl_smpc_app_533","terms":"wizard sap.m wizardsinglestep button dialog dynamicpage dynamicpagetitle title wizardstep messagestrip text hbox sap.m.wizard src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_533/"},{"area":"samples","group":"Controls","title":"Wizard edit mode","text":"Demonstrates the usage of the setCurrentStep association, which controlls the current step of the wizard.","code":"z2ui5_cl_smpc_app_534","terms":"wizard sap.m wizardcurrentstep navcontainer bar segmentedbutton segmentedbuttonitem label select item wizardstep messagestrip sap.m.wizard src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_534/"},{"area":"samples","group":"Controls","title":"Wizard branching use case","text":"The Wizard could be used in branching mode, where the choice of next step depends on the decision made for the current one.","code":"z2ui5_cl_smpc_app_535","terms":"wizard sap.m wizardbranching navcontainer wizardstep objectheader objectattribute list standardlistitem text hbox segmentedbutton sap.m.wizard src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_535/"},{"area":"samples","group":"Controls","title":"simple Planning Calendar","text":"PlanningCalendar with single row selection that illustrates the built-in views.","code":"z2ui5_cl_smpc_app_536","terms":"planningcalendar planning calendar sap.m vbox title select item planningcalendarrow customdata calendarappointment label sap.m.planningcalendar src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_536/"},{"area":"samples","group":"Controls","title":"Planning Calendar - with custom views","text":"PlanningCalendar with custom views to set number of hours, days and months and change view description. It illustrates both built-in and custom views. Sub-intervals are shown. Custom non-working days and hours are set.","code":"z2ui5_cl_smpc_app_537","terms":"planningcalendar planning calendar sap.m planningcalendarviews vbox title label select item datetyperange planningcalendarview sap.m.planningcalendar src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_537/"},{"area":"samples","group":"Controls","title":"Planning Calendar - multiple selection","text":"PlanningCalendar with multiple row selection. No interval headers are displayed. On click on an interval a new appointment is created.","code":"z2ui5_cl_smpc_app_538","terms":"planningcalendar planning calendar sap.m planningcalendarmulti vbox title planningcalendarrow calendarappointment sap.m.planningcalendar src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_538/"},{"area":"samples","group":"Controls","title":"Planning Calendar - with one line appointments and multiple appointments selection option","text":"PlanningCalendar showing appointment with only title in one line to save space. The interval headers are only shown if there are some assigned in the visible area.","code":"z2ui5_cl_smpc_app_539","terms":"planningcalendar planning calendar sap.m planningcalendaroneline vbox title togglebutton overflowtoolbarlayoutdata badgecustomdata select item sap.m.planningcalendar src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_539/"},{"area":"samples","group":"Controls","title":"Planning Calendar - with min. and max. date","text":"PlanningCalendar with min. date 2000-01-01 and max. date 2050-12-31","code":"z2ui5_cl_smpc_app_540","terms":"planningcalendar planning calendar sap.m planningcalendarminmax vbox title planningcalendarrow calendarappointment sap.m.planningcalendar src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_540/"},{"area":"samples","group":"Controls","title":"Planning Calendar - with legend and option to change the first day of week","text":"PlanningCalendar inside the main part of a sap.ui.layout.DynamicSideContent and a sap.m.PlanningCalendarLegend inside the side part. The legend includes calendar and appointments sections. For each sap.m.PlanningCalendarRow in the sap.m.","code":"z2ui5_cl_smpc_app_541","terms":"planningcalendar planning calendar sap.m planningcalendarwithlegend dynamicsidecontent vbox label select item togglebutton planningcalendarrow sap.m.planningcalendar src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_541/"},{"area":"samples","group":"Controls","title":"Planning Calendar - with header that remains visible (fixed on top) on scroll","text":"PlanningCalendar with header area that remains visible (fixed on top) when the rest of the content is scrolled out of view.","code":"z2ui5_cl_smpc_app_542","terms":"planningcalendar planning calendar sap.m planningcalendarwithstickyheader vbox title planningcalendarrow calendarappointment label multicombobox item sap.m.planningcalendar src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_542/"},{"area":"samples","group":"Controls","title":"Planning Calendar - with appointments in different sizes","text":"PlanningCalendar showing normal, half-sized and large appointments.","code":"z2ui5_cl_smpc_app_543","terms":"planningcalendar planning calendar sap.m planningcalendarappointmentsizes vbox hbox label select item planningcalendarrow calendarappointment sap.m.planningcalendar src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_543/"},{"area":"samples","group":"Controls","title":"Planning Calendar - week numbering","text":"Demonstrates PlanningCalendar with different week numbering (only Date Picker, 1 Week and 1 Month views are affected).","code":"z2ui5_cl_smpc_app_544","terms":"planningcalendar planning calendar sap.m planningcalendarweeknumbering vbox title select item planningcalendarrow customdata calendarappointment sap.m.planningcalendar src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_544/"},{"area":"samples","group":"Controls","title":"Planning Calendar - with relative views","text":"PlanningCalendar with relative views. The relative periods are not directly related to dates, but periods with pre-defined duration.","code":"z2ui5_cl_smpc_app_545","terms":"planningcalendar planning calendar sap.m planningcalendarrelativeviews vbox title planningcalendarview planningcalendarrow customdata calendarappointment sap.m.planningcalendar src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_545/"},{"area":"samples","group":"Controls","title":"Planning Calendar - Drag and Drop","text":"PlanningCalendar with draggable appointments. The sample represents three possible roles. If you are logged as an Admin, you can move appointments both within the same row and between different rows without any restrictions.","code":"z2ui5_cl_smpc_app_546","terms":"planningcalendar planning calendar sap.m planningcalendardnd vbox title label select item planningcalendarrow calendarappointment sap.m.planningcalendar src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_546/"},{"area":"samples","group":"Controls","title":"Planning Calendar - with appointments modification","text":"PlanningCalendar containing sap.m.Popover with information for the appointments and sap.m.Dialog for creating a new appointment. Note: Illustrates how the PlanningCalendar can be used in combination with the sap.m.Popover and sap.m.","code":"z2ui5_cl_smpc_app_547","terms":"planningcalendar planning calendar sap.m planningcalendarmodifyappointments vbox title button planningcalendarrow calendarappointment responsivepopover simpleform sap.m.planningcalendar src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_547/"},{"area":"samples","group":"Controls","title":"Planning Calendar - with Recurring Calendar Items","text":"PlanningCalendar with recurring calendar items.","code":"z2ui5_cl_smpc_app_548","terms":"planningcalendar planning calendar sap.m planningcalendarrecurringitem vbox title toolbarspacer button planningcalendarrow customdata recurringcalendarappointment sap.m.planningcalendar src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_548/"},{"area":"samples","group":"Controls","title":"Single Planning Calendar","text":"This sample demonstrates most of the features available for the SinglePlanningCalendar control.","code":"z2ui5_cl_smpc_app_549","terms":"singleplanningcalendar single planning calendar sap.m vbox overflowtoolbar label select listitem toolbarseparator togglebutton sap.m.singleplanningcalendar src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_549/"},{"area":"samples","group":"Controls","title":"Single Planning Calendar - Week Numbering","text":"This sample demonstrates how the SinglePlanningCalendar control can be used width different week numbering (only Week and Month views are affected)","code":"z2ui5_cl_smpc_app_550","terms":"singleplanningcalendar single planning calendar sap.m singleplanningcalendarweeknumbering vbox hbox label select listitem item sap.m.singleplanningcalendar src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_550/"},{"area":"samples","group":"Controls","title":"Single Planning Calendar with Snapping Header and option to change the first day of week","text":"SinglePlanningCalendar showing the modes for snapping the header part of the calendar.","code":"z2ui5_cl_smpc_app_551","terms":"singleplanningcalendar single planning calendar sap.m singleplanningcalendarsnappingheader vbox hbox label select listitem item sap.m.singleplanningcalendar src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_551/"},{"area":"samples","group":"Controls","title":"Single Planning Calendar with Custom Views","text":"SinglePlanningCalendar showing the provided predefined views and custom views.","code":"z2ui5_cl_smpc_app_552","terms":"singleplanningcalendar single planning calendar sap.m singleplanningcalendarwithcustomviews vbox singleplanningcalendardayview singleplanningcalendarworkweekview singleplanningcalendarweekview calendarappointment sap.m.singleplanningcalendar src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_552/"},{"area":"samples","group":"Controls","title":"Single Planning Calendar with Legend and defined working hours","text":"SinglePlanningCalendar and PlanningCalendarLegend controls used as main and side parts of an sap.ui.layout.DynamicSideContent control. The calendar also shows the daily working hours.","code":"z2ui5_cl_smpc_app_553","terms":"singleplanningcalendar single planning calendar sap.m singleplanningcalendarwithlegend dynamicsidecontent vbox togglebutton singleplanningcalendardayview singleplanningcalendarworkweekview singleplanningcalendarweekview sap.m.singleplanningcalendar src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_553/"},{"area":"samples","group":"Controls","title":"Single Planning Calendar with Zoom In and Zoom Out behavior","text":"SinglePlanningCalendar with enabled Zoom In and Zoom Out functionality.","code":"z2ui5_cl_smpc_app_554","terms":"singleplanningcalendar single planning calendar sap.m singleplanningcalendarwithzoominzoomout dynamicsidecontent vbox togglebutton button singleplanningcalendardayview singleplanningcalendarworkweekview sap.m.singleplanningcalendar src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_554/"},{"area":"samples","group":"Controls","title":"Single Planning Calendar with Recurring Calendar Items","text":"SinglePlanningCalendar with recurring calendar items","code":"z2ui5_cl_smpc_app_555","terms":"singleplanningcalendar single planning calendar sap.m singleplanningcalendarrecurringitem vbox overflowtoolbar button toolbarseparator recurringnonworkingperiod timerange sap.m.singleplanningcalendar src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_555/"},{"area":"samples","group":"Controls","title":"Date Picker Mass Editing Scenario","text":"Using calendar in a dialog for changing dates in mass editing scenario.","code":"z2ui5_cl_smpc_app_556","terms":"datepicker date picker sap.m datepickermassedit vbox table toolbar title toolbarspacer button column sap.m.datepicker src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_556/"},{"area":"samples","group":"Controls","title":"Facet Filter - Custom Filters","text":"With the FacetFilter you can define custom filtering criteria to be applied when searching in the FacetFilterList instead of the default filtering criteria of the control in order to assist the user in narrowing down the data in, say, a table.","code":"z2ui5_cl_smpc_app_557","terms":"facetfilter facet filter sap.m facetfiltercustomfilters vbox facetfilterlist facetfilteritem table overflowtoolbar title toolbarspacer sap.m.facetfilter src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_557/"},{"area":"samples","group":"Controls","title":"Tab Container - Multi-instance handling concept","text":"Allows detail view / edit in sap.m.TabContainer after selecting items from table.","code":"z2ui5_cl_smpc_app_558","terms":"tabcontainer tab container sap.m tabcontainermhc navcontainer overflowtoolbar toolbarspacer overflowtoolbarbutton column text columnlistitem sap.m.tabcontainer src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_558/"},{"area":"samples","group":"Controls","title":"Dynamic Page with Analytical Table","text":"Dynamic Page containing an Analytical Table in the content area aligned with the SAP Fiori List Report floorplan.","code":"z2ui5_cl_smpc_app_559","terms":"dynamicpage dynamic sap.f dynamicpageanalyticaltable dynamicpagetitle title label overflowtoolbar generictag objectnumber toolbarspacer button sap.f.dynamicpage src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_559/"},{"area":"samples","group":"Controls","title":"Dynamic Page with Wizard","text":"Dynamic Page containing a sap.m.Wizard and WizardProgressNavigator in the content area.","code":"z2ui5_cl_smpc_app_560","terms":"dynamicpage dynamic sap.f dynamicpagewithwizard navcontainer dynamicpagetitle title wizard wizardstep objectheader objectattribute list sap.f.dynamicpage src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_560/"},{"area":"samples","group":"Controls","title":"Dialog in Custom Within Area","text":"Within area of sap.ui.core.Popup determines where all popups (including dialogs) are positioned and where they can be dragged.","code":"z2ui5_cl_smpc_app_561","terms":"dialog sap.m dialogwithinarea hbox verticallayout button flexitemdata standardlistitem sap.m.dialog src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_561/"},{"area":"samples","group":"Controls","title":"Dialog with Custom Footer","text":"Dialog with custom footer and support for message popover.","code":"z2ui5_cl_smpc_app_562","terms":"dialog sap.m dialogwithmessagepopover button simpleform title label input columnelementdata select item toolbar sap.m.dialog src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_562/"},{"area":"samples","group":"Controls","title":"Message View inside Popover","text":"A sample with Message View inside a Popover.","code":"z2ui5_cl_smpc_app_563","terms":"messageview message sap.m messageviewinsidepopover button popover bar title messageitem link sap.m.messageview src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_563/"},{"area":"samples","group":"Controls","title":"Message View inside ResponsivePopover","text":"A sample with Message View inside a ResponsivePopover.","code":"z2ui5_cl_smpc_app_564","terms":"messageview message sap.m messageviewinsideresponsivepopover button responsivepopover bar title messageitem link sap.m.messageview src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_564/"},{"area":"samples","group":"Controls","title":"Popover with NavContainer","text":"You can nest NavContainers in Popovers (and Dialogs) to navigate to further details in place.","code":"z2ui5_cl_smpc_app_565","terms":"popover sap.m popovernavcon verticallayout button navcontainer list standardlistitem objectheader objectattribute text sap.m.popover src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_565/"},{"area":"samples","group":"Controls","title":"Table - Breadcrumb","text":"With an InfoToolbar and some crumb logic you can navigate simple hierarchies with a breadcrumb table approach.","code":"z2ui5_cl_smpc_app_566","terms":"table sap.m tablebreadcrumb overflowtoolbar toolbarspacer button breadcrumbs link label column text columnlistitem sap.m.table src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_566/"},{"area":"samples","group":"Controls","title":"Table - Defining Column Width","text":"While defining the column width you can use percent values but you should be careful with them. Click to see some traps and tipps.","code":"z2ui5_cl_smpc_app_567","terms":"table sap.m tablecolumnwidth messagestrip toolbar title toolbarspacer checkbox column input columnlistitem text sap.m.table src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_567/"},{"area":"samples","group":"Controls","title":"Table - ContextualWidth (Static)","text":"This example shows the container-based pop-in behavior. The container has static width.","code":"z2ui5_cl_smpc_app_568","terms":"table sap.m tablecontextualwidthstatic messagestrip overflowtoolbar button column label columnlistitem sap.m.table src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_568/"},{"area":"samples","group":"Controls","title":"Table - Drag and Drop","text":"Shows the different kinds of drag-and-drop capabilities across view boundaries along with custom context menu alternatives to perform these action.","code":"z2ui5_cl_smpc_app_569","terms":"table sap.m tablednd hbox button overflowtoolbar title menu menuitem column text dropinfo sap.m.table src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_569/"},{"area":"samples","group":"Controls","title":"Table - Editable","text":"Table with edit/display togglable scenario.","code":"z2ui5_cl_smpc_app_570","terms":"table sap.m tableeditable overflowtoolbar toolbarspacer button overflowtoolbarlayoutdata title column text columnlistitem input sap.m.table src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_570/"},{"area":"samples","group":"Controls","title":"Table - IColumnHeaderMenu","text":"This example demonstrates an implementation of the IColumnHeaderMenu interface with the sap.m.Menu as a breakout scenario.","code":"z2ui5_cl_smpc_app_571","terms":"table sap.m tableicolumnheadermenu menu quicksort quicksortitem actionitem quickaction button overflowtoolbar title column sap.m.table src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_571/"},{"area":"samples","group":"Controls","title":"Table - Fixed vs Auto Layout","text":"You can use fixedLayout property to define the layout algorithm to be used for the table cells, rows, and columns. When fixedLayout property is set to false, the width of the table and its cells depends on the content thereof.","code":"z2ui5_cl_smpc_app_572","terms":"table sap.m tablelayout overflowtoolbar title toolbarspacer checkbox button column text columnlistitem dialog sap.m.table src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_572/"},{"area":"samples","group":"Controls","title":"Table - Merge Cells","text":"With column duplicate merging, you can improve the display of repeated data. See the effect of mergeDuplicates on the Supplier column, space permitting. Note: This feature is ignored if a column is shown in the pop-in.","code":"z2ui5_cl_smpc_app_573","terms":"table sap.m tablemergecells column text columnlistitem objectidentifier objectnumber sap.m.table src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_573/"},{"area":"samples","group":"Controls","title":"Table - MultiSelectMode","text":"This example demonstrates the different multi-selection modes if the table is configured with MultiToggle mode and the sap.m.table.Title control.","code":"z2ui5_cl_smpc_app_574","terms":"table sap.m tablemultiselectmode overflowtoolbar title toolbarspacer searchfield label switch combobox item button sap.m.table src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_574/"},{"area":"samples","group":"Controls","title":"Table - Scroll To Index","text":"This sample demonstrates the scroll-to-index functionality.","code":"z2ui5_cl_smpc_app_575","terms":"table sap.m tablescrolltoindex flexiblecolumnlayout dynamicpage dynamicpagetitle title overflowtoolbar toolbarspacer searchfield column text sap.m.table src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_575/"},{"area":"samples","group":"Controls","title":"Table - Vertical Alignment","text":"This is a good example of how to vertically align different elements within a Table's ColumnListItem row template.","code":"z2ui5_cl_smpc_app_576","terms":"table sap.m tableverticalalignment overflowtoolbar title column text columnlistitem objectidentifier input objectnumber sap.m.table src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_576/"},{"area":"samples","group":"Controls","title":"Flexible Column Layout with programmatic scrolling to an item","text":"FlexibleColumnLayout where the app programmatically scrolls to some item within the newly navigated column, once the column is fully resized","code":"z2ui5_cl_smpc_app_577","terms":"flexiblecolumnlayout flexible column layout sap.f flexiblecolumnlayoutcolumnresize objectpagelayout objectpagedynamicheadertitle title objectpagesection objectpagesubsection button sap.f.flexiblecolumnlayout src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_577/"},{"area":"samples","group":"Controls","title":"Flexible Column Layout with Routing and first page in fullscreen only","text":"Flexible Column Layout as an app with routing that displays different pages in the initial column. The first page is only displayed in OneColumn layout type","code":"z2ui5_cl_smpc_app_578","terms":"flexiblecolumnlayout flexible column layout sap.f flexiblecolumnlayoutwithfullscreenpage dynamicpagetitle title table text columnlistitem objectidentifier sap.f.flexiblecolumnlayout src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_578/"},{"area":"samples","group":"Controls","title":"Flexible Column Layout with Routing and One Initial Column","text":"Flexible Column Layout as an app with routing that starts with a single initial column.","code":"z2ui5_cl_smpc_app_579","terms":"flexiblecolumnlayout flexible column layout sap.f flexiblecolumnlayoutwithonecolumnstart flexiblecolumnlayoutdata flexiblecolumnlayoutdatafordesktop flexiblecolumnlayoutdatafortablet dynamicpage dynamicpagetitle title sap.f.flexiblecolumnlayout src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_579/"},{"area":"samples","group":"Controls","title":"Flexible Column Layout with Routing and Two Initial Columns","text":"Flexible Column Layout as an app with routing that starts with two initial columns.","code":"z2ui5_cl_smpc_app_580","terms":"flexiblecolumnlayout flexible column layout sap.f flexiblecolumnlayoutwithtwocolumnstart dynamicpage dynamicpagetitle title table overflowtoolbar toolbarspacer sap.f.flexiblecolumnlayout src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_580/"},{"area":"samples","group":"Controls","title":"Grid List - Item Designs","text":"This is a sample for GridList item templates representing a typical tools page dashboard style.","code":"z2ui5_cl_smpc_app_581","terms":"gridlist grid list sap.f gridlistboxcontainerreal toolbar title gridboxlayout vbox flexitemdata label text sap.f.gridlist src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_581/"},{"area":"samples","group":"Controls","title":"Navigation with keyboard arrows between multiple GridLists","text":"This sample demonstrates the keyboard navigation between multiple grids","code":"z2ui5_cl_smpc_app_582","terms":"gridlist grid list sap.f gridlistkeyboardarrowsnavigation app slider gridresponsivelayout gridsettings gridbasiclayout gridlistitem griditemlayoutdata sap.f.gridlist src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_582/"},{"area":"samples","group":"Controls","title":"Shell Bar with Product Switch","text":"Shell Bar example with enabled Product Switch, configurable by the app developer. The Product Switch control is in experimental state.","code":"z2ui5_cl_smpc_app_583","terms":"shellbar shell bar sap.f shellbarproductswitch avatar responsivepopover productswitch productswitchitem sap.f.shellbar src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_583/"},{"area":"samples","group":"Controls","title":"Shell Bar with Flexible Column Layout","text":"Example of Shell Bar in combination with Flexible Column Layout.","code":"z2ui5_cl_smpc_app_584","terms":"flexiblecolumnlayout flexible column layout sap.f shellbarwithflexiblecolumnlayout shellbar menu menuitem avatar dynamicpage dynamicpagetitle sap.f.flexiblecolumnlayout src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_584/"},{"area":"samples","group":"Controls","title":"Shell Bar with Split App","text":"Example of Shell Bar in combination with Split App.","code":"z2ui5_cl_smpc_app_585","terms":"shellbar shell bar sap.f shellbarwithsplitapp toolpage menu menuitem avatar searchmanager sidenavigation navcontainer sap.f.shellbar src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_585/"},{"area":"samples","group":"Controls","title":"Object Page AnchorBar","text":"AnchorBar has a different behavior based on the device","code":"z2ui5_cl_smpc_app_586","terms":"objectpagelayout object layout sap.uxap anchorbar objectpagedynamicheadertitle title objectpagesection objectpagesubsection simpleform label text sap.uxap.objectpagelayout src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_586/"},{"area":"samples","group":"Controls","title":"Object Page AnchorBar with numbers","text":"This example shows how to visualize numbers in parenthesis after the corresponding section titles in the AnchorBar","code":"z2ui5_cl_smpc_app_587","terms":"objectpagelayout object layout sap.uxap anchorbarwithnumbers objectpagedynamicheadertitle title flexbox avatar text button overflowtoolbarbutton sap.uxap.objectpagelayout src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_587/"},{"area":"samples","group":"Controls","title":"Object Page demonstrating beforeNavigate event","text":"Object Page demonstrating how beforeNavigate event can be used to prevent default navigation behaviour","code":"z2ui5_cl_smpc_app_588","terms":"objectpagelayout object layout sap.uxap objectpagebeforenavigate objectpagedynamicheadertitle title flexbox avatar text button overflowtoolbarbutton sap.uxap.objectpagelayout src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_588/"},{"area":"samples","group":"Controls","title":"Object Page with blocks of different view types","text":"ObjectPage sample with blocks that use different view types","code":"z2ui5_cl_smpc_app_589","terms":"objectpagelayout object layout sap.uxap objectpageblockviewtypes objectpageaccessiblelandmarkinfo objectpageheader objectpageheaderactionbutton breadcrumbs link verticallayout horizontallayout sap.uxap.objectpagelayout src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_589/"},{"area":"samples","group":"Controls","title":"ObjectPage with first editable input","text":"Object Page that focuses its first editable input in the currently selected section.","code":"z2ui5_cl_smpc_app_590","terms":"objectpagelayout object layout sap.uxap objectpageformfocusableinput objectpagedynamicheadertitle breadcrumbs link title flexbox avatar text sap.uxap.objectpagelayout src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_590/"},{"area":"samples","group":"Controls","title":"ObjectPage with forms","text":"Object Page automatically adjusts form layout to match block column layout","code":"z2ui5_cl_smpc_app_591","terms":"objectpagelayout object layout sap.uxap objectpageformlayout objectpagedynamicheadertitle breadcrumbs link title flexbox avatar text sap.uxap.objectpagelayout src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_591/"},{"area":"samples","group":"Controls","title":"Object Page with LazyLoading without blocks","text":"This sample showcases the lazy loading using the stashed property of the ObjectPageLazyLoader. It enables usage of lazy loading without the need to have Blocks","code":"z2ui5_cl_smpc_app_592","terms":"objectpagelayout object layout sap.uxap objectpagelazyloadingwithoutblocks objectpagedynamicheadertitle title button overflowtoolbarbutton objectpagesection objectpagesubsection objectpagelazyloader sap.uxap.objectpagelayout src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_592/"},{"area":"samples","group":"Controls","title":"Object Page with LazyLoading","text":"Object Page with LazyLoading","code":"z2ui5_cl_smpc_app_593","terms":"objectpagelayout object layout sap.uxap objectpageonjsonwithlazyloading objectpagedynamicheadertitle title button overflowtoolbarbutton objectpagesection objectpagesubsection grid sap.uxap.objectpagelayout src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_593/"},{"area":"samples","group":"Controls","title":"Object Page with predefined selected section in Tab navigation mode","text":"Object Page sample showing a layout where the selected section is defined by the user.","code":"z2ui5_cl_smpc_app_594","terms":"objectpagelayout object layout sap.uxap objectpageselectedsection objectpagedynamicheadertitle title flexbox avatar text button overflowtoolbarbutton sap.uxap.objectpagelayout src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_594/"},{"area":"samples","group":"Controls","title":"Object Page State","text":"This example shows how the page can be accessed directly to a specific vertical position, with \"See More\" enabled","code":"z2ui5_cl_smpc_app_595","terms":"objectpagelayout object layout sap.uxap objectpagestate objectpagedynamicheadertitle title flexbox avatar text button overflowtoolbarbutton sap.uxap.objectpagelayout src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_595/"},{"area":"samples","group":"Controls","title":"Object Page using the Tab navigation mode","text":"Object Page sample showing a layout where the navigation is Tab based (one Tab per section) rather than having all of the sections visible at the same time.","code":"z2ui5_cl_smpc_app_596","terms":"objectpagelayout object layout sap.uxap objectpagetabnavigationmode objectpagedynamicheadertitle title flexbox avatar text button overflowtoolbarbutton sap.uxap.objectpagelayout src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_596/"},{"area":"samples","group":"Controls","title":"Object Page built entirely in XML","text":"An ObjectPageLayout declared in one XML view - header title, header content and five sections whose blocks come from four different block namespaces - rather than assembled in a controller.","code":"z2ui5_cl_smpc_app_597","terms":"objectpagelayout object layout sap.uxap objectpagexml objectpageheader button verticallayout link horizontallayout label objectpagesection sap.uxap.objectpagelayout src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_597/"},{"area":"samples","group":"Controls","title":"Subsection with automatic layout of blocks","text":"This example shows how blocks can be laid out automatically by the Object Page when their size is not specified.","code":"z2ui5_cl_smpc_app_598","terms":"objectpagesubsection object sub section sap.uxap objectpagesubsectionmultiview objectpagelayout objectpageheader objectpagesection simpleform sap.uxap.objectpagesubsection src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_598/"},{"area":"samples","group":"Controls","title":"Subsection with blocks using column layout","text":"This example shows how the size of the blocks and be either specified or automatic","code":"z2ui5_cl_smpc_app_599","terms":"objectpagesubsection object sub section sap.uxap objectpagesubsectionsized objectpagelayout objectpageheader togglebutton objectpagesection button sap.uxap.objectpagesubsection src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_599/"},{"area":"samples","group":"Controls","title":"Tree - Drag and Drop","text":"This example shows drag-and-drop capability.","code":"z2ui5_cl_smpc_app_600","terms":"tree sap.m treednd dragdropinfo standardtreeitem sap.m.tree src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_600/"},{"area":"samples","group":"Controls","title":"Tree - Multi Expand & Collapse","text":"This example shows how to expand/collapse multiple nodes and demonstrates the sticky header toolbar and info toolbar options.","code":"z2ui5_cl_smpc_app_601","terms":"tree sap.m treeexpandmulti overflowtoolbar title toolbarspacer button multicombobox item togglebutton standardtreeitem sap.m.tree src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_601/"},{"area":"samples","group":"Controls","title":"Tree - InitialExpand & CollapseAll","text":"This example shows the initial expand state and how to collapse all nodes.","code":"z2ui5_cl_smpc_app_602","terms":"tree sap.m treeexpandto text toolbarspacer select item button standardtreeitem sap.m.tree src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_602/"},{"area":"samples","group":"Controls","title":"Tree - OData","text":"This example shows Tree with OData service.","code":"z2ui5_cl_smpc_app_603","terms":"tree sap.m treeodata standardtreeitem sap.m.tree src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_603/"},{"area":"samples","group":"Controls","title":"Carousel with Display Options","text":"The Carousel has options for the arrows placement, page indicator placement and page indicator visibility.","code":"z2ui5_cl_smpc_app_604","terms":"carousel sap.m carouselwithdisplayoptions label slider panel carousellayout image radiobuttongroup radiobutton switch input sap.m.carousel src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_604/"},{"area":"samples","group":"Controls","title":"Header Container - Lazy Loading","text":"The header container with lazy loading functionality on pressing the scroll button.","code":"z2ui5_cl_smpc_app_605","terms":"headercontainer header container sap.m headercontainerlazyloading objectheader objectattribute objectstatus objectmarker numericcontent sap.m.headercontainer src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_605/"},{"area":"samples","group":"Controls","title":"Tile Modes and Scopes","text":"Shows Generic Tile regular and in line mode, and you can switch between the display scope and actions scope for Generic Tiles on a web page.","code":"z2ui5_cl_smpc_app_606","terms":"generictile generic tile sap.m generictilelinemode overflowtoolbar toolbarspacer label switch combobox item tilecontent sap.m.generictile src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_606/"},{"area":"samples","group":"Controls","title":"Overflow Toolbar - in a table and in the footer of a page","text":"Overflow Toolbar Button is useful for showing lists of action buttons that can display an icon in the toolbar, and icon+text when in the overflow.","code":"z2ui5_cl_smpc_app_607","terms":"overflowtoolbar overflow toolbar sap.m overflowtoolbarfooter messagestrip slider toolbarspacer searchfield overflowtoolbarlayoutdata button overflowtoolbarbutton sap.m.overflowtoolbar src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_607/"},{"area":"samples","group":"Controls","title":"Select - Two columns layout","text":"Use the select dropdown list with two columns layout if you need to display additional information to your options, like e.g. currencies to countries or abbreviations to systems.","code":"z2ui5_cl_smpc_app_608","terms":"select sap.m select2columns title hbox label slider switch text listitem sap.m.select src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_608/"},{"area":"samples","group":"Controls","title":"Single Planning Calendar - Create and Modify Appointments","text":"This sample demonstrates how the SinglePlanningCalendar control can be used in combination with sap.m.Dialog to create new appointments and sap.m.ResponsivePopover to edit already existing appointments.","code":"z2ui5_cl_smpc_app_609","terms":"singleplanningcalendar single planning calendar sap.m singleplanningcalendarcreateapp vbox button singleplanningcalendardayview singleplanningcalendarworkweekview singleplanningcalendarweekview calendarappointment sap.m.singleplanningcalendar src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_609/"},{"area":"samples","group":"Controls","title":"Single Planning Calendar with Drag and Drop","text":"SinglePlanningCalendar with enabled drag and drop functionality, allowing to create appointments with dragging and dropping, to change the start and end date of appointments by selecting and dragging their top or bottom end, and to copy and...","code":"z2ui5_cl_smpc_app_610","terms":"singleplanningcalendar single planning calendar sap.m singleplanningcalendardnd vbox hbox label switch singleplanningcalendardayview singleplanningcalendarworkweekview sap.m.singleplanningcalendar src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_610/"},{"area":"samples","group":"Controls","title":"Calendar with aria-haspopup on special day cells","text":"Calendar demonstrating configurable aria-haspopup attribute on individual day cells via DateTypeRange and a global Calendar-level fallback.","code":"z2ui5_cl_smpc_app_611","terms":"calendar sap.ui.unified calendarariahaspopup html verticallayout text datetyperange popover vbox title sap.ui.unified.calendar src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_611/"},{"area":"samples","group":"Controls","title":"MultiInput Filtering and Suggestions","text":"The default filtering is 'starts with per term', which filters by the beginning of every word in every column.","code":"z2ui5_cl_smpc_app_612","terms":"multiinput multi input sap.m multiinputfilteringsuggestions vbox item column label columnlistitem multiinputext formattedtext sap.m.multiinput src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_612/"},{"area":"samples","group":"Controls","title":"MultiInput - Grouping of items","text":"Items in the MultiInput could be grouped by a property","code":"z2ui5_cl_smpc_app_613","terms":"multiinput multi input sap.m multiinputgrouping verticallayout item column label columnlistitem multiinputext sap.m.multiinput src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_613/"},{"area":"samples","group":"Controls","title":"Object Header Responsive III","text":"This is a responsive Object Header with a Title, number, 6 Statuses/Attributes rendered in 4 columns in a fullScreenOptimized mode (fullScreenOptimized = true).","code":"z2ui5_cl_smpc_app_614","terms":"objectheader object header sap.m objectheaderresponsiveiii objectattribute objectstatus objectmarker icontabbar icontabfilter text responsivepopover sap.m.objectheader src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_614/"},{"area":"samples","group":"Controls","title":"Object Header Responsive IV","text":"This is a responsive Object Header with a Title, number, 6 Statuses/Attributes rendered in 3 columns in a Master/Detail mode (fullScreenOptimized = false).","code":"z2ui5_cl_smpc_app_615","terms":"objectheader object header sap.m objectheaderresponsiveiv objectattribute objectstatus objectmarker icontabbar icontabfilter text responsivepopover sap.m.objectheader src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_615/"},{"area":"samples","group":"Controls","title":"Combo box with value state","text":"The combo box can show different value states.","code":"z2ui5_cl_smpc_app_616","terms":"combobox combo box sap.m comboboxvaluestate verticallayout listitem formattedtext link sap.m.combobox src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_616/"},{"area":"samples","group":"Controls","title":"Icon Tab Bar - Background Design","text":"In this example the backgroundDesign and headerBackgroundDesign properties are demonstrated.","code":"z2ui5_cl_smpc_app_617","terms":"icontabbar icon tab bar sap.m icontabbarbackgrounddesign panel label radiobuttongroup radiobutton icontabfilter icontabseparator sap.m.icontabbar src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_617/"},{"area":"samples","group":"Controls","title":"Icon Tab Bar - Process","text":"In this example, the Icon Tab Bar is used to apply filters on the same content along a business process.","code":"z2ui5_cl_smpc_app_618","terms":"icontabbar icon tab bar sap.m icontabbarprocess icontabfilter icontabseparator table overflowtoolbar label column sap.m.icontabbar src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_618/"},{"area":"samples","group":"Controls","title":"Icon Tab Bar - Responsive Padding","text":"This example demonstrates the Icon Tab Bar's support for paddings that depend on the width of its container","code":"z2ui5_cl_smpc_app_619","terms":"icontabbar icon tab bar sap.m icontabbarresponsivepadding icontabfilter icontabseparator table overflowtoolbar label column sap.m.icontabbar src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_619/"},{"area":"samples","group":"Controls","title":"Icon Tab Bar - Tab Density Mode","text":"In this example, the Icon Tab Bar is used in different tab density modes.","code":"z2ui5_cl_smpc_app_620","terms":"icontabbar icon tab bar sap.m icontabbartabdensitymode panel label radiobuttongroup radiobutton icontabfilter text sap.m.icontabbar src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_620/"},{"area":"samples","group":"Controls","title":"Input - Assisted Tabular Suggestions","text":"In this example assisted input is provided with table-like suggestions where several columns can display more details.","code":"z2ui5_cl_smpc_app_621","terms":"input sap.m inputassistedtabularsuggestions verticallayout column label columnlistitem sap.m.input src 02","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_621/"},{"area":"samples","group":"Controls","title":"Input - Checked","text":"Input checks are handled via the validation of the data binding. In this example there are two inputs that are validated (a) while the user types and (b) when the user continues the process.","code":"z2ui5_cl_smpc_app_622","terms":"input sap.m inputchecked verticallayout label button sap.m.input src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_622/"},{"area":"samples","group":"Controls","title":"Input - States","text":"This example demonstrates the different input field states, e.g. disabled, editable, with value help and value help only.","code":"z2ui5_cl_smpc_app_623","terms":"input sap.m inputstates verticallayout label selectdialog standardlistitem sap.m.input src 01","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_app_623/"},{"area":"samples","group":"Controls","title":"sap.suite.ui.microchart - InteractiveDonutChart","text":"sap.suite.ui.microchart.InteractiveDonutChart expressed in abap2UI5 - a SAPUI5-only control, so the demo kit original is outside OpenUI5 and this is orientation rather than a 1:1 port.","code":"z2ui5_cl_smpc_sapui5_001","terms":"interactivedonutchart shell tabcontainer tab grid link text griddata flexbox interactivedonutchartsegment button sap.suite.ui.microchart src 03","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_sapui5_001/"},{"area":"samples","group":"Controls","title":"sap.suite.ui.microchart - InteractiveLineChart","text":"sap.suite.ui.microchart.InteractiveLineChart expressed in abap2UI5 - a SAPUI5-only control, so the demo kit original is outside OpenUI5 and this is orientation rather than a 1:1 port.","code":"z2ui5_cl_smpc_sapui5_002","terms":"interactivelinechart shell tabcontainer tab grid link text griddata flexbox interactivelinechartpoint verticallayout sap.suite.ui.microchart src 03","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_sapui5_002/"},{"area":"samples","group":"Controls","title":"sap.suite.ui.microchart - InteractiveBarChart","text":"sap.suite.ui.microchart.InteractiveBarChart expressed in abap2UI5 - a SAPUI5-only control, so the demo kit original is outside OpenUI5 and this is orientation rather than a 1:1 port.","code":"z2ui5_cl_smpc_sapui5_003","terms":"interactivebarchart shell tabcontainer tab grid link text griddata flexbox interactivebarchartbar verticallayout sap.suite.ui.microchart src 03","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_sapui5_003/"},{"area":"samples","group":"Controls","title":"sap.suite.ui.microchart - RadialMicroChart","text":"sap.suite.ui.microchart.RadialMicroChart expressed in abap2UI5 - a SAPUI5-only control, so the demo kit original is outside OpenUI5 and this is orientation rather than a 1:1 port.","code":"z2ui5_cl_smpc_sapui5_004","terms":"radialmicrochart shell tabcontainer tab grid link verticallayout horizontallayout sap.suite.ui.microchart src 03","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_sapui5_004/"},{"area":"samples","group":"Controls","title":"sap.suite.ui.microchart - HarveyBallMicroChart","text":"sap.suite.ui.microchart.HarveyBallMicroChart expressed in abap2UI5 - a SAPUI5-only control, so the demo kit original is outside OpenUI5 and this is orientation rather than a 1:1 port.","code":"z2ui5_cl_smpc_sapui5_005","terms":"harveyballmicrochart shell harveyballmicrochartitem sap.suite.ui.microchart src 03","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_sapui5_005/"},{"area":"samples","group":"Controls","title":"sap.suite.ui.commons - ProcessFlow","text":"sap.suite.ui.commons.ProcessFlow expressed in abap2UI5 - a SAPUI5-only control, so the demo kit original is outside OpenUI5 and this is orientation rather than a 1:1 port.","code":"z2ui5_cl_smpc_sapui5_006","terms":"processflow shell processflownode processflowlaneheader sap.suite.ui.commons src 03","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_sapui5_006/"},{"area":"samples","group":"Controls","title":"sap.suite.ui.commons - Timeline","text":"sap.suite.ui.commons.Timeline expressed in abap2UI5 - a SAPUI5-only control, so the demo kit original is outside OpenUI5 and this is orientation rather than a 1:1 port.","code":"z2ui5_cl_smpc_sapui5_007","terms":"timeline shell timelineitem sap.suite.ui.commons src 03","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_sapui5_007/"},{"area":"samples","group":"Controls","title":"sap.suite.ui.commons - networkgraph.Graph","text":"sap.suite.ui.commons.networkgraph.Graph expressed in abap2UI5 - a SAPUI5-only control, so the demo kit original is outside OpenUI5 and this is orientation rather than a 1:1 port.","code":"z2ui5_cl_smpc_sapui5_008","terms":"networkgraph.graph quickview quickviewpage avatar quickviewgroup quickviewgroupelement graph layeredlayout node elementattribute actionbutton nodeimage sap.suite.ui.commons src 03","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_sapui5_008/"},{"area":"samples","group":"Controls","title":"sap.suite.ui.commons - statusindicator.StatusIndicator","text":"sap.suite.ui.commons.statusindicator.StatusIndicator expressed in abap2UI5 - a SAPUI5-only control, so the demo kit original is outside OpenUI5 and this is orientation rather than a 1:1 port.","code":"z2ui5_cl_smpc_sapui5_009","terms":"statusindicator.statusindicator html shell panel text slider responsivescale flexbox statusindicator propertythreshold shapegroup libraryshape sap.suite.ui.commons src 03","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_sapui5_009/"},{"area":"samples","group":"Controls","title":"sap.ui.vbm - AnalyticMap","text":"sap.ui.vbm.AnalyticMap expressed in abap2UI5 - a SAPUI5-only control, so the demo kit original is outside OpenUI5 and this is orientation rather than a 1:1 port.","code":"z2ui5_cl_smpc_sapui5_010","terms":"analyticmap shell mapcontainer containercontent spots spot routes route legend legenditem sap.ui.vbm src 03","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_sapui5_010/"},{"area":"samples","group":"Controls","title":"sap.ndc - BarcodeScannerButton","text":"sap.ndc.BarcodeScannerButton expressed in abap2UI5 - a SAPUI5-only control, so the demo kit original is outside OpenUI5 and this is orientation rather than a 1:1 port.","code":"z2ui5_cl_smpc_sapui5_011","terms":"barcodescannerbutton shell simpleform label input sap.ndc src 03","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_sapui5_011/"},{"area":"samples","group":"Controls","title":"sap.viz - ui5.controls.VizFrame","text":"sap.viz.ui5.controls.VizFrame expressed in abap2UI5 - a SAPUI5-only control, so the demo kit original is outside OpenUI5 and this is orientation rather than a 1:1 port.","code":"z2ui5_cl_smpc_sapui5_012","terms":"ui5.controls.vizframe shell dynamicpage dynamicpagetitle title dynamicpageheader button filterbar filtergroupitem combobox item vizframe sap.viz src 03","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_sapui5_012/"},{"area":"samples","group":"Controls","title":"sap.gantt - GanttChartWithTable","text":"sap.gantt.GanttChartWithTable expressed in abap2UI5 - a SAPUI5-only control, so the demo kit original is outside OpenUI5 and this is orientation rather than a 1:1 port.","code":"z2ui5_cl_smpc_sapui5_013","terms":"ganttchartwithtable messagestrip ganttchartcontainer proportionzoomstrategy timehorizon treetable column text ganttrowsettings task sap.gantt src 03","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_sapui5_013/"},{"area":"samples","group":"Controls","title":"sap.gantt - GanttChartContainer","text":"sap.gantt.GanttChartContainer expressed in abap2UI5 - a SAPUI5-only control, so the demo kit original is outside OpenUI5 and this is orientation rather than a 1:1 port.","code":"z2ui5_cl_smpc_sapui5_014","terms":"ganttchartcontainer shell messagestrip scrollcontainer containertoolbar ganttchartwithtable proportionzoomstrategy timehorizon treetable column customdata text sap.gantt src 03","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smpc_sapui5_014/"},{"area":"samples","group":"Stack","title":"Overview — All Samples in This Repository","text":"every sample in this repository, grouped by what it needs from the system","code":"z2ui5_cl_smps_app_000","terms":"overview launchpad index start nav_app_call popover all samples","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smps_app_000/"},{"area":"samples","group":"Stack","title":"Two Models in One View","text":"one table bound to each, column headers from the metadata","code":"z2ui5_cl_smps_app_315","terms":"odata model service entityset switch_default_model_path external binding","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smps_app_315/"},{"area":"samples","group":"Stack","title":"Smart Table and Variants","text":"with variant management - UI_PRODUCTLIST","code":"z2ui5_cl_smps_app_313","terms":"smarttable smartfilterbar variant management annotations controlconfiguration odata smart controls","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smps_app_313/"},{"area":"samples","group":"Stack","title":"Switch Default Model","text":"device, HTTP and OData model side by side - GWSAMPLE_BASIC","code":"z2ui5_cl_smps_app_314","terms":"switch_default_model_path odata model default binding smart controls","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smps_app_314/"},{"area":"samples","group":"Stack","title":"Smart Multi Input","text":"UI conditions mapped 1:1 onto an ABAP range table","code":"z2ui5_cl_smps_app_319","terms":"smartmultiinput multi input tokens smart controls odata","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smps_app_319/"},{"area":"samples","group":"Stack","title":"SmartField in a SmartForm","text":"needs the GWSAMPLE_BASIC OData service","code":"z2ui5_cl_smps_app_475","terms":"smartform smartfield group groupelement columnlayout annotations smart controls","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smps_app_475/"},{"area":"samples","group":"Stack","title":"SmartForm, editable toggle","text":"needs the GWSAMPLE_BASIC OData service","code":"z2ui5_cl_smps_app_476","terms":"smartform smartfield editable toggle edit mode smart controls","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smps_app_476/"},{"area":"samples","group":"Stack","title":"SmartFilterBar and SmartTable","text":"needs the GWSAMPLE_BASIC OData service","code":"z2ui5_cl_smps_app_477","terms":"smartfilterbar smarttable filter search annotations controlconfiguration smart controls","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smps_app_477/"},{"area":"samples","group":"Stack","title":"Page Variant Management","text":"needs the GWSAMPLE_BASIC OData service","code":"z2ui5_cl_smps_app_478","terms":"smartvariantmanagement page variant save smarttable smartfilterbar filter smart controls","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smps_app_478/"},{"area":"samples","group":"Stack","title":"SmartChart with NavPopover","text":"an analytical service - you supply the path","code":"z2ui5_cl_smps_app_479","terms":"smartchart navpopover semanticobjectcontroller chart semantic object navigation smart controls","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smps_app_479/"},{"area":"samples","group":"Stack","title":"classic FilterBar variants","text":"no service needed - the data is ABAP","code":"z2ui5_cl_smps_app_493","terms":"filterbar filtergroupitem smartvariantmanagement classic filter variant smart controls","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smps_app_493/"},{"area":"samples","group":"Stack","title":"Read a Travel","text":"reads one instance by its key - a missing key comes back in FAILED, not as an exception","code":"z2ui5_cl_smps_app_001","terms":"eml rap read travel select entity behavior","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smps_app_001/"},{"area":"samples","group":"Stack","title":"Create a Travel","text":"MODIFY ... CREATE, key from MAPPED","code":"z2ui5_cl_smps_app_002","terms":"eml rap create travel insert commit datepicker","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smps_app_002/"},{"area":"samples","group":"Stack","title":"Update a Travel","text":"changes single fields of one instance - UPDATE FIELDS names what may be touched","code":"z2ui5_cl_smps_app_003","terms":"eml rap update travel modify commit table","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smps_app_003/"},{"area":"samples","group":"Stack","title":"Delete a Travel","text":"deletes one instance - MODIFY ... DELETE FROM","code":"z2ui5_cl_smps_app_004","terms":"eml rap delete travel remove commit table","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smps_app_004/"},{"area":"samples","group":"Stack","title":"Manage Travels, the Complete App","text":"01-04 plus EXECUTE and COMMIT ENTITIES RESPONSE OF","code":"z2ui5_cl_smps_app_005","terms":"eml rap crud travel manage popup objectstatus","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smps_app_005/"},{"area":"samples","group":"Stack","title":"Which Travels Have One","text":"READ ... %is_draft = mk-on","code":"z2ui5_cl_smps_app_006","terms":"eml rap draft list objectstatus which travels with","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smps_app_006/"},{"area":"samples","group":"Stack","title":"Enter Draft Mode","text":"Edit copies the active instance into a new draft, Resume picks up an existing one","code":"z2ui5_cl_smps_app_007","terms":"eml rap draft edit enter lock mode with","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smps_app_007/"},{"area":"samples","group":"Stack","title":"Change and Save a Draft","text":"UPDATE ... %is_draft = mk-on","code":"z2ui5_cl_smps_app_008","terms":"eml rap draft change save modify with","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smps_app_008/"},{"area":"samples","group":"Stack","title":"Leave Draft Mode","text":"EXECUTE Activate / Discard","code":"z2ui5_cl_smps_app_009","terms":"eml rap draft discard resume leave mode with","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smps_app_009/"},{"area":"samples","group":"Stack","title":"Complete Draft Handling","text":"a whole app, not a snippet - the complete draft lifecycle in one screen","code":"z2ui5_cl_smps_app_010","terms":"eml rap draft handling crud popup complete with","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smps_app_010/"},{"area":"samples","group":"Stack","title":"Ticket App","text":"every create and update raises an entity event","code":"z2ui5_cl_smps_app_011","terms":"rap business events ticket raise publish","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smps_app_011/"},{"area":"samples","group":"Stack","title":"Event Log App","text":"what the handler wrote, newest first","code":"z2ui5_cl_smps_app_012","terms":"rap business events log consumer subscribe","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smps_app_012/"},{"area":"samples","group":"Stack","title":"Stateful Sessions — Locks","text":"ENQUEUE_E_TABLE and ENQUEUE_READ, end and restart the session","code":"z2ui5_cl_smps_app_485","terms":"stateful session lock enqueue dequeue set_session_stateful sessions locks","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smps_app_485/"},{"area":"samples","group":"Stack","title":"Stateful Sessions — Basics","text":"counts up while the session is stateful, starts over once it is not","code":"z2ui5_cl_smps_app_486","terms":"stateful session basics state roundtrip set_session_stateful sessions locks","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smps_app_486/"},{"area":"samples","group":"Stack","title":"Stateful Sessions — Navigation and Locks","text":"every Next Lock View takes the next VARKEY, going back releases it","code":"z2ui5_cl_smps_app_490","terms":"stateful session lock navigation nav_app_call check_on_navigated sessions locks","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smps_app_490/"},{"area":"samples","group":"Stack","title":"Websocket — News Feed","text":"connect, publish, list the active connections - no JavaScript","code":"z2ui5_cl_smps_app_489","terms":"websocket apc amc push channel feedlistitem news popover","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smps_app_489/"},{"area":"samples","group":"Stack","title":"MIME — Audio and Play Sound","text":"a success and an error tone, addressed by their ICF path","code":"z2ui5_cl_smps_app_487","terms":"mime audio sound play_audio wav follow_up_action play","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smps_app_487/"},{"area":"samples","group":"Stack","title":"Read Startup Parameters","text":"what the tile passed in - client->get( )-t_comp_params","code":"z2ui5_cl_smps_app_481","terms":"launchpad fiori flp startup parameters intent","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smps_app_481/"},{"area":"samples","group":"Stack","title":"Set Shell Title","text":"follow_up_action( cs_event-set_title_launchpad )","code":"z2ui5_cl_smps_app_482","terms":"launchpad fiori flp shell title follow_up_action","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smps_app_482/"},{"area":"samples","group":"Stack","title":"Cross-App Navigation Sender","text":"hands two values over to another tile","code":"z2ui5_cl_smps_app_483","terms":"launchpad fiori flp cross app navigation sender intent","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smps_app_483/"},{"area":"samples","group":"Stack","title":"Cross-App Navigation Receiver","text":"reads them back out of its startup parameters","code":"z2ui5_cl_smps_app_484","terms":"launchpad fiori flp cross app navigation receiver intent","url":"https://abap2ui5.github.io/playground/samples/z2ui5_cl_smps_app_484/"}]}