Is it possible to add sitefinity widget to my custom widget? - sitefinity

Question

I'm attempting to create a custom widget in Sitefinity 11. The goal is to display tabs on the page, with panels of content below each clickable tab. I am using bootstrap to accomplish this which is simple enough.
My hope was to be able to add a Sitefinity placeholder to each tab, which would allow editors to drag and drop a widget, such as a content block to that tab. But it seems that when I try to do this, the placeholder area never displays in the CMS, like it would if I had added a placeholder to a custom template.
Is this possible?
Here is a short code example:
<div class="container mt-3">
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li id="tab1" class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#panel1">#Model.Tab1Name</a>
</li>
<li id="tab2" class="nav-item">
<a class="nav-link" data-toggle="tab" href="#panel2">#Model.Tab2Name</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div id="panel1" class="container tab-pane active">
#Html.SfPlaceHolder("Panel1")
<p>here is text</p>
</div>
<div id="panel2" class="container tab-pane fade">
#Html.SfPlaceHolder("Panel2")
</div>
</div>
Appreciate any help.

Answer 1

You cannot put a SfPlaceHolder on a widget, it must be in your layout file (page template).
What you can do is to create a custom designer for your widget and put one or more content blocks in it, e.g. one for each tab you want to have.
Then in the view, you simply render the content.
https://www.progress.com/documentation/sitefinity-cms/create-custom-designer-views-mvc
EDIT: To achieve this you need:
Controllers / MyRichTextController.cs
public string RichText
{
get;
set;
}
Views / MyRichText / DesignerView.Default.cshtml
<div class="form-group">
<sf-html-field class="kendo-content-block"
sf-images-settings="#SettingsHelpers.GetMediaSettings("Image")"
sf-videos-settings="#SettingsHelpers.GetMediaSettings("Video")"
sf-documents-settings="#SettingsHelpers.GetMediaSettings("Document")"
sf-model="properties.RichText.PropertyValue">
</sf-html-field>
</div>
Views / MyRichText / DesignerView.Default.json
{
"priority": 1,
"components": [ "sf-html-field" ]
}
Another alternative could be to create a Layout widget with the above html structure and that will allow the user to put content blocks inside the areas of the layout.
You can just copy any of the existing layout widgets and work on that. Note, that with this approach you would probably have some css rules that hide all but the first tab panel, so you will need to have some additional css rules just for the backend in order to show all the panels so that users can drag widgets to them. That would make this approach a little bit more trickier.