{"id":4362,"date":"2019-03-22T10:26:27","date_gmt":"2019-03-22T09:26:27","guid":{"rendered":"https:\/\/www.softproject.de\/softproject-2\/softproject-2\/?post_type=demos&#038;p=4362"},"modified":"2021-11-23T08:56:20","modified_gmt":"2021-11-23T07:56:20","slug":"get-started-web-apps-1","status":"publish","type":"demos","link":"https:\/\/www.softproject.de\/en\/demos\/get-started-web-apps-1\/","title":{"rendered":"Highlight of des Release 6.0 of the X4\u00a0Suite Digitization Platform: Create Your First Web App in 5 Minutes (Part 1)"},"content":{"rendered":"<section class=\"wpb-content-wrapper\"><p>[vc_row row_height_percent=&#8221;0&#8243; override_padding=&#8221;yes&#8221; h_padding=&#8221;2&#8243; top_padding=&#8221;3&#8243; bottom_padding=&#8221;3&#8243; back_color=&#8221;color-nhtu&#8221; overlay_alpha=&#8221;50&#8243; gutter_size=&#8221;3&#8243; column_width_percent=&#8221;100&#8243; shift_y=&#8221;0&#8243; z_index=&#8221;0&#8243;][vc_column column_width_percent=&#8221;100&#8243; position_horizontal=&#8221;left&#8221; gutter_size=&#8221;3&#8243; style=&#8221;dark&#8221; overlay_alpha=&#8221;50&#8243; shift_x=&#8221;0&#8243; shift_y=&#8221;0&#8243; shift_y_down=&#8221;0&#8243; z_index=&#8221;0&#8243; medium_width=&#8221;0&#8243; mobile_width=&#8221;0&#8243; width=&#8221;1\/1&#8243;][vc_custom_heading heading_semantic=&#8221;h1&#8243; text_size=&#8221;h1&#8243;]Get started with X4 BPMS 6.0: Web Apps[\/vc_custom_heading][vc_column_text text_lead=&#8221;yes&#8221;]Part 1: Create Your First Web App in 5 Minutes.[\/vc_column_text][\/vc_column][\/vc_row][vc_row row_height_percent=&#8221;0&#8243; override_padding=&#8221;yes&#8221; h_padding=&#8221;2&#8243; top_padding=&#8221;3&#8243; bottom_padding=&#8221;3&#8243; overlay_alpha=&#8221;50&#8243; gutter_size=&#8221;4&#8243; column_width_percent=&#8221;100&#8243; shift_y=&#8221;0&#8243; z_index=&#8221;0&#8243;][vc_column column_width_percent=&#8221;100&#8243; position_horizontal=&#8221;left&#8221; gutter_size=&#8221;3&#8243; overlay_alpha=&#8221;50&#8243; shift_x=&#8221;0&#8243; shift_y=&#8221;0&#8243; shift_y_down=&#8221;0&#8243; z_index=&#8221;0&#8243; medium_width=&#8221;0&#8243; mobile_width=&#8221;0&#8243; width=&#8221;7\/12&#8243;][vc_custom_heading]Tutorial: First Steps with X4 Activities Web Apps[\/vc_custom_heading][vc_custom_heading heading_semantic=&#8221;h3&#8243; text_size=&#8221;h3&#8243;]Contents[\/vc_custom_heading][vc_column_text]1. <a href=\"#creating-a-web-app\">Creating a X4 Activities Web App<\/a><\/p>\n<p>2. <a href=\"#processing-the-web-app\">Processing the Web App<\/a><\/p>\n<p>3. <a href=\"#checking-the-project-files\">Checking the Project Files<\/a><\/p>\n<p>4. <a href=\"#next-steps\">Next Steps<\/a>[\/vc_column_text][vc_column_text]This is the first of a series of tutorials. In this series you will learn the basics of creating a Web App with X4 Activities.<\/p>\n<p>A more detailed introduction can be found in the X4 Activities manual.<\/p>\n<p>At the end of the series, you will have a Web App that you can use to manage a movie database.[\/vc_column_text][uncode_list icon=&#8221;fa fa-check&#8221; icon_color=&#8221;accent&#8221;]In this tutorial:<\/p>\n<ul>\n<li>You will create a Web App Project in the X4 Designer.<\/li>\n<li>You will process the Web App.<\/li>\n<li>You will check the project files.<\/li>\n<\/ul>\n<p>[\/uncode_list][vc_column_text]At the end of this tutorial you will have a working X4 Activities Web App, which you will use in later tutorials.[\/vc_column_text][\/vc_column][vc_column column_width_percent=&#8221;100&#8243; gutter_size=&#8221;3&#8243; override_padding=&#8221;yes&#8221; column_padding=&#8221;3&#8243; back_color=&#8221;color-xsdn&#8221; overlay_alpha=&#8221;50&#8243; shift_x=&#8221;0&#8243; shift_y=&#8221;0&#8243; shift_y_down=&#8221;0&#8243; z_index=&#8221;0&#8243; medium_width=&#8221;0&#8243; mobile_width=&#8221;0&#8243; radius=&#8221;lg&#8221; shadow=&#8221;std&#8221; width=&#8221;5\/12&#8243;][vc_custom_heading text_size=&#8221;h3&#8243;]Case[\/vc_custom_heading][vc_column_text]Highlights of Release 6.0 of the X4 BPMS[\/vc_column_text][vc_custom_heading text_size=&#8221;h3&#8243;]X4 BPMS Components[\/vc_custom_heading][vc_column_text]X4 Activities Web App[\/vc_column_text][vc_custom_heading text_size=&#8221;h3&#8243;]Industries[\/vc_custom_heading][vc_column_text]All Industries[\/vc_column_text][\/vc_column][\/vc_row][vc_row row_height_percent=&#8221;0&#8243; overlay_alpha=&#8221;50&#8243; gutter_size=&#8221;3&#8243; column_width_percent=&#8221;100&#8243; shift_y=&#8221;0&#8243; z_index=&#8221;0&#8243; row_name=&#8221;creating-a-web-app&#8221;][vc_column width=&#8221;7\/12&#8243;][vc_custom_heading heading_semantic=&#8221;h3&#8243; text_size=&#8221;h3&#8243;]1. Creating a X4 Activities Web App[\/vc_custom_heading][vc_column_text]To open the <b>Project Creation Wizard<\/b>, click <b>New<\/b> &gt; <b>Web App Project<\/b> in the <b>File<\/b> menu of the X4 Designer.[\/vc_column_text][vc_single_image media=&#8221;4366&#8243; media_width_percent=&#8221;100&#8243;][vc_column_text]Name the project <em><code>MovieManager<\/code><\/em>.[\/vc_column_text][vc_single_image media=&#8221;4367&#8243; media_width_percent=&#8221;100&#8243;][vc_column_text]The following project is created:[\/vc_column_text][vc_single_image media=&#8221;4368&#8243; media_width_percent=&#8221;100&#8243;][\/vc_column][vc_column width=&#8221;5\/12&#8243;][\/vc_column][\/vc_row][vc_row row_height_percent=&#8221;0&#8243; overlay_alpha=&#8221;50&#8243; gutter_size=&#8221;3&#8243; column_width_percent=&#8221;100&#8243; shift_y=&#8221;0&#8243; z_index=&#8221;0&#8243; row_name=&#8221;processing-the-web-app&#8221;][vc_column width=&#8221;7\/12&#8243;][vc_custom_heading heading_semantic=&#8221;h3&#8243; text_size=&#8221;h3&#8243;]2. Processing the Web App[\/vc_custom_heading][vc_column_text]Right-click on the Web App project. Select <b>Open Web App in browser<\/b> from the context menu.[\/vc_column_text][vc_single_image media=&#8221;4369&#8243; media_width_percent=&#8221;100&#8243;][vc_column_text]In the browser, log in to the Web App with the default credentials.[\/vc_column_text][vc_single_image media=&#8221;4365&#8243; media_width_percent=&#8221;100&#8243;][vc_column_text]After the login, you will get to your Web App.[\/vc_column_text][vc_single_image media=&#8221;4370&#8243; media_width_percent=&#8221;100&#8243;][\/vc_column][vc_column width=&#8221;5\/12&#8243;][\/vc_column][\/vc_row][vc_row row_height_percent=&#8221;0&#8243; overlay_alpha=&#8221;50&#8243; gutter_size=&#8221;3&#8243; column_width_percent=&#8221;100&#8243; shift_y=&#8221;0&#8243; z_index=&#8221;0&#8243; row_name=&#8221;checking-the-project-files&#8221;][vc_column width=&#8221;7\/12&#8243;][vc_custom_heading heading_semantic=&#8221;h3&#8243; text_size=&#8221;h3&#8243;]3. Checking the Project Files[\/vc_custom_heading][vc_column_text]The following is an overview of the project folders and files that you will use in the later tutorials.[\/vc_column_text][vc_custom_heading heading_semantic=&#8221;h4&#8243; text_size=&#8221;h4&#8243;]Folder \u201cResources\u201d[\/vc_custom_heading][vc_column_text]This folder contains static files (resources) that are available to the end user through the Web App, such as the application logo or displayed images.<\/p>\n<p>CAUTION: The contents of this folder may be available on the internet![\/vc_column_text][vc_custom_heading heading_semantic=&#8221;h4&#8243; text_size=&#8221;h4&#8243;]Folder \u201cServices\u201d[\/vc_custom_heading][vc_column_text]This folder contains a folder structure similar to the structure of ESB projects. Within this folder, the logic of the Web App is defined with X4 processes. The following subfolders are explained here:[\/vc_column_text][uncode_list icon=&#8221;fa fa-check&#8221; icon_color=&#8221;accent&#8221;]<\/p>\n<ul>\n<li><code>Adapters<\/code>: Contains references to adapters.<\/li>\n<li><code>Processes<\/code>: Contains X4 processes that represent the logic of the Web App.<\/li>\n<li><code>Resources<\/code>: Contains resources for use in the processes (NOTE: The contents of this folder are NOT available on the internet!)<\/li>\n<li><code>TemporaryFiles<\/code>: Contains temporary files for use in the processes.<\/li>\n<li><code>Transformations<\/code>: Contains transformation file for use in the processes.<\/li>\n<\/ul>\n<p>[\/uncode_list][vc_custom_heading heading_semantic=&#8221;h4&#8243; text_size=&#8221;h4&#8243;]Folder \u201cTranslations\u201d[\/vc_custom_heading][vc_column_text]Contains translation files for localizing the Web App.[\/vc_column_text][vc_custom_heading heading_semantic=&#8221;h4&#8243; text_size=&#8221;h4&#8243;]File \u201cMovieManager.dpr\u201d[\/vc_custom_heading][vc_column_text]Declarative description file (XML) of the privacy policy of the Web App. This file is optional and can be removed if no privacy statement is required for the Web App.[\/vc_column_text][vc_custom_heading heading_semantic=&#8221;h4&#8243; text_size=&#8221;h4&#8243;]File \u201cMovieManager.imprint\u201d[\/vc_custom_heading][vc_column_text]Declarative description file (XML) of the imprint of the Web App. This file is optional and can be removed if no imprint is required for the Web App.[\/vc_column_text][vc_custom_heading heading_semantic=&#8221;h4&#8243; text_size=&#8221;h4&#8243;]File \u201cMovieManager.theme\u201d[\/vc_custom_heading][vc_column_text]Theme Editor for the Web App. The Theme Editor enables to customize the theme based on Material Design color palettes.[\/vc_column_text][vc_custom_heading heading_semantic=&#8221;h4&#8243; text_size=&#8221;h4&#8243;]File \u201cMovieManager.wad\u201d[\/vc_custom_heading][vc_column_text]Declarative description file (XML) of the Web App. The Web App definition contains the description of the data model as well as the description of the surfaces.<\/p>\n<p>You can find further information on WAD files in the X4 Activities manual.[\/vc_column_text][\/vc_column][vc_column width=&#8221;5\/12&#8243;][\/vc_column][\/vc_row][vc_row row_height_percent=&#8221;0&#8243; overlay_alpha=&#8221;50&#8243; gutter_size=&#8221;3&#8243; column_width_percent=&#8221;100&#8243; shift_y=&#8221;0&#8243; z_index=&#8221;0&#8243; row_name=&#8221;next-steps&#8221;][vc_column width=&#8221;7\/12&#8243;][vc_custom_heading heading_semantic=&#8221;h3&#8243; text_size=&#8221;h3&#8243;]4. Next Steps[\/vc_custom_heading][uncode_list icon=&#8221;fa fa-check&#8221; icon_color=&#8221;accent&#8221;]In this tutorial:<\/p>\n<ul>\n<li>You have created an X4 Activities Web App.<\/li>\n<li>You have processed the Web App.<\/li>\n<li>You have checked the project files.<\/li>\n<\/ul>\n<p>[\/uncode_list][vc_column_text]Continue with the next tutorial of the series (on the start page of the X4 Designer \u2013 as soon as available)[\/vc_column_text][vc_button button_color=&#8221;accent&#8221; radius=&#8221;btn-circle&#8221; border_width=&#8221;0&#8243; link=&#8221;url:%20https%3A%2F%2Fsoftproject.de%2Fde%2F%3Fdateidownload%3D6761||target:%20_blank|&#8221;]Download Demo Files[\/vc_button][\/vc_column][vc_column width=&#8221;5\/12&#8243;][\/vc_column][\/vc_row][vc_row][vc_column width=&#8221;2\/3&#8243;][vc_custom_heading]Do you have any further questions?[\/vc_custom_heading][vc_empty_space empty_h=&#8221;1&#8243;]\n<div class=\"wpcf7 no-js\" id=\"wpcf7-f1829-o1\" lang=\"de-DE\" dir=\"ltr\">\n<div class=\"screen-reader-response\"><p role=\"status\" aria-live=\"polite\" aria-atomic=\"true\"><\/p> <ul><\/ul><\/div>\n<form action=\"\/en\/wp-json\/wp\/v2\/demos\/4362\/#wpcf7-f1829-o1\" method=\"post\" class=\"wpcf7-form init\" aria-label=\"Kontaktformular\" novalidate=\"novalidate\" data-status=\"init\">\n<div style=\"display: none;\">\n<input type=\"hidden\" name=\"_wpcf7\" value=\"1829\" \/>\n<input type=\"hidden\" name=\"_wpcf7_version\" value=\"5.9.3\" \/>\n<input type=\"hidden\" name=\"_wpcf7_locale\" value=\"de_DE\" \/>\n<input type=\"hidden\" name=\"_wpcf7_unit_tag\" value=\"wpcf7-f1829-o1\" \/>\n<input type=\"hidden\" name=\"_wpcf7_container_post\" value=\"0\" \/>\n<input type=\"hidden\" name=\"_wpcf7_posted_data_hash\" value=\"\" \/>\n<input type=\"hidden\" name=\"_wpcf7cf_hidden_group_fields\" value=\"[]\" \/>\n<input type=\"hidden\" name=\"_wpcf7cf_hidden_groups\" value=\"[]\" \/>\n<input type=\"hidden\" name=\"_wpcf7cf_visible_groups\" value=\"[]\" \/>\n<input type=\"hidden\" name=\"_wpcf7cf_repeaters\" value=\"[]\" \/>\n<input type=\"hidden\" name=\"_wpcf7cf_steps\" value=\"{}\" \/>\n<input type=\"hidden\" name=\"_wpcf7cf_options\" value=\"{&quot;form_id&quot;:1829,&quot;conditions&quot;:[],&quot;settings&quot;:{&quot;animation&quot;:&quot;yes&quot;,&quot;animation_intime&quot;:200,&quot;animation_outtime&quot;:200,&quot;conditions_ui&quot;:&quot;normal&quot;,&quot;notice_dismissed&quot;:false,&quot;notice_dismissed_rollback-cf7-5.6&quot;:true}}\" \/>\n<input type=\"hidden\" name=\"_wpcf7_recaptcha_response\" value=\"\" \/>\n<\/div>\n<p><span class=\"wpcf7-form-control-wrap\" data-name=\"Anrede\"><select class=\"wpcf7-form-control wpcf7-select form-xl\" aria-invalid=\"false\" name=\"Anrede\"><option value=\"Mr.\">Mr.<\/option><option value=\"Mrs.\">Mrs.<\/option><\/select><\/span>\n<\/p>\n<div class=\"wpcf7-inline-wrapper\">\n\t<p class=\"wpcf7-inline-field\"><span class=\"wpcf7-form-control-wrap\" data-name=\"your-first-name\"><input size=\"40\" class=\"wpcf7-form-control wpcf7-text wpcf7-validates-as-required form-xl\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"First Name*\" value=\"\" type=\"text\" name=\"your-first-name\" \/><\/span>\n\t<\/p>\n\t<p class=\"wpcf7-inline-field\"><span class=\"wpcf7-form-control-wrap\" data-name=\"your-last-name\"><input size=\"40\" class=\"wpcf7-form-control wpcf7-text wpcf7-validates-as-required form-xl\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"Last Name*\" value=\"\" type=\"text\" name=\"your-last-name\" \/><\/span>\n\t<\/p>\n<\/div>\n<p><span class=\"wpcf7-form-control-wrap\" data-name=\"your-company\"><input size=\"40\" class=\"wpcf7-form-control wpcf7-text wpcf7-validates-as-required form-xl form-fluid\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"Company*\" value=\"\" type=\"text\" name=\"your-company\" \/><\/span>\n<\/p>\n<div class=\"wpcf7-inline-wrapper\">\n\t<p class=\"wpcf7-inline-field\"><span class=\"wpcf7-form-control-wrap\" data-name=\"your-phone\"><input size=\"40\" class=\"wpcf7-form-control wpcf7-tel wpcf7-text wpcf7-validates-as-tel form-xl\" aria-invalid=\"false\" placeholder=\"Phone\" value=\"\" type=\"tel\" name=\"your-phone\" \/><\/span>\n\t<\/p>\n\t<p class=\"wpcf7-inline-field\"><span class=\"wpcf7-form-control-wrap\" data-name=\"your-email\"><input size=\"40\" class=\"wpcf7-form-control wpcf7-email wpcf7-validates-as-required wpcf7-text wpcf7-validates-as-email form-xl\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"E-Mail Address*\" value=\"\" type=\"email\" name=\"your-email\" \/><\/span>\n\t<\/p>\n<\/div>\n<p><span class=\"wpcf7-form-control-wrap\" data-name=\"your-message\"><textarea cols=\"40\" rows=\"10\" class=\"wpcf7-form-control wpcf7-textarea wpcf7-validates-as-required form-xl\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"Your Message*\" name=\"your-message\"><\/textarea><\/span>\n<\/p>\n<p style=\"text-align:left\"><span class=\"wpcf7-form-control-wrap\" data-name=\"acceptance-phone\"><span class=\"wpcf7-form-control wpcf7-acceptance optional\"><span class=\"wpcf7-list-item\"><label><input type=\"checkbox\" name=\"acceptance-phone\" value=\"1\" aria-invalid=\"false\" \/><span class=\"wpcf7-list-item-label\">Please call me back.<\/span><\/label><\/span><\/span><\/span>\n<\/p>\n<p style=\"text-align:left\"><span class=\"wpcf7-form-control-wrap\" data-name=\"acceptance-gdpr\"><span class=\"wpcf7-form-control wpcf7-acceptance\"><span class=\"wpcf7-list-item\"><label><input type=\"checkbox\" name=\"acceptance-gdpr\" value=\"1\" aria-invalid=\"false\" \/><span class=\"wpcf7-list-item-label\">Herewith I accept the <a href=\"https:\/\/www.softproject.de\/en\/privacy-policy\/\">privacy policy<\/a><\/span><\/label><\/span><\/span><\/span>\n<\/p>\n<p><span id=\"wpcf7-6633e07971a02-wrapper\" class=\"wpcf7-form-control-wrap mail-442-wrap\" ><input id=\"wpcf7-6633e07971a02-field\"  class=\"wpcf7-form-control wpcf7-text\" type=\"text\" name=\"mail-442\" value=\"\" size=\"40\" tabindex=\"-1\" autocomplete=\"off\" \/><\/span>\n<\/p>\n<p><input class=\"wpcf7-form-control wpcf7-submit has-spinner btn btn-accent btn-circle\" type=\"submit\" value=\"Send\" \/>\n<\/p><div class=\"frc-captcha \" data-sitekey=\"FCMQBG1B2F8RVSFC\" data-lang=\"en\" ><\/div>\n\t\t<noscript>You need to enable Javascript for the anti-spam check.<\/noscript><div class=\"wpcf7-response-output\" aria-hidden=\"true\"><\/div>\n<\/form>\n<\/div>\n[\/vc_column][vc_column width=&#8221;1\/3&#8243;][\/vc_column][\/vc_row]<\/p>\n<\/section>","protected":false},"excerpt":{"rendered":"<p>Get started with X4\u00a0Suite 6.0 Web Apps \u2013 Teil 1: Erstellen Sie Ihre erste Web App in 5 Minuten.<\/p>\n","protected":false},"featured_media":0,"menu_order":0,"template":"","demos_kategorien":[43,82],"distributor_meta":false,"distributor_terms":false,"distributor_media":false,"distributor_original_site_name":"SoftProject (EN)","distributor_original_site_url":"https:\/\/www.softproject.de\/en","push-errors":false,"_links":{"self":[{"href":"https:\/\/www.softproject.de\/en\/wp-json\/wp\/v2\/demos\/4362"}],"collection":[{"href":"https:\/\/www.softproject.de\/en\/wp-json\/wp\/v2\/demos"}],"about":[{"href":"https:\/\/www.softproject.de\/en\/wp-json\/wp\/v2\/types\/demos"}],"version-history":[{"count":0,"href":"https:\/\/www.softproject.de\/en\/wp-json\/wp\/v2\/demos\/4362\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.softproject.de\/en\/wp-json\/wp\/v2\/media?parent=4362"}],"wp:term":[{"taxonomy":"demos_kategorien","embeddable":true,"href":"https:\/\/www.softproject.de\/en\/wp-json\/wp\/v2\/demos_kategorien?post=4362"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}