From 6e28b7633165b1fd6b9fc00619e087769996d389 Mon Sep 17 00:00:00 2001 From: sofietoft Date: Wed, 25 Sep 2024 12:49:27 +0200 Subject: [PATCH 1/6] Revome the Render with Macro section --- ...o-become-gdpr-compliant-using-cookiebot.md | 6 ++--- 14/umbraco-forms/developer/rendering-forms.md | 25 +------------------ 2 files changed, 4 insertions(+), 27 deletions(-) diff --git a/13/umbraco-ums/security-and-privacy/gdpr/how-to-become-gdpr-compliant-using-cookiebot.md b/13/umbraco-ums/security-and-privacy/gdpr/how-to-become-gdpr-compliant-using-cookiebot.md index 2288ab4a8cc..e3e30634fe9 100644 --- a/13/umbraco-ums/security-and-privacy/gdpr/how-to-become-gdpr-compliant-using-cookiebot.md +++ b/13/umbraco-ums/security-and-privacy/gdpr/how-to-become-gdpr-compliant-using-cookiebot.md @@ -1,12 +1,12 @@ -# how To Become GDPR compliant using cookiebot +# How To Become GDPR Compliant Using Cookiebot -We can integrate with a cookie consent banner service such as CookieBot and [depending on the choice of the user we can enable or disable certain parts of uMarketingSuite](../../../../the-umarketingsuite-broad-overview/the-umarketingsuite-cookie/module-permissions/). +You can integrate with a cookie consent banner service such as CookieBot and [depending on the users choice you can configure certain parts of uMS](../../../../the-umarketingsuite-broad-overview/the-umarketingsuite-cookie/module-permissions/). This has been covered in our documentation previously, but this tutorial gives you a full working implementation to use with [CookieBot](https://www.cookiebot.com/) in particular. ![]() -#### Code Example +## Code Example The code example below shows how to create the back-end code to read the CookieBot consent cookie from the end-user, and based on that decides which features of uMarketingSuite it should enable or disable. diff --git a/14/umbraco-forms/developer/rendering-forms.md b/14/umbraco-forms/developer/rendering-forms.md index 77f17bb3060..1fbe204a302 100644 --- a/14/umbraco-forms/developer/rendering-forms.md +++ b/14/umbraco-forms/developer/rendering-forms.md @@ -4,7 +4,7 @@ description: Learn the different ways of rendering a form on your website when u # Rendering Forms -There are three options available for rendering a form. +There are two options available for rendering a form. ## Rendering Using a View Component @@ -49,26 +49,3 @@ Then in your view you can use: } ``` - -## Rendering Using a Macro - -With a grid or Rich Text Editor, you need to use a macro. This is also available as an option to display a form in your view, where you provide three parameters: - -```cshtml -@await Umbraco.RenderMacroAsync("renderUmbracoForm", new { FormGuid = "
", FormTheme = "default", ExcludeScripts = "1" }) -``` - -- `FormGuid` is the GUID of a form. -- `FormTheme` is the name of a theme. If not provided, the default theme is used. -- `ExcludeScripts` takes a value of 0 or 1, indicating whether scripts should be excluded from rendering. -- `RedirectToPageId` is an optional picked content item that, if provided, is redirected to once the form has been submitted. It will be used in preference to post-submission behavior defined on the form itself. - - -Similarly, you can reference a form picker property on your page: - -```cshtml -@if (Model.FormId is Guid formId) -{ - @await Umbraco.RenderMacroAsync("renderUmbracoForm", new { FormGuid = formId, FormTheme = Model.FormTheme, ExcludeScripts = "1" }) -} -``` \ No newline at end of file From e583199f6a953d1e8c59f3f46925e9456e7935d3 Mon Sep 17 00:00:00 2001 From: sofietoft Date: Wed, 25 Sep 2024 13:54:59 +0200 Subject: [PATCH 2/6] Add more details about static and dynamic options --- 14/umbraco-forms/developer/rendering-forms.md | 34 ++++++++++++++----- 1 file changed, 26 insertions(+), 8 deletions(-) diff --git a/14/umbraco-forms/developer/rendering-forms.md b/14/umbraco-forms/developer/rendering-forms.md index 1fbe204a302..7e1b0f132f4 100644 --- a/14/umbraco-forms/developer/rendering-forms.md +++ b/14/umbraco-forms/developer/rendering-forms.md @@ -8,12 +8,37 @@ There are two options available for rendering a form. ## Rendering Using a View Component -To display a form in your view, you can make a call to a view component: +To display a form in your view, you can make a call to a view component. You can use a forms GUID directly or add a form dynamically by referencing a form selected via a Forms Picker. + +When selecting a theme, it can be added directly as a string or dynamically by referencing a theme picked via a Theme Picker. + +{% tabs %} + +{% tab title="Dynamic" %} + +```csharp +var additionalData = new Dictionary { { "foo", "bar" }, { "buzz", "baz" } }; +@await Component.InvokeAsync("RenderForm", new { formId = @Model.Form, theme = @Model.Theme, includeScripts = false, additionalData }) +``` + +This example uses a Forms Picker with `form` as alias, and a Theme Picker with `theme` as alias. + +This example also adds magic strings replacements using the `additionalData` parameter. + +{% endtab %} + +{% tab title="Static" %} ```cshtml @await Component.InvokeAsync("RenderForm", new { formId = Guid.Parse(""), theme = "default", includeScripts = false }) ``` +This example hard-codes the GUID of a form and the name of the theme. + +{% endtab %} + +{% endtabs %} + Six parameters can be provided: - `formId` is the GUID of a form. @@ -23,13 +48,6 @@ Six parameters can be provided: - `redirectToPageId` is an optional GUID for a content page that, if provided, is redirected to once the form has been submitted. It will be used in preference to post-submission behavior defined on the form itself. - `additionalData` is an optional dictionary of string values. When provided it will be used as a source for ["magic string" replacements](./magic-strings.md). The data will be associated with the created record and made available for custom logic or update within workflows. -Usually, rather than hard-coding the form's GUID and other details, you'll use a form, theme or content picker on your page: - -```csharp -var additionalData = new Dictionary { { "foo", "bar" }, { "buzz", "baz" } }; -@await Component.InvokeAsync("RenderForm", new { formId = @Model.Form, theme = @Model.Theme, includeScripts = false, additionalData }) -``` - ## Rendering Using a Tag Helper If you prefer a tag helper syntax, you can use one that ships with Umbraco Forms. From c241257cb01fe775f91df8908d00133bb7ef63d0 Mon Sep 17 00:00:00 2001 From: sofietoft Date: Wed, 25 Sep 2024 13:56:24 +0200 Subject: [PATCH 3/6] Replace macro mentiosn with link --- 14/umbraco-forms/developer/themes.md | 12 ++---------- 1 file changed, 2 insertions(+), 10 deletions(-) diff --git a/14/umbraco-forms/developer/themes.md b/14/umbraco-forms/developer/themes.md index 87127556c71..bc41c6f69e5 100644 --- a/14/umbraco-forms/developer/themes.md +++ b/14/umbraco-forms/developer/themes.md @@ -44,17 +44,9 @@ If adding or amending client-side scripts, you need to copy the `Script.cshtml` ## Using a Theme -To use a theme with a Form use the "Insert Form" macro where you will be presented with the options of the form you wish to insert along with an option to pick a theme. This displays the list of theme folders found at `Views/Partials/Forms/Themes`. +When rendering a form in a view file, you can specify which theme to use with the form. -![Choosing and using a theme](../../../10/umbraco-forms/developer/images/select-a-theme.png) - -When you are rendering your form directly in your template, you need to specify your theme by filling out the `FormTheme` attribute: - -```csharp -@await Umbraco.RenderMacroAsync("renderUmbracoForm", new {FormGuid="1ec026cb-d4d3-496c-b8e8-90e0758c78d8", FormTheme="MyFormTheme", ExcludeScripts="0"}) -``` - -If you do not pick and/or set a theme, the `default` theme will be used to render the form. +Learn more about how to render a form with a theme in the [Rendering Forms](./rendering-forms.md) article. ## Theme Fallbacks From 7aa5170768d9091967a9aaf857228c03d90ad080 Mon Sep 17 00:00:00 2001 From: sofietoft Date: Thu, 26 Sep 2024 09:21:27 +0200 Subject: [PATCH 4/6] Update based on feedback --- 14/umbraco-forms/developer/rendering-forms.md | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/14/umbraco-forms/developer/rendering-forms.md b/14/umbraco-forms/developer/rendering-forms.md index 7e1b0f132f4..e00473960e6 100644 --- a/14/umbraco-forms/developer/rendering-forms.md +++ b/14/umbraco-forms/developer/rendering-forms.md @@ -17,14 +17,11 @@ When selecting a theme, it can be added directly as a string or dynamically by r {% tab title="Dynamic" %} ```csharp -var additionalData = new Dictionary { { "foo", "bar" }, { "buzz", "baz" } }; -@await Component.InvokeAsync("RenderForm", new { formId = @Model.Form, theme = @Model.Theme, includeScripts = false, additionalData }) +@await Component.InvokeAsync("RenderForm", new { formId = @Model.Form, theme = @Model.Theme, includeScripts = false }) ``` This example uses a Forms Picker with `form` as alias, and a Theme Picker with `theme` as alias. -This example also adds magic strings replacements using the `additionalData` parameter. - {% endtab %} {% tab title="Static" %} @@ -48,6 +45,13 @@ Six parameters can be provided: - `redirectToPageId` is an optional GUID for a content page that, if provided, is redirected to once the form has been submitted. It will be used in preference to post-submission behavior defined on the form itself. - `additionalData` is an optional dictionary of string values. When provided it will be used as a source for ["magic string" replacements](./magic-strings.md). The data will be associated with the created record and made available for custom logic or update within workflows. +The following example shows how the `additionalData` parameter is used: + +```csharp +var additionalData = new Dictionary { { "foo", "bar" }, { "buzz", "baz" } }; +@await Component.InvokeAsync("RenderForm", new { formId = @Model.Form, theme = @Model.Theme, includeScripts = false, additionalData }) +``` + ## Rendering Using a Tag Helper If you prefer a tag helper syntax, you can use one that ships with Umbraco Forms. From 51ada87984c4d5c7f3a578043e239f88e64c3121 Mon Sep 17 00:00:00 2001 From: sofietoft Date: Thu, 26 Sep 2024 09:27:40 +0200 Subject: [PATCH 5/6] Attempt to make code more readable --- 14/umbraco-forms/developer/rendering-forms.md | 20 ++++++++++++++----- 1 file changed, 15 insertions(+), 5 deletions(-) diff --git a/14/umbraco-forms/developer/rendering-forms.md b/14/umbraco-forms/developer/rendering-forms.md index e00473960e6..e5be9d5d799 100644 --- a/14/umbraco-forms/developer/rendering-forms.md +++ b/14/umbraco-forms/developer/rendering-forms.md @@ -17,7 +17,9 @@ When selecting a theme, it can be added directly as a string or dynamically by r {% tab title="Dynamic" %} ```csharp -@await Component.InvokeAsync("RenderForm", new { formId = @Model.Form, theme = @Model.Theme, includeScripts = false }) +@await Component.InvokeAsync("RenderForm", new { formId = @Model.Form, + theme = @Model.Theme, + includeScripts = false }) ``` This example uses a Forms Picker with `form` as alias, and a Theme Picker with `theme` as alias. @@ -26,8 +28,10 @@ This example uses a Forms Picker with `form` as alias, and a Theme Picker with ` {% tab title="Static" %} -```cshtml -@await Component.InvokeAsync("RenderForm", new { formId = Guid.Parse(""), theme = "default", includeScripts = false }) +```csharp +@await Component.InvokeAsync("RenderForm", new { formId = Guid.Parse(""), + theme = "default", + includeScripts = false }) ``` This example hard-codes the GUID of a form and the name of the theme. @@ -49,7 +53,10 @@ The following example shows how the `additionalData` parameter is used: ```csharp var additionalData = new Dictionary { { "foo", "bar" }, { "buzz", "baz" } }; -@await Component.InvokeAsync("RenderForm", new { formId = @Model.Form, theme = @Model.Theme, includeScripts = false, additionalData }) +@await Component.InvokeAsync("RenderForm", new { formId = @Model.Form, + theme = @Model.Theme, + includeScripts = false, + additionalData }) ``` ## Rendering Using a Tag Helper @@ -68,6 +75,9 @@ Then in your view you can use: @if (Model.Form.HasValue) { var additionalData = new Dictionary { { "foo", "bar" }, { "buzz", "baz" } }; - + } ``` From 02a019c345ce5ba89d60c7132680d7852a063ddf Mon Sep 17 00:00:00 2001 From: sofietoft Date: Thu, 26 Sep 2024 09:30:40 +0200 Subject: [PATCH 6/6] Try code wrap instead --- 14/umbraco-forms/developer/rendering-forms.md | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/14/umbraco-forms/developer/rendering-forms.md b/14/umbraco-forms/developer/rendering-forms.md index e5be9d5d799..9e5b31ff10f 100644 --- a/14/umbraco-forms/developer/rendering-forms.md +++ b/14/umbraco-forms/developer/rendering-forms.md @@ -51,14 +51,15 @@ Six parameters can be provided: The following example shows how the `additionalData` parameter is used: +{% code wrap="true" %} + ```csharp var additionalData = new Dictionary { { "foo", "bar" }, { "buzz", "baz" } }; -@await Component.InvokeAsync("RenderForm", new { formId = @Model.Form, - theme = @Model.Theme, - includeScripts = false, - additionalData }) +@await Component.InvokeAsync("RenderForm", new { formId = @Model.Form, theme = @Model.Theme, includeScripts = false, additionalData }) ``` +{% endcode %} + ## Rendering Using a Tag Helper If you prefer a tag helper syntax, you can use one that ships with Umbraco Forms.