Form Based Activities not rendering with "Apply Propositions"

Hi ​@AvaniJa 

A key points from the documentation that explain your behavior:

• applyPropositions() is primarily used to render or re-render propositions and is especially useful in SPAs where content gets re-rendered.  https://experienceleague.adobe.com/en/docs/experience-platform/collection/js/commands/applypropositions 
• Propositions explicitly requested through scopes/surfaces are not automatically rendered. You need to provide metadata (selector, actionType) or custom rendering logic to tell Web SDK where the content should be applied.https://experienceleague.adobe.com/en/docs/experience-platform/tags/extensions/client/web-sdk/actions/apply-propositions
• The metadata parameter supports:
  • selector
  • actionType (setHtml, replaceHtml, appendHtml)
  allowing Web SDK to render HTML offers without manually manipulating the DOM. 

So in your case, the proposition was successfully returned in the network response, but because it was a form-based activity tied to a custom scope (appinstall-popup-mbox), Web SDK did not know where to place the content on the page.

Your custom code effectively served as the renderer. 

You may be able to avoid custom DOM code by supplying proposition metadata when calling applyPropositions(), for example: 

alloy("applyPropositions", {
  propositions: event.propositions,
  metadata: {
    "appinstall-popup-mbox": {
      selector: "#abc-membership > section > div > div",
      actionType: "setHtml"
    }
  }
});

Hope this helps. 

Thank you.

Hi ​@Gokul_Agiwal ,

The selector and action type was already specified in the apply propositions logic, , so it should work ideally , without custom code .

Let me know if I missed something.
 

Hi ​@PrasanthV ,

Location name from target UI and scope name are same , the selector is present on the web page and we have tried using append HTML also , nothing works .