https://discord.umbraco.com logo
Join Discord
Powered by
FormPicker Block Label
# help-with-umbraco
c
V13.2.2 Any idea how to get the name of the picked Form to show as the label for a block that just consists of a FormPicker? Thanks.
l
@Craig100 I believe the block item only has the form id context, in order to output the form name, youll have to create a custom view, which takes that form id, gets the form, then outputs the name, ive done something similar recently, so can give you some sample code, ill put that together now, give me 10 mins
Under your App_Plugins folder, create a folder that is the same as your block name, if your block is FormBlock, call this FormBlockView as an example. Under this create your package manifest:
Copy code
{
  "javascript": [
    "~/App_Plugins/FormBlockView/formBlock.controller.js"
  ]
}
This points to your controller page, that looks something like this:
Copy code
angular.module("umbraco").controller("formBlockController", function ($scope, formResource) {

  const data = $scope.block.data;

  console.info({ data, formResource });

  const amendData = () => {
    if (data.form) {
      formResource.getByGuid(data.form).then(response => {
        console.info({ response });
        const fields = [];
        let fieldsText;
        let totalPages = 0;
        response.data.pages.forEach(page => {
          totalPages++;
          page.fieldSets.forEach(fieldset => {
            fieldset.containers.forEach(container => {
              container.fields.forEach(field => {
                fields.push(field.caption);
              });
            });
          });
        });
        const fieldsToDisplay = 3;
        fieldsText = fields.slice(0, Math.min(fields.length, fieldsToDisplay)).join(", ");
        if (fieldsToDisplay < fields.length) {
          fieldsText += ` + ${fields.length - fieldsToDisplay} more`
        }
        $scope.name = response.data.name;
        $scope.fields = fieldsText
        $scope.pages = totalPages === 1 ? `${totalPages} page` : `${totalPages} pages`;
      });
    }
  };

  amendData();

  $scope.$watch("block.data", amendData, true);

});
(Note in the example above, we do some magic around outputting the form item captions)
Then, your html file will look like this:
Copy code
<div ng-controller="formBlockController" style="border: 1px solid #ccc; padding: 10px;">
    <div><strong>{{ name }}</strong></div>
    <div style="font-size: .95em">
        <div style="padding-top: .5em;">{{ fields }}</div>
        <div style="padding-top: .5em; color: #999;">{{ pages }}</div>
    </div>
</div>
Your folder structure will look like this: https://cdn.discordapp.com/attachments/1222910232204673095/1222915516314816612/image.png?ex=6617f3d3&is=66057ed3&hm=4b82b92dbca4745b26569caf5a5919c4a3bac829115b0d99c721ccdf28184d98&
A note, in the controller.js youll see we have an if statement on 
if(data.form)
, 
form
in this case is the alias of my form picker on the block, so update this to be whatever you have
Let me know how you get on @Craig100
c
Wow, thanks very much! I'll have a go shortly. Just trying to work out how to render the form from a form picker. You've just given me an idea for that as well 🙂
l
Good stuff! You can use the above as a template as well to display your block items as actual html, instead of a simple string, so your block items could look as good as they do on the frontend, thats how I tend to use them. If you do render the form, youll have to share the code, could be a good bit of code to save for future projects 😃
c
I was only talking about rendering the form in the front end, not the in the grid 😉 i.e.
Copy code
<div>
    @await Component.InvokeAsync("RenderForm", new { formId = @Model.Content.FormPicker.Value, theme = "default", includeScripts = false })
</div>
Ah, I see the code you put up is to render the form in the back office grid. I was just wanting the name of the form for the label of the grid. I'm not doing wysiwyg in the back office. Not until the client pays for it anyway, it's a lot of extra work 😉
3 Views
PreviousNext
Powered by